/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-orange-50: oklch(98% 0.016 73.684);
    --color-orange-200: oklch(90.1% 0.076 70.697);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-orange-900: oklch(40.8% 0.123 38.172);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-yellow-50: oklch(98.7% 0.026 102.212);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-yellow-700: oklch(55.4% 0.135 66.442);
    --color-yellow-800: oklch(47.6% 0.114 61.907);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-teal-100: oklch(95.3% 0.051 180.801);
    --color-teal-200: oklch(91% 0.096 180.426);
    --color-teal-700: oklch(51.1% 0.096 186.391);
    --color-cyan-50: oklch(98.4% 0.019 200.873);
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-500: oklch(71.5% 0.143 215.221);
    --color-cyan-600: oklch(60.9% 0.126 221.723);
    --color-cyan-700: oklch(52% 0.105 223.128);
    --color-cyan-800: oklch(45% 0.085 224.283);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-violet-500: oklch(60.6% 0.25 292.717);
    --color-purple-50: oklch(97.7% 0.014 308.299);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-800: oklch(43.8% 0.218 303.724);
    --color-pink-500: oklch(65.6% 0.241 354.308);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .z-50 {
    z-index: 50;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .ms-1 {
    margin-inline-start: calc(var(--spacing) * 1);
  }
  .me-1 {
    margin-inline-end: calc(var(--spacing) * 1);
  }
  .me-2 {
    margin-inline-end: calc(var(--spacing) * 2);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-2\.5 {
    margin-right: calc(var(--spacing) * 2.5);
  }
  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-auto {
    height: auto;
  }
  .max-h-\[80vh\] {
    max-height: 80vh;
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-full {
    width: 100%;
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-full {
    max-width: 100%;
  }
  .min-w-full {
    min-width: 100%;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-zoom-in {
    cursor: zoom-in;
  }
  .resize {
    resize: both;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-gray-200 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-blue-200 {
    border-color: var(--color-blue-200);
  }
  .border-blue-500 {
    border-color: var(--color-blue-500);
  }
  .border-blue-600 {
    border-color: var(--color-blue-600);
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-green-200 {
    border-color: var(--color-green-200);
  }
  .border-green-400 {
    border-color: var(--color-green-400);
  }
  .border-green-500 {
    border-color: var(--color-green-500);
  }
  .border-orange-200 {
    border-color: var(--color-orange-200);
  }
  .border-red-200 {
    border-color: var(--color-red-200);
  }
  .border-red-400 {
    border-color: var(--color-red-400);
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-yellow-200 {
    border-color: var(--color-yellow-200);
  }
  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }
  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .bg-cyan-100 {
    background-color: var(--color-cyan-100);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }
  .bg-green-50 {
    background-color: var(--color-green-50);
  }
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .bg-green-600 {
    background-color: var(--color-green-600);
  }
  .bg-orange-50 {
    background-color: var(--color-orange-50);
  }
  .bg-orange-200 {
    background-color: var(--color-orange-200);
  }
  .bg-purple-100 {
    background-color: var(--color-purple-100);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-yellow-50 {
    background-color: var(--color-yellow-50);
  }
  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }
  .object-cover {
    object-fit: cover;
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[0\.8rem\] {
    font-size: 0.8rem;
  }
  .text-\[2\.5rem\] {
    font-size: 2.5rem;
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .text-blue-700 {
    color: var(--color-blue-700);
  }
  .text-blue-800 {
    color: var(--color-blue-800);
  }
  .text-cyan-800 {
    color: var(--color-cyan-800);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-green-700 {
    color: var(--color-green-700);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .text-orange-600 {
    color: var(--color-orange-600);
  }
  .text-orange-800 {
    color: var(--color-orange-800);
  }
  .text-purple-800 {
    color: var(--color-purple-800);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-yellow-700 {
    color: var(--color-yellow-700);
  }
  .text-yellow-800 {
    color: var(--color-yellow-800);
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-blue-300 {
    --tw-ring-color: var(--color-blue-300);
  }
  .ring-blue-400 {
    --tw-ring-color: var(--color-blue-400);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    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,);
  }
  .invert {
    --tw-invert: invert(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,);
  }
  .filter {
    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,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .\[migration\:configure_env_secrets\] {
    migration: configure env secrets;
  }
  .hover\:border-blue-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-blue-300);
      }
    }
  }
  .hover\:bg-amber-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-600);
      }
    }
  }
  .hover\:bg-blue-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .hover\:bg-gray-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .hover\:bg-gray-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .hover\:bg-green-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-700);
      }
    }
  }
  .hover\:text-blue-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .hover\:text-gray-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .hover\:text-red-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-blue-500 {
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}
.leaflet-container {
  overflow: hidden;
}
.leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.leaflet-tile::selection {
  background: transparent;
}
.leaflet-safari .leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
}
.leaflet-safari .leaflet-tile-container {
  width: 1600px;
  height: 1600px;
  -webkit-transform-origin: 0 0;
}
.leaflet-marker-icon, .leaflet-marker-shadow {
  display: block;
}
.leaflet-container .leaflet-overlay-pane svg {
  max-width: none !important;
  max-height: none !important;
}
.leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer, .leaflet-container .leaflet-tile {
  max-width: none !important;
  max-height: none !important;
  width: auto;
  padding: 0;
}
.leaflet-container img.leaflet-tile {
  mix-blend-mode: plus-lighter;
}
.leaflet-container.leaflet-touch-zoom {
  -ms-touch-action: pan-x pan-y;
  touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
  -ms-touch-action: pinch-zoom;
  touch-action: none;
  touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  -ms-touch-action: none;
  touch-action: none;
}
.leaflet-container {
  -webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
  -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
  filter: inherit;
  visibility: hidden;
}
.leaflet-tile-loaded {
  visibility: inherit;
}
.leaflet-zoom-box {
  width: 0;
  height: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 800;
}
.leaflet-overlay-pane svg {
  -moz-user-select: none;
}
.leaflet-pane {
  z-index: 400;
}
.leaflet-tile-pane {
  z-index: 200;
}
.leaflet-overlay-pane {
  z-index: 400;
}
.leaflet-shadow-pane {
  z-index: 500;
}
.leaflet-marker-pane {
  z-index: 600;
}
.leaflet-tooltip-pane {
  z-index: 650;
}
.leaflet-popup-pane {
  z-index: 700;
}
.leaflet-map-pane canvas {
  z-index: 100;
}
.leaflet-map-pane svg {
  z-index: 200;
}
.leaflet-vml-shape {
  width: 1px;
  height: 1px;
}
.lvml {
  behavior: url(#default#VML);
  display: inline-block;
  position: absolute;
}
.leaflet-control {
  position: relative;
  z-index: 800;
  pointer-events: visiblePainted;
  pointer-events: auto;
}
.leaflet-top, .leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
.leaflet-top {
  top: 0;
}
.leaflet-right {
  right: 0;
}
.leaflet-bottom {
  bottom: 0;
}
.leaflet-left {
  left: 0;
}
.leaflet-control {
  float: left;
  clear: both;
}
.leaflet-right .leaflet-control {
  float: right;
}
.leaflet-top .leaflet-control {
  margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
  margin-left: 10px;
}
.leaflet-right .leaflet-control {
  margin-right: 10px;
}
.leaflet-fade-anim .leaflet-popup {
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  opacity: 1;
}
.leaflet-zoom-animated {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
svg.leaflet-zoom-animated {
  will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
  -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
  transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
  visibility: hidden;
}
.leaflet-interactive {
  cursor: pointer;
}
.leaflet-grab {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}
.leaflet-crosshair, .leaflet-crosshair .leaflet-interactive {
  cursor: crosshair;
}
.leaflet-popup-pane, .leaflet-control {
  cursor: auto;
}
.leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive, .leaflet-dragging .leaflet-marker-draggable {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}
.leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container {
  pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive, .leaflet-image-layer.leaflet-interactive, .leaflet-pane > svg path.leaflet-interactive, svg.leaflet-image-layer.leaflet-interactive path {
  pointer-events: visiblePainted;
  pointer-events: auto;
}
.leaflet-container {
  background: #ddd;
  outline-offset: 1px;
}
.leaflet-container a {
  color: #0078A8;
}
.leaflet-zoom-box {
  border: 2px dotted #38f;
  background: rgba(255,255,255,0.5);
}
.leaflet-container {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}
.leaflet-bar {
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  border-radius: 4px;
}
.leaflet-bar a {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
}
.leaflet-bar a, .leaflet-control-layers-toggle {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
}
.leaflet-bar a:hover, .leaflet-bar a:focus {
  background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
  cursor: default;
  background-color: #f4f4f4;
  color: #bbb;
}
.leaflet-touch .leaflet-bar a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
  font: bold 18px 'Lucida Console', Monaco, monospace;
  text-indent: 1px;
}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
  font-size: 22px;
}
.leaflet-control-layers {
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  background: #fff;
  border-radius: 5px;
}
.leaflet-control-layers-toggle {
  background-image: url("images/layers-de9cc1175a255fbf80d39009760a0456.png");
  width: 36px;
  height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url("images/layers-2x-81f1f9197fd8eced81ad7be5b7b89169.png");
  background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list, .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block;
  position: relative;
}
.leaflet-control-layers-expanded {
  padding: 6px 10px 6px 6px;
  color: #333;
  background: #fff;
}
.leaflet-control-layers-scrollbar {
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 5px;
}
.leaflet-control-layers-selector {
  margin-top: 2px;
  position: relative;
  top: 1px;
}
.leaflet-control-layers label {
  display: block;
  font-size: 13px;
  font-size: 1.08333em;
}
.leaflet-control-layers-separator {
  height: 0;
  border-top: 1px solid #ddd;
  margin: 5px -10px 5px -6px;
}
.leaflet-default-icon-path {
  background-image: url("images/marker-icon-609c528fb06f1f28b22f55293f7d3721.png");
}
.leaflet-container .leaflet-control-attribution {
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  margin: 0;
}
.leaflet-control-attribution, .leaflet-control-scale-line {
  padding: 0 5px;
  color: #333;
  line-height: 1.4;
}
.leaflet-control-attribution a {
  text-decoration: none;
}
.leaflet-control-attribution a:hover, .leaflet-control-attribution a:focus {
  text-decoration: underline;
}
.leaflet-attribution-flag {
  display: inline !important;
  vertical-align: baseline !important;
  width: 1em;
  height: 0.6669em;
}
.leaflet-left .leaflet-control-scale {
  margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
  margin-bottom: 5px;
}
.leaflet-control-scale-line {
  border: 2px solid #777;
  border-top: none;
  line-height: 1.1;
  padding: 2px 5px 1px;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px #fff;
}
.leaflet-control-scale-line:not(:first-child) {
  border-top: 2px solid #777;
  border-bottom: none;
  margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
  border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  box-shadow: none;
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  border: 2px solid rgba(0,0,0,0.2);
  background-clip: padding-box;
}
.leaflet-popup {
  position: absolute;
  text-align: center;
  margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
  padding: 1px;
  text-align: left;
  border-radius: 12px;
}
.leaflet-popup-content {
  margin: 13px 24px 13px 20px;
  line-height: 1.3;
  font-size: 13px;
  font-size: 1.08333em;
  min-height: 1px;
}
.leaflet-popup-content p {
  margin: 17px 0;
  margin: 1.3em 0;
}
.leaflet-popup-tip-container {
  width: 40px;
  height: 20px;
  position: absolute;
  left: 50%;
  margin-top: -1px;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}
.leaflet-popup-tip {
  width: 17px;
  height: 17px;
  padding: 1px;
  margin: -10px auto 0;
  pointer-events: auto;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: white;
  color: #333;
  box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  text-align: center;
  width: 24px;
  height: 24px;
  font: 16px/24px Tahoma, Verdana, sans-serif;
  color: #757575;
  text-decoration: none;
  background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover, .leaflet-container a.leaflet-popup-close-button:focus {
  color: #585858;
}
.leaflet-popup-scrolled {
  overflow: auto;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
  -ms-zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
  width: 24px;
  margin: 0 auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip {
  border: 1px solid #999;
}
.leaflet-div-icon {
  background: #fff;
  border: 1px solid #666;
}
.leaflet-tooltip {
  position: absolute;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #222;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.leaflet-tooltip.leaflet-interactive {
  cursor: pointer;
  pointer-events: auto;
}
.leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
  position: absolute;
  pointer-events: none;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}
.leaflet-tooltip-bottom {
  margin-top: 6px;
}
.leaflet-tooltip-top {
  margin-top: -6px;
}
.leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before {
  left: 50%;
  margin-left: -6px;
}
.leaflet-tooltip-top:before {
  bottom: 0;
  margin-bottom: -12px;
  border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
  top: 0;
  margin-top: -12px;
  margin-left: -6px;
  border-bottom-color: #fff;
}
.leaflet-tooltip-left {
  margin-left: -6px;
}
.leaflet-tooltip-right {
  margin-left: 6px;
}
.leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
  top: 50%;
  margin-top: -6px;
}
.leaflet-tooltip-left:before {
  right: 0;
  margin-right: -12px;
  border-left-color: #fff;
}
.leaflet-tooltip-right:before {
  left: 0;
  margin-left: -12px;
  border-right-color: #fff;
}
@media print {
  .leaflet-control {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
  -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
  -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
  -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
  transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.leaflet-cluster-spider-leg {
  -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
  -moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
  -o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
  transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}
.marker-cluster-small {
  background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
  background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
  background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
  background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
  background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
  background-color: rgba(241, 128, 23, 0.6);
}
.leaflet-oldie .marker-cluster-small {
  background-color: rgb(181, 226, 140);
}
.leaflet-oldie .marker-cluster-small div {
  background-color: rgb(110, 204, 57);
}
.leaflet-oldie .marker-cluster-medium {
  background-color: rgb(241, 211, 87);
}
.leaflet-oldie .marker-cluster-medium div {
  background-color: rgb(240, 194, 12);
}
.leaflet-oldie .marker-cluster-large {
  background-color: rgb(253, 156, 115);
}
.leaflet-oldie .marker-cluster-large div {
  background-color: rgb(241, 128, 23);
}
.marker-cluster {
  background-clip: padding-box;
  border-radius: 20px;
}
.marker-cluster div {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
  border-radius: 15px;
  font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
  line-height: 30px;
}
[x-cloak] {
  display: none !important;
}
@layer components {
  body.nimrod-app {
    background-color: var(--color-gray-50);
  }
  .breadcrumb__parent {
    color: var(--color-gray-600);
  }
  .breadcrumb__current {
    color: var(--color-gray-900);
  }
  .icon--xs {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
  }
  .icon--base {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .icon--sm {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .icon--md {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
  }
  .icon--lg {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
  }
  .icon--xl {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
  }
  .icon--inline {
    display: inline;
  }
  .icon--mr-1 {
    margin-right: 0.25rem;
  }
  .icon--mr-1\.5 {
    margin-right: 0.375rem;
  }
  .icon--mr-2 {
    margin-right: 0.5rem;
  }
  .empty-state {
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .empty-state__icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    color: var(--color-gray-300);
  }
  .empty-state__icon svg {
    height: 100%;
    width: 100%;
  }
  .empty-state__title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .empty-state--padded {
    padding-block: calc(var(--spacing) * 12);
  }
  .code-text {
    font-family: var(--font-mono);
  }
  .text--muted {
    color: var(--color-gray-500);
  }
  .form--inline {
    display: inline;
  }
}
@layer components {
  :root {
    --nimrod-blue-primary: #003d82;
    --nimrod-blue-secondary: #0066cc;
    --nimrod-blue-light: #3399ff;
    --nimrod-steel-dark: #4a5568;
    --nimrod-steel: #718096;
    --nimrod-steel-light: #cbd5e0;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-primary-50: #e6f0ff;
    --color-primary-100: #b3d1ff;
    --color-primary-200: #80b3ff;
    --color-primary-300: #4d94ff;
    --color-primary-400: #1a75ff;
    --color-primary-500: #0066cc;
    --color-primary-600: #0052a3;
    --color-primary-700: #003d82;
    --color-primary-800: #002952;
    --color-primary-900: #001429;
    --color-success-100: #d1fae5;
    --color-success-300: #6ee7b7;
    --color-success-700: #047857;
    --color-warning-100: #fef3c7;
    --color-warning-300: #fcd34d;
    --color-warning-700: #b45309;
    --color-error-100: #fee2e2;
    --color-error-300: #fca5a5;
    --color-error-700: #b91c1c;
    --color-info-100: #dbeafe;
    --color-info-300: #93c5fd;
    --color-info-700: #1d4ed8;
    --font-family-base: 'Inter', sans-serif;
    --font-family-display: 'Space Grotesk', sans-serif;
    --font-family-mono: 'Roboto Mono', monospace;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --radius-sm: 4px;
    --radius-base: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 50%;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-color-base: var(--color-gray-300);
    --border-color-dark: var(--color-gray-400);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
  }
  * {
    font-family: var(--font-family-base);
  }
  body {
    background-color: var(--color-gray-50);
    color: var(--color-gray-900);
  }
}
@layer components {
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
  }
  .container-sm {
    max-width: 640px;
  }
  .container-md {
    max-width: 768px;
  }
  .container-lg {
    max-width: 1024px;
  }
  .container-xl {
    max-width: 1280px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .flex {
    display: flex;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-1 {
    flex: 1;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-2 {
    gap: var(--space-2);
  }
  .gap-3 {
    gap: var(--space-3);
  }
  .gap-4 {
    gap: var(--space-4);
  }
  .p-4 {
    padding: var(--space-4);
  }
  .p-8 {
    padding: var(--space-8);
  }
  .px-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .py-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .py-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .pt-4 {
    padding-top: var(--space-4);
  }
  .pt-6 {
    padding-top: var(--space-6);
  }
  .mb-2 {
    margin-bottom: var(--space-2);
  }
  .mb-4 {
    margin-bottom: var(--space-4);
  }
  .mb-6 {
    margin-bottom: var(--space-6);
  }
  .mb-8 {
    margin-bottom: var(--space-8);
  }
  .mt-3 {
    margin-top: var(--space-3);
  }
  .mt-4 {
    margin-top: var(--space-4);
  }
  .mt-6 {
    margin-top: var(--space-6);
  }
  .mt-8 {
    margin-top: var(--space-8);
  }
  .text-center {
    text-align: center;
  }
  .text-sm {
    font-size: var(--font-size-sm);
  }
  .text-xs {
    font-size: var(--font-size-xs);
  }
  .text-2xl {
    font-size: var(--font-size-2xl);
  }
  .text-3xl {
    font-size: var(--font-size-3xl);
  }
  .font-medium {
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    font-weight: var(--font-weight-semibold);
  }
  .font-bold {
    font-weight: var(--font-weight-bold);
  }
  .font-space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
  }
  .w-full {
    width: 100%;
  }
  .max-w-md {
    max-width: 28rem;
  }
  .max-w-4xl {
    max-width: 56rem;
  }
  .max-w-6xl {
    max-width: 72rem;
  }
  .border {
    border: var(--border-width-1) solid var(--border-color-base);
  }
  .border-2 {
    border: var(--border-width-2) solid var(--border-color-base);
  }
  .border-b {
    border-bottom: var(--border-width-1) solid var(--border-color-base);
  }
  .border-t {
    border-top: var(--border-width-1) solid var(--border-color-base);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-gray-400 {
    border-color: var(--color-gray-400);
  }
  .bg-white {
    background-color: white;
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }
  .bg-ideva-blue-primary {
    background-color: var(--ideva-blue-primary);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-white {
    color: #ffffff;
  }
  .text-ideva-blue-secondary {
    color: var(--ideva_blue-secondary);
  }
  .text-ideva-midnight-grey {
    color: var(--ideva-midnight-grey);
  }
  .max-w-logo {
    max-width: 220px;
  }
  .hidden {
    display: none;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .block {
    display: block;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
}
@layer components {
  .form__group {
    margin-bottom: var(--space-5);
  }
  label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
    color: var(--color-gray-900);
  }
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea, select {
    width: 100%;
    border: var(--border-width-1) solid var(--color-gray-400);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
    background-color: white;
    color: var(--color-gray-900);
  }
  input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-gray-600);
  }
  input::placeholder, textarea::placeholder {
    color: var(--color-gray-400);
  }
  textarea {
    resize: vertical;
    min-height: 80px;
  }
  textarea.resize-none {
    resize: none;
  }
  input[type="checkbox"], input[type="radio"] {
    width: auto;
    margin-right: var(--space-2);
    cursor: pointer;
  }
  .form-error {
    border-color: var(--color-error-700);
  }
  .form-success {
    border-color: var(--color-success-700);
  }
  .error-message {
    color: var(--color-error-700);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
  }
  .success-message {
    color: var(--color-success-700);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
  }
  .space-y-5 > * + * {
    margin-top: var(--space-5);
  }
  .space-y-6 > * + * {
    margin-top: var(--space-6);
  }
}
@layer components {
  .card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);
  }
  .card:hover {
    box-shadow: var(--shadow-md);
  }
  .card-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-gray-200);
  }
  .card-body {
    padding: var(--space-6);
  }
  .card-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-gray-200);
    background-color: var(--color-gray-50);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-base);
    line-height: 1.5;
  }
  .badge-primary {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
  }
  .badge-success {
    background-color: var(--color-success-100);
    color: var(--color-success-700);
  }
  .badge-warning {
    background-color: var(--color-warning-100);
    color: var(--color-warning-700);
  }
  .badge-error {
    background-color: var(--color-error-100);
    color: var(--color-error-700);
  }
  .badge-gray {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
  }
  .table {
    width: 100%;
    border-collapse: collapse;
  }
  .table th {
    background-color: var(--color-gray-50);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    border-bottom: 2px solid var(--color-gray-200);
  }
  .table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
  }
  .table tr:hover td {
    background-color: var(--color-gray-50);
  }
  .alert {
    padding: var(--space-4);
    border-radius: var(--radius-base);
    border: 1px solid transparent;
    margin-bottom: var(--space-4);
  }
  .alert-success {
    background-color: var(--color-success-100);
    border-color: var(--color-success-300);
    color: var(--color-success-700);
  }
  .alert-warning {
    background-color: var(--color-warning-100);
    border-color: var(--color-warning-300);
    color: var(--color-warning-700);
  }
  .alert-error {
    background-color: var(--color-error-100);
    border-color: var(--color-error-300);
    color: var(--color-error-700);
  }
  .alert-info {
    background-color: var(--color-info-100);
    border-color: var(--color-info-300);
    color: var(--color-info-700);
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
  }
  .stat-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1px solid var(--color-gray-200);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }
  .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .stat-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--nimrod-blue-primary);
    line-height: 1.2;
  }
  .stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-top: var(--space-2);
  }
  .empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--color-gray-300);
  }
  .empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    color: var(--color-gray-400);
  }
  .empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
  }
  .empty-state-text {
    font-size: var(--font-size-base);
    color: var(--color-gray-500);
    margin-bottom: var(--space-6);
  }
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
  }
  .breadcrumb a {
    color: var(--nimrod-blue-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  .breadcrumb a:hover {
    color: var(--nimrod-blue-primary);
  }
  .breadcrumb-separator {
    color: var(--color-gray-400);
  }
  .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--nimrod-blue-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .action-buttons {
    display: flex;
    gap: var(--space-2);
    align-items: center;
  }
  .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-gray-300);
    background: white;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  .action-button:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
  }
  .action-button-primary:hover {
    background: var(--nimrod-blue-light);
    color: white;
    border-color: var(--nimrod-blue-light);
  }
  .action-button-danger:hover {
    background: var(--color-error-700);
    color: white;
    border-color: var(--color-error-700);
  }
}
@layer components {
  .app-hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #3a4a5c;
    font-size: 1.125rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
  }
  .app-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }
  .app-sidebar-overlay.active {
    display: block;
  }
  @media (min-width: 769px) {
    .app-sidebar-overlay {
      display: none !important;
    }
  }
  .app-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-table-responsive table {
    min-width: 600px;
  }
  .app-table-responsive th:first-child, .app-table-responsive td:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
  }
  @media (max-width: 1200px) {
    .app-sidebar {
      width: 56px !important;
    }
    .app-sidebar .sidebar-links span, .app-sidebar .sidebar-toggle span, .app-sidebar .sidebar-toggle .fa-chevron-down, .app-sidebar nav > div > a > span, .app-sidebar__version {
      display: none;
    }
    .app-sidebar .sidebar-links a, .app-sidebar nav > div > a {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
    }
    .app-sidebar .sidebar-toggle {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
    }
    .app-sidebar__link {
      justify-content: center;
      padding-left: 0 !important;
      padding-right: 0 !important;
      border-left-width: 0 !important;
    }
    .app-sidebar__link--active {
      border-bottom: 2px solid #00bcd4;
    }
    .app-main {
      margin-left: 56px !important;
      padding: 1rem !important;
    }
    .app-header__brand {
      width: 56px !important;
      justify-content: center;
    }
    .app-header__vertical {
      padding-left: 12px;
    }
    .row, .form__row {
      flex-direction: column;
    }
    .col-md-6, .col-md-4, .col-md-3 {
      width: 100%;
      max-width: 100%;
    }
  }
  @media (max-width: 768px) {
    .app-hamburger-btn {
      display: block;
    }
    .app-sidebar {
      display: none;
      position: fixed;
      top: 48px;
      left: 0;
      width: 220px !important;
      height: calc(100vh - 48px);
      z-index: 45;
    }
    .app-sidebar.app-sidebar-open {
      display: block;
    }
    .app-sidebar.app-sidebar-open .sidebar-links span, .app-sidebar.app-sidebar-open .sidebar-toggle span, .app-sidebar.app-sidebar-open .sidebar-toggle .fa-chevron-down, .app-sidebar.app-sidebar-open nav > div > a > span {
      display: inline;
    }
    .app-sidebar.app-sidebar-open .sidebar-links a, .app-sidebar.app-sidebar-open nav > div > a {
      justify-content: flex-start;
      padding-left: 20px;
      padding-right: 16px;
    }
    .app-sidebar.app-sidebar-open .sidebar-toggle {
      justify-content: space-between;
      padding-left: 20px;
      padding-right: 16px;
    }
    .app-main {
      margin-left: 0 !important;
      padding: 0.75rem !important;
    }
    .app-header__vertical {
      display: none;
    }
    .card {
      padding: 0.75rem;
    }
    .stats-grid {
      grid-template-columns: 1fr;
    }
  }
  @media (orientation: landscape) and (max-width: 1200px) {
    .app-main {
      min-height: 100vh;
    }
  }
}
@layer components {
  #nimrod-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: 400px;
  }
  .nimrod-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 0.875rem;
    line-height: 1.25rem;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 100%;
  }
  .nimrod-toast--visible {
    opacity: 1;
    transform: translateX(0);
  }
  .nimrod-toast--hiding {
    opacity: 0;
    transform: translateX(100%);
  }
  .nimrod-toast--success {
    background: #ecfdf5;
    border-left: 4px solid #10b981;
    color: #065f46;
  }
  .nimrod-toast--error {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #991b1b;
  }
  .nimrod-toast--warning {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    color: #92400e;
  }
  .nimrod-toast--info {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    color: #1e40af;
  }
  .nimrod-toast-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }
  .nimrod-toast-message {
    flex: 1;
    word-break: break-word;
  }
  .nimrod-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.5;
    padding: 0 0.25rem;
    flex-shrink: 0;
    color: inherit;
  }
  .nimrod-toast-close:hover {
    opacity: 1;
  }
  .nimrod-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nimrod-confirm-overlay.hidden {
    display: none;
  }
  .nimrod-confirm-dialog {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }
  .nimrod-confirm-message {
    font-size: 0.9375rem;
    color: #374151;
    margin: 0 0 1.25rem;
    line-height: 1.5;
  }
  .nimrod-confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
  }
  .nimrod-confirm-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #d1d5db;
    transition: background 0.15s;
  }
  .nimrod-confirm-btn--cancel {
    background: white;
    color: #374151;
  }
  .nimrod-confirm-btn--cancel:hover {
    background: #f3f4f6;
  }
  .nimrod-confirm-btn--confirm {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
  }
  .nimrod-confirm-btn--confirm:hover {
    background: #dc2626;
  }
  .nimrod-loading-progress {
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-top: 0.75rem;
    overflow: hidden;
  }
  .nimrod-loading-progress-bar {
    height: 100%;
    background: #3b82f6;
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
  }
  .nimrod-field-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444 !important;
  }
  .nimrod-field-error-msg {
    display: block;
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 0.25rem;
  }
  .nimrod-tooltip {
    position: absolute;
    z-index: 10001;
    background: #1f2937;
    color: white;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.25;
    max-width: 250px;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
  .nimrod-tooltip.hidden {
    display: none;
  }
  .nimrod-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #1f2937;
  }
  .nimrod-tooltip--below::after {
    bottom: auto;
    top: -4px;
    border-top: none;
    border-bottom: 5px solid #1f2937;
  }
  .nimrod-shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nimrod-shortcuts-overlay.hidden {
    display: none;
  }
  .nimrod-shortcuts-dialog {
    background: white;
    border-radius: 0.75rem;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
  }
  .nimrod-shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
  }
  .nimrod-shortcuts-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
  }
  .nimrod-shortcuts-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #6b7280;
    line-height: 1;
  }
  .nimrod-shortcuts-close:hover {
    color: #111827;
  }
  .nimrod-shortcuts-body {
    padding: 1rem 1.25rem;
    max-height: 60vh;
    overflow-y: auto;
  }
  .nimrod-shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }
  .nimrod-shortcuts-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid #e5e7eb;
    color: #6b7280;
    font-weight: 500;
  }
  .nimrod-shortcuts-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
  }
  .nimrod-shortcuts-table kbd {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8125rem;
  }
  .nimrod-undo-btn {
    background: white;
    color: #1e40af;
    border: 1px solid #93c5fd;
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
  }
  .nimrod-undo-btn:hover {
    background: #dbeafe;
  }
  .nimrod-undo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .nimrod-undo-countdown {
    font-weight: 700;
  }
  :root {
    --module-color: #0066cc;
    --module-color-bg: var(--module-color);
    @supports (color: color-mix(in lab, red, red)) {
      --module-color-bg: color-mix(in srgb, var(--module-color) 4%, transparent);
    }
  }
  body[data-modulo-color="dashboard"] {
    --module-color: #0066cc;
  }
  body[data-modulo-color="alertas"] {
    --module-color: #e53e3e;
  }
  body[data-modulo-color="eventos"] {
    --module-color: #00bcd4;
  }
  body[data-modulo-color="agentes"] {
    --module-color: #f97316;
  }
  body[data-modulo-color="conectividad"] {
    --module-color: #0d9488;
  }
  body[data-modulo-color="telemetria"] {
    --module-color: #1e40af;
  }
  body[data-modulo-color="evolucion"] {
    --module-color: #7c3aed;
  }
  body[data-modulo-color="mapa"] {
    --module-color: #d946ef;
  }
  body[data-modulo-color="organizacion"] {
    --module-color: #16a34a;
  }
  body[data-modulo-color="destinatarios"] {
    --module-color: #1d4ed8;
  }
  body[data-modulo-color="informes"] {
    --module-color: #b45309;
  }
  button[class*="__filter-btn"], button[class*="__btn--submit"], button[class*="__btn--primary"], button.periodo-filter__btn, button.periodo-filter__apply-btn {
    cursor: pointer;
  }
  button[class*="__filter-btn"]:disabled, button[class*="__btn--submit"]:disabled, button[class*="__btn--primary"]:disabled, button.periodo-filter__btn:disabled, button.periodo-filter__apply-btn:disabled {
    cursor: not-allowed;
  }
}
@layer components {
  button[disabled], a.perm-disabled, .perm-disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
    pointer-events: none;
    user-select: none;
  }
  form:has(> button[disabled][type="submit"]:only-of-type) {
    pointer-events: none;
  }
  button[disabled][title], a.perm-disabled[title], .perm-disabled[title] {
    pointer-events: auto;
    cursor: not-allowed !important;
  }
}
@layer components {
  .camera-widget {
    display: flex;
    max-width: var(--container-md);
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .camera-widget__viewport {
    position: relative;
    overflow: hidden;
    border-radius: 0.25rem;
    background-color: var(--color-black);
    aspect-ratio: 4 / 3;
  }
  .camera-widget__img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .camera-widget__badge {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    border-radius: 0.25rem;
    background-color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
  }
  .camera-widget__controls {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .camera-widget__pad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .camera-widget__row {
    display: flex;
    gap: calc(var(--spacing) * 1);
  }
  .camera-widget__btn {
    display: flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-50);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
    &:active {
      background-color: var(--color-gray-200);
    }
  }
  .camera-widget__btn--reset {
    border-color: var(--color-amber-300);
    background-color: var(--color-amber-50);
    color: var(--color-amber-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-100);
      }
    }
  }
  .camera-widget__zoom {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .camera-widget__zoom-slider {
    height: calc(var(--spacing) * 2);
    flex: 1;
    cursor: pointer;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
  }
  .camera-widget__zoom-label {
    min-width: 3rem;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-600);
  }
  .camera-widget__status {
    display: flex;
    gap: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .camera-widget__presets {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 2);
  }
  .camera-widget__preset-btn {
    cursor: pointer;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .camera-widget-modal {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1400;
  }
  .camera-widget-modal__backdrop {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .camera-widget-modal__dialog {
    position: relative;
    margin-inline: calc(var(--spacing) * 4);
    width: 100%;
    max-width: var(--container-2xl);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    z-index: 1410;
  }
  .camera-widget-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .camera-widget-modal__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .camera-widget-modal__close {
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    color: var(--color-gray-500);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
  .camera-widget-modal__body {
    padding: calc(var(--spacing) * 4);
  }
  .sensor-list__action-ptz {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    color: var(--color-indigo-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-indigo-700);
      }
    }
  }
}
[x-cloak] {
  display: none !important;
}
.app-layout__wrapper {
  display: flex;
}
.app-main {
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  padding: calc(var(--spacing) * 6);
  margin-left: 220px;
  margin-top: 48px;
  background-color: #ffffff;
  min-height: calc(100vh - 48px);
  transition: margin-left 0.2s ease;
}
.app-sidebar--collapsed ~ .app-main, body.sidebar-collapsed .app-main {
  margin-left: 56px;
}
.app-main__container {
  margin-inline: auto;
  max-width: 1900px;
}
.app-main__container--wide {
  max-width: 100%;
}
.auth-layout {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  --tw-gradient-position: to bottom right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-gray-100);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: var(--color-gray-200);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.auth-layout__card {
  width: 100%;
  max-width: var(--container-md);
}
@layer components {
  .admin-form {
    padding: calc(var(--spacing) * 8);
  }
  .admin-form__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .admin-form__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .admin-form__container {
    margin-inline: auto;
    max-width: var(--container-4xl);
  }
  .admin-form__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .admin-form__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .admin-form__body {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .admin-form__card {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .admin-form__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .admin-form__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .admin-form__help-text {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .admin-form__checkbox-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .admin-form__checkbox {
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .admin-form__checkbox-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .admin-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .admin-form__btn-primary {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .admin-form__btn-secondary {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
}
@layer components {
  .app-alerts {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .app-alert {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .app-alert--success {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    color: var(--color-green-800);
  }
  .app-alert--error {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    color: var(--color-red-800);
  }
  .app-alert--warning {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-200);
    background-color: var(--color-yellow-50);
    color: var(--color-yellow-800);
  }
  .app-alert--info {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    color: var(--color-blue-800);
  }
  .app-alert__icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
  }
  .app-alert__body {
    flex: 1;
  }
  .app-alert__message {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .app-alert__close {
    margin-inline: calc(var(--spacing) * -1.5);
    margin-block: calc(var(--spacing) * -1.5);
    margin-left: auto;
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 1.5);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .app-alert__close-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
}
@layer components {
  .busqueda-rapida {
    position: relative;
    max-width: 400px;
  }
  .busqueda-rapida__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }
  .busqueda-rapida__input {
    padding-right: 80px;
  }
  .busqueda-rapida__shortcut-hint {
    position: absolute;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    right: 8px;
    opacity: 0.5;
  }
  .busqueda-rapida__shortcut-hint kbd {
    background: #e0e0e0;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.7rem;
  }
  .busqueda-rapida__dropdown {
    position: absolute;
    overflow-y: auto;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1050;
    max-height: 400px;
  }
  .busqueda-rapida__item {
    display: flex;
    cursor: pointer;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    border-bottom: 1px solid #f0f0f0;
  }
  .busqueda-rapida__item:hover, .busqueda-rapida__item--active {
    background: #f8f9fa;
  }
  .busqueda-rapida__item-tipo {
    flex-shrink: 0;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
  }
  .busqueda-rapida__item-tipo--estacion {
    background: #d4edda;
    color: #155724;
  }
  .busqueda-rapida__item-tipo--evento {
    background: #d1ecf1;
    color: #0c5460;
  }
  .busqueda-rapida__item-tipo--sensor {
    background: #fff3cd;
    color: #856404;
  }
  .busqueda-rapida__item-texto {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .busqueda-rapida__item-subtexto {
    font-size: 0.8rem;
    color: #6c757d;
  }
  .busqueda-rapida__historial-titulo {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    padding: 6px 12px;
    color: #6c757d;
  }
  .busqueda-rapida__loading {
    text-align: center;
    padding: 12px;
    color: #6c757d;
  }
  .busqueda-rapida__sin-resultados {
    text-align: center;
    font-style: italic;
    padding: 12px;
    color: #6c757d;
  }
  .busqueda-rapida__dropdown--oculto {
    display: none;
  }
  .busqueda-rapida__loading--oculto {
    display: none;
  }
  .busqueda-rapida__sin-resultados--oculto {
    display: none;
  }
}
@layer components {
  .app-filter-bar {
    margin-bottom: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-left: 3px solid var(--module-color, #e5e7eb);
    overflow: visible;
  }
  .app-filter-bar__form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 0);
  }
  .app-filter-bar__primary {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    flex-wrap: nowrap;
    overflow: visible;
  }
  .app-filter-bar__leading-actions {
    display: flex;
    flex-shrink: 0;
    align-items: flex-end;
    gap: calc(var(--spacing) * 1.5);
    margin-right: calc(0.375rem + 1px);
  }
  .app-filter-bar__leading-actions .app-filter-bar__create-compact {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    background-color: var(--module-color, #4b5563);
    border-color: var(--module-color, #4b5563);
    color: #fff;
  }
  .app-filter-bar__leading-actions .app-filter-bar__create-compact:hover {
    filter: brightness(0.92);
  }
  .app-filter-bar__fields {
    display: flex;
    flex: 1;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    flex-wrap: nowrap;
    min-width: 0;
    overflow: visible;
  }
  .app-filter-bar__group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 0);
    flex: 0 0 auto;
    min-width: fit-content;
    width: fit-content;
  }
  .app-filter-bar__group--search {
    flex: 0 0 auto;
  }
  .app-filter-bar__group--full-row {
    flex: 0 0 auto;
    width: fit-content;
  }
  .app-filter-bar__group--push-right {
    margin-left: auto;
  }
  .app-filter-bar__group--inline {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    align-self: flex-end;
    gap: 0.375rem;
    min-width: auto;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border: 1px solid transparent;
    font-size: 0.8125rem;
    line-height: 1.125rem;
  }
  .app-filter-bar__label {
    display: none;
  }
  .app-filter-bar__input, .app-filter-bar__select {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
    &:focus {
      border-color: transparent;
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    --tw-ring-color: var(--module-color, #3b82f6);
    height: 2rem;
    height: calc(1lh + 0.5rem + 2px);
    box-sizing: border-box;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
  }
  .app-filter-bar__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.1em;
    padding-right: 1.75rem;
  }
  .app-filter-bar__input:focus, .app-filter-bar__select:focus {
    border-color: var(--module-color, #3b82f6);
  }
  .app-filter-bar__input:disabled, .app-filter-bar__select:disabled {
    cursor: not-allowed;
    background-color: var(--color-gray-100);
    color: var(--color-gray-400);
    border-color: #e5e7eb;
    opacity: 0.6;
  }
  .app-filter-bar__checkbox {
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    accent-color: var(--module-color, #3b82f6);
    margin: 0;
  }
  .app-filter-bar__checkbox-label {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
    -webkit-user-select: none;
    user-select: none;
    padding-block: calc(var(--spacing) * 1);
    border: 1px solid transparent;
  }
  .app-filter-bar__actions {
    margin-left: auto;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    flex-wrap: nowrap;
  }
  .app-filter-bar__actions--in-advanced {
    margin-left: auto;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: nowrap;
  }
  .app-filter-bar__actions > * {
    flex: 0 0 auto;
  }
  .app-filter-bar__btn--primary {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #4b5563);
    color: #fff;
    height: 2rem;
    box-sizing: border-box;
  }
  .app-filter-bar__btn--primary:hover {
    opacity: 0.92;
  }
  .app-filter-bar__btn--secondary {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
    height: 2rem;
    box-sizing: border-box;
  }
  .app-filter-bar__btn-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }
  .app-filter-bar__btn--extra {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #6b7280);
    border: 1px solid var(--module-color, #6b7280);
    color: #fff;
    height: 2rem;
    box-sizing: border-box;
  }
  .app-filter-bar__btn--extra:hover {
    filter: brightness(0.9);
  }
  .app-filter-bar__btn--extra:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .app-filter-bar__btn--icon-only {
    box-sizing: border-box;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 1;
    justify-content: center;
  }
  .app-filter-bar__btn--icon-only > svg, .app-filter-bar__btn--icon-only > i {
    display: block;
    width: 1rem;
    height: 1rem;
    line-height: 1;
    text-align: center;
    flex: 0 0 auto;
  }
  .app-filter-bar__toggle {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    color: var(--color-gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    width: 2rem;
    height: 2rem;
  }
  .app-filter-bar__toggle-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .app-filter-bar__toggle[aria-expanded="true"] .app-filter-bar__toggle-icon {
    transform: rotate(180deg);
  }
  .app-filter-bar__advanced {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-100);
    padding-top: calc(var(--spacing) * 2.5);
  }
  .app-filter-bar__advanced--hidden {
    display: none;
  }
  .app-filter-bar__advanced-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .app-filter-bar__leading-spacer {
    flex: 0 0 auto;
    width: calc(2rem + 1px + 0.375rem);
    min-width: calc(2rem + 1px + 0.375rem);
    height: 1px;
    align-self: stretch;
  }
  .app-filter-bar__status {
    margin-top: calc(var(--spacing) * 1);
    min-height: calc(var(--spacing) * 4);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .app-filter-bar__advanced-fields .periodo-filter {
    margin-bottom: 0;
    align-self: flex-end;
  }
  .app-filter-bar__text-toggle {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-600);
    -webkit-user-select: none;
    user-select: none;
    padding-block: calc(var(--spacing) * 1);
    border: 1px solid transparent;
    transition: color 0.15s, font-weight 0.15s;
  }
  .app-filter-bar__text-toggle:hover {
    color: var(--module-color, #4b5563);
  }
  .app-filter-bar__text-toggle--active {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    text-decoration-line: underline;
  }
  .app-filter-bar__toggle-group {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 0);
    white-space: nowrap;
    padding-block: calc(var(--spacing) * 1);
    border: 1px solid transparent;
  }
  .app-filter-bar__toggle-group .app-filter-bar__text-toggle {
    padding-block: 0;
    border: none;
  }
  .app-filter-bar__toggle-group-separator {
    margin-inline: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
    pointer-events: none;
  }
  @media (max-width: 1280px) {
    .app-filter-bar__action-filter, .app-filter-bar__action-clear {
      display: none !important;
    }
  }
}
@layer components {
  .i18n-selector {
    position: relative;
  }
  .i18n-selector__toggle {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .i18n-selector__toggle:hover {
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .i18n-selector__toggle-icon {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .i18n-selector__toggle-caret {
    font-size: 10px;
  }
  .i18n-selector__dropdown {
    position: absolute;
    top: 100%;
    right: calc(var(--spacing) * 0);
    z-index: 60;
    margin-top: calc(var(--spacing) * 1);
    min-width: calc(var(--spacing) * 35);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .i18n-selector__dropdown--hidden {
    display: none;
  }
  .i18n-selector__option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .i18n-selector__option:hover {
    background-color: var(--color-blue-50);
  }
  .i18n-selector__option--active {
    background-color: var(--color-blue-50);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .i18n-selector__option-code {
    width: calc(var(--spacing) * 5);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .i18n-selector__option-check {
    margin-left: auto;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-blue-600);
  }
}
@layer components {
  .listado-toolbar {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .listado-config {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .listado-config__label {
    margin-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .listado-tamano-pagina {
    width: auto;
  }
  .listado-columna-toggle {
    margin-inline-end: calc(var(--spacing) * 1);
  }
  .listado-paginacion {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .listado-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .listado-paginacion__nav {
    margin-bottom: calc(var(--spacing) * 0);
  }
}
@layer components {
  .evo-multiselect {
    position: relative;
    width: 100%;
  }
  .evo-multiselect__trigger {
    display: flex;
    height: calc(var(--spacing) * 9);
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2.5);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .evo-multiselect__trigger:hover {
    border-color: var(--color-gray-400);
  }
  .evo-multiselect__trigger:focus {
    border-color: var(--color-blue-500);
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
  }
  .evo-multiselect__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .evo-multiselect__text--placeholder {
    color: var(--color-gray-400);
  }
  .evo-multiselect__icon {
    margin-left: calc(var(--spacing) * 2);
    flex-shrink: 0;
    color: var(--color-gray-500);
    font-size: 0.6rem;
  }
  .evo-multiselect__dropdown {
    position: absolute;
    right: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    top: calc(100% + 2px);
    max-height: 260px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  .evo-multiselect__search {
    width: 100%;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 0px;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-outline-style: none;
    outline-style: none;
  }
  .evo-multiselect__search:focus {
    background-color: var(--color-gray-50);
  }
  .evo-multiselect__list {
    margin: calc(var(--spacing) * 0);
    flex: 1;
    list-style-type: none;
    overflow-y: auto;
    padding-block: calc(var(--spacing) * 1);
  }
  .evo-multiselect__group-header {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-bottom: calc(var(--spacing) * 0.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
    padding-top: 5px;
    font-size: 0.68rem;
  }
  .evo-multiselect__group-header[style*="cursor: pointer"]:hover {
    background-color: var(--color-slate-100);
  }
  .evo-multiselect__item {
    padding: calc(var(--spacing) * 0);
  }
  .evo-multiselect__item--disabled {
    pointer-events: none;
    opacity: 35%;
  }
  .evo-multiselect__label {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-700);
    -webkit-user-select: none;
    user-select: none;
  }
  .evo-multiselect__label:hover {
    background-color: var(--color-blue-50);
  }
  .evo-multiselect__checkbox {
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-blue-500);
    width: 14px;
    height: 14px;
  }
}
@layer components {
  .nimrod-tree-select {
    position: relative;
    width: 100%;
  }
  .nimrod-tree-select__dropdown {
    position: absolute;
    right: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    top: calc(100% + 2px);
    max-height: 320px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  .nimrod-tree-select__list {
    margin: calc(var(--spacing) * 0);
    flex: 1;
    list-style-type: none;
    overflow-y: auto;
    padding-block: calc(var(--spacing) * 1);
  }
  .nimrod-tree-select__sensor {
    padding: calc(var(--spacing) * 0);
  }
  .nimrod-tree-select__sensor-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-600);
    text-transform: uppercase;
    font-size: 0.68rem;
  }
  .nimrod-tree-select__chevron {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    color: var(--color-gray-500);
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 0.7rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .nimrod-tree-select__chevron:hover {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
  }
  .nimrod-tree-select__chevron:focus-visible {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  }
  .nimrod-tree-select__sensor-label {
    flex: 1;
  }
  .nimrod-tree-select__variables {
    margin: calc(var(--spacing) * 0);
    list-style-type: none;
    padding: calc(var(--spacing) * 0);
    padding-left: 14px;
  }
  .nimrod-tree-select__sensor--collapsed .nimrod-tree-select__variables {
    display: none;
  }
  .nimrod-tree-select__variable {
    padding: calc(var(--spacing) * 0);
  }
  .nimrod-tree-select__variable--disabled {
    pointer-events: none;
    opacity: 35%;
  }
  .nimrod-tree-select__variable-label {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-700);
    -webkit-user-select: none;
    user-select: none;
  }
  .nimrod-tree-select__variable-label:hover {
    background-color: var(--color-blue-50);
  }
  .nimrod-tree-select__checkbox {
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-blue-500);
    width: 14px;
    height: 14px;
  }
  .nimrod-tree-select__variable-text {
    flex: 1;
  }
  .nimrod-tree-select__trigger--flash {
    animation: nimrod-tree-flash 0.4s ease;
  }
  @keyframes nimrod-tree-flash {
    0% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
    }
    50% {
      box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
  }
}
@layer components {
  .loading-overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 100;
    display: flex;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .loading-overlay__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .loading-overlay__spinner {
    margin-bottom: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    animation: var(--animate-spin);
    color: var(--color-blue-600);
  }
  .loading-overlay__spinner-track {
    opacity: 0.25;
  }
  .loading-overlay__spinner-head {
    opacity: 0.75;
  }
  .loading-overlay__text {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
}
@layer components {
  .navegacion-listado-detalle {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .navegacion-listado-detalle__breadcrumb-nav {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .navegacion-listado-detalle__breadcrumb {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .navegacion-listado-detalle__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navegacion-listado-detalle__controles {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .navegacion-listado-detalle__posicion {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .navegacion-listado-detalle__btn-volver {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-500);
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-gray-300);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .navegacion-listado-detalle__btn-anterior, .navegacion-listado-detalle__btn-siguiente {
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-600);
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-300);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          background-color: transparent;
        }
      }
    }
  }
}
@layer components {
  .periodo-filter {
    margin-bottom: 0;
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    --periodo-filter-btn-size: 30px;
    --periodo-filter-btn-width: 38px;
  }
  .periodo-filter__row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .periodo-filter__btn {
    cursor: pointer;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    width: var(--periodo-filter-btn-width);
    min-width: var(--periodo-filter-btn-width);
    height: var(--periodo-filter-btn-size);
    text-align: center;
  }
  .periodo-filter__btn:hover {
    background-color: var(--color-gray-50);
  }
  .periodo-filter__btn--active {
    background-color: var(--module-color, #2563eb);
    color: #fff;
    border-color: var(--module-color, #2563eb);
  }
  .periodo-filter__btn--calendar {
    padding-inline: calc(var(--spacing) * 0);
    width: var(--periodo-filter-btn-width);
    justify-content: center;
  }
  .periodo-filter__custom-dates {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 200;
    margin-top: calc(var(--spacing) * 1);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 2.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    min-width: max-content;
  }
  .periodo-filter__custom-dates--hidden {
    display: none;
  }
  .periodo-filter__date-input {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .periodo-filter__date-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-500);
  }
  .periodo-filter__separator {
    color: #9ca3af;
  }
  .periodo-filter__apply-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
    border: 1px solid var(--module-color, #2563eb);
    color: #fff;
  }
  .periodo-filter__apply-btn:hover {
    filter: brightness(0.9);
  }
}
@layer components {
  .preferencias-usuario-panel__save-view {
    margin-top: calc(var(--spacing) * 2);
  }
  .preferencias-usuario-panel__restore {
    margin-top: calc(var(--spacing) * 3);
  }
  .preferencias-usuario-panel__empty-views {
    color: var(--color-gray-500);
  }
  .preferencias-usuario-panel--oculto {
    display: none;
  }
}
.app-profile-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  display: none;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.app-profile-modal__overlay--visible {
  display: flex;
  display: flex;
}
.app-profile-modal__container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  max-width: 672px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}
.app-profile-modal__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e9ef;
}
.app-profile-modal__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e2d3d;
  font-family: 'Space Grotesk', sans-serif;
  margin: 0;
}
.app-profile-modal__close {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #7b8a9a;
  font-size: 1rem;
  transition: all 0.15s;
}
.app-profile-modal__close:hover {
  background-color: #f3f5f8;
  color: #1e2d3d;
}
.app-profile-modal__section {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f2f5;
}
.app-profile-modal__section:last-child {
  border-bottom: none;
}
.app-profile-modal__section-title {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #7b8a9a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 16px;
}
.app-profile-modal__section-title i {
  font-size: 0.75rem;
  color: #00bcd4;
}
.app-profile-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.app-profile-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app-profile-modal__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #7b8a9a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app-profile-modal__value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e2d3d;
}
.app-profile-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
}
.app-profile-modal__badge i {
  font-size: 0.6875rem;
}
.app-profile-modal__badge--active {
  color: #16a34a;
  background-color: rgba(22, 163, 74, 0.1);
}
.app-profile-modal__badge--inactive {
  color: #ef5350;
  background-color: rgba(239, 83, 80, 0.1);
}
.app-profile-modal__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.app-profile-modal__role-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #3a4a5c;
  background-color: #f0f2f5;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #e5e9ef;
}
.app-profile-modal__role-badge i {
  font-size: 0.6875rem;
  color: #00bcd4;
}
.app-profile-modal__permissions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.app-profile-modal__permission-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-size: 0.8125rem;
  font-weight: 400;
  color: #3a4a5c;
  background-color: #fafbfc;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #f0f2f5;
}
.app-profile-modal__permission-badge i {
  font-size: 0.625rem;
  color: #16a34a;
}
@media (max-width: 640px) {
  .app-profile-modal__container {
    width: 95vw;
    max-height: 90vh;
  }
  .app-profile-modal__grid {
    grid-template-columns: 1fr;
  }
  .app-profile-modal__permissions {
    grid-template-columns: 1fr;
  }
  .app-profile-modal__header {
    padding: 16px 20px;
  }
  .app-profile-modal__section {
    padding: 16px 20px;
  }
}
.app-profile-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
@layer components {
  .sidebar__nav {
    display: flex;
    flex-direction: column;
  }
}
@layer components {
  .sort-th__link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
  }
  .sort-th__link:hover {
    color: var(--color-gray-700, #374151);
  }
  .sort-th__icon {
    margin-left: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .sort-th__icon--inactive {
    margin-left: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    opacity: 0%;
  }
  .sort-th__link:hover .sort-th__icon--inactive {
    opacity: 0.5;
  }
}
@layer components {
  .flash-msg--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-400);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-700);
  }
  .flash-msg--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-400);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-700);
  }
  .flash-msg--warning {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-400);
    background-color: var(--color-yellow-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-yellow-700);
  }
  .flash-msg--info {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-400);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-blue-700);
  }
  .flash-msg__content {
    display: flex;
    align-items: center;
  }
  .flash-msg__icon {
    margin-right: calc(var(--spacing) * 2);
  }
}
.app-footer {
  margin-top: calc(var(--spacing) * 8);
  background-color: #003d82;
  font-family: 'Space Grotesk', sans-serif;
}
.app-footer__inner {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
  padding-block: calc(var(--spacing) * 3);
}
.app-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
}
.app-footer__brand {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.app-footer__logo {
  height: calc(var(--spacing) * 8);
  width: calc(var(--spacing) * 8);
  color: var(--color-white);
}
.app-footer__brand-name {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}
.app-footer__brand-desc {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-300);
}
.app-footer__meta {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-300);
}
.app-header {
  position: fixed;
  top: calc(var(--spacing) * 0);
  right: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  display: flex;
  align-items: center;
  height: 48px;
  background-color: #f7f8fa;
  border-bottom: 1px solid #e5e9ef;
  z-index: 1300;
}
.app-header__brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  width: 220px;
  padding: 0 20px;
  transition: width 0.2s ease;
}
body.sidebar-collapsed .app-header__brand {
  width: 56px;
  justify-content: center;
  padding: 0;
}
body.sidebar-collapsed .app-header__logo {
  display: none;
}
.app-header__logo {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e2d3d;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.08em;
}
.app-header__vertical {
  display: flex;
  flex: 1;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  padding-left: 20px;
  font-size: 0.875rem;
}
.app-header__vertical-prefix {
  font-style: italic;
  font-weight: 500;
  color: #8a9bab;
  font-family: 'Space Grotesk', sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.app-header__vertical-prefix:hover {
  color: #3a4a5c;
}
.app-header__vertical-sep {
  color: #c5cdd5;
  margin: 0 2px;
}
.app-header__vertical-name {
  color: #3a4a5c;
  font-weight: 400;
}
.app-header__user {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-right: 20px;
}
.app-header__user-trigger {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: 0.875rem;
  font-weight: 600;
  color: #3a4a5c;
  background: none;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background-color 0.15s;
}
.app-header__user-trigger:hover {
  background-color: #f3f5f8;
  color: #1e2d3d;
}
.app-header__user-trigger .fa-caret-down {
  color: #00bcd4;
  font-size: 0.6rem;
}
.app-header__user-dropdown {
  position: relative;
}
.app-header__user-menu {
  position: absolute;
  right: calc(var(--spacing) * 0);
  display: none;
  top: calc(100% + 4px);
  min-width: 180px;
  background-color: #ffffff;
  border: 1px solid #e5e9ef;
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 60;
}
.app-header__user-dropdown:hover .app-header__user-menu, .app-header__user-dropdown:focus-within .app-header__user-menu {
  display: block;
}
.app-header__menu-icon {
  width: 16px;
  margin-right: 8px;
  opacity: 0.5;
}
.app-header__user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 400;
  color: #3a4a5c;
  transition: background-color 0.15s;
}
.app-header__user-menu-item:hover {
  background-color: #f3f5f8;
  color: #1e2d3d;
}
.app-header__user-menu-item--active {
  color: #00bcd4;
  font-weight: 600;
}
.app-header__user-menu-item--danger:hover {
  color: #ef5350;
}
.app-header__user-menu-divider {
  border-top: 1px solid #e5e9ef;
  margin: 4px 0;
}
.app-header__lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 12px;
}
.app-header__lang-btn {
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #7b8a9a;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s;
}
.app-header__lang-btn:hover {
  color: #3a4a5c;
  background-color: #eef0f4;
}
.app-header__lang-btn--active {
  color: #00bcd4;
  font-weight: 600;
  background-color: rgba(0, 188, 212, 0.08);
}
.app-header__locale-dropdown {
  position: relative;
}
.app-header__locale-trigger {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3a4a5c;
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background-color 0.15s;
}
.app-header__locale-trigger:hover {
  background-color: #f3f5f8;
  color: #1e2d3d;
}
.app-header__locale-trigger .fa-globe {
  color: #7b8a9a;
  font-size: 0.875rem;
}
.app-header__locale-trigger .fa-caret-down {
  color: #00bcd4;
  font-size: 0.6rem;
}
.app-header__locale-menu {
  position: absolute;
  right: calc(var(--spacing) * 0);
  display: none;
  top: calc(100% + 4px);
  min-width: 80px;
  background-color: #ffffff;
  border: 1px solid #e5e9ef;
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 60;
}
.app-header__locale-dropdown:hover .app-header__locale-menu, .app-header__locale-dropdown:focus-within .app-header__locale-menu {
  display: block;
}
.app-header__locale-menu-item {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #3a4a5c;
  text-decoration: none;
  transition: background-color 0.15s;
}
.app-header__locale-menu-item:hover {
  background-color: #f3f5f8;
  color: #1e2d3d;
}
.app-header__locale-menu-item--active {
  color: #00bcd4;
  font-weight: 600;
  background-color: rgba(0, 188, 212, 0.08);
}
.app-header__settings-dropdown {
  position: relative;
}
.app-header__settings-btn {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #7b8a9a;
  font-size: 0.9375rem;
  transition: all 0.15s;
}
.app-header__settings-btn:hover {
  background-color: #f3f5f8;
  color: #3a4a5c;
}
.app-header__settings-menu {
  position: absolute;
  right: calc(var(--spacing) * 0);
  display: none;
  top: calc(100% + 4px);
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #e5e9ef;
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 60;
}
.app-header__settings-dropdown:hover .app-header__settings-menu, .app-header__settings-dropdown:focus-within .app-header__settings-menu {
  display: block;
}
.app-header__settings-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  text-align: left;
  padding: 7px 14px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #3a4a5c;
  text-decoration: none;
  transition: background-color 0.15s;
}
.app-header__settings-menu-item i {
  width: 16px;
  text-align: center;
  font-size: 0.75rem;
  color: #7b8a9a;
}
.app-header__settings-menu-item:hover {
  background-color: #f3f5f8;
  color: #1e2d3d;
}
.app-header__settings-menu-item:hover i {
  color: #3a4a5c;
}
.app-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  min-width: 0;
  overflow: hidden;
}
.app-header__breadcrumb-sep {
  color: #c5cdd5;
  flex-shrink: 0;
}
.app-header__breadcrumb-link {
  color: #7b8a9a;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}
.app-header__breadcrumb-link:hover {
  color: #3a4a5c;
}
.app-header__breadcrumb-current {
  color: #3a4a5c;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@layer components {
  .app-sidebar {
    position: fixed;
    left: calc(var(--spacing) * 0);
    overflow-y: auto;
    --sidebar-active-color: #00bcd4;
    --sidebar-active-bg: rgba(0, 188, 212, 0.04);
    top: 48px;
    width: 220px;
    height: calc(100vh - 48px);
    background-color: #f7f8fa;
    border-right: 1px solid #e5e9ef;
    display: flex;
    flex-direction: column;
    z-index: 1200;
  }
  .app-sidebar__nav {
    flex: 1;
    padding: 14px 0 0;
  }
  .app-sidebar__link {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    padding: 13px 22px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #3a4a5c;
    border-left: 3px solid transparent;
    text-decoration: none;
    line-height: 1.3;
  }
  .app-sidebar__link:hover {
    color: #1e2d3d;
    background-color: #f3f5f8;
  }
  .app-sidebar__link--active, .app-sidebar__link--active:hover {
    border-left-color: var(--sidebar-active-color);
    color: var(--sidebar-active-color);
    font-weight: 600;
    background-color: var(--sidebar-active-bg);
  }
  .app-sidebar__link--active .app-sidebar__icon {
    color: var(--sidebar-active-color);
  }
  .app-sidebar__link--disabled {
    display: flex;
    cursor: default;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 13px 22px;
    font-size: 0.9375rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    color: #b0bcc8;
  }
  .app-sidebar__link--disabled .app-sidebar__icon {
    color: #b0bcc8;
  }
  .app-sidebar__link--mod-dashboard, .app-sidebar__flyout-link--mod-dashboard {
    --sidebar-active-color: #0066cc;
    --sidebar-active-bg: rgba(0, 102, 204, 0.04);
  }
  .app-sidebar__link--mod-alertas, .app-sidebar__flyout-link--mod-alertas {
    --sidebar-active-color: #e53e3e;
    --sidebar-active-bg: rgba(229, 62, 62, 0.04);
  }
  .app-sidebar__link--mod-eventos, .app-sidebar__flyout-link--mod-eventos {
    --sidebar-active-color: #00bcd4;
    --sidebar-active-bg: rgba(0, 188, 212, 0.04);
  }
  .app-sidebar__link--mod-agentes, .app-sidebar__flyout-link--mod-agentes, .app-sidebar__toggle--mod-agentes {
    --sidebar-active-color: #f97316;
    --sidebar-active-bg: rgba(249, 115, 22, 0.04);
  }
  .app-sidebar__link--mod-telemetria, .app-sidebar__flyout-link--mod-telemetria {
    --sidebar-active-color: #1e40af;
    --sidebar-active-bg: rgba(30, 64, 175, 0.04);
  }
  .app-sidebar__link--mod-evolucion, .app-sidebar__flyout-link--mod-evolucion {
    --sidebar-active-color: #7c3aed;
    --sidebar-active-bg: rgba(124, 58, 237, 0.04);
  }
  .app-sidebar__link--mod-mapa, .app-sidebar__flyout-link--mod-mapa {
    --sidebar-active-color: #d946ef;
    --sidebar-active-bg: rgba(217, 70, 239, 0.04);
  }
  .app-sidebar__link--mod-organizacion, .app-sidebar__flyout-link--mod-organizacion {
    --sidebar-active-color: #16a34a;
    --sidebar-active-bg: rgba(22, 163, 74, 0.04);
  }
  .app-sidebar__link--mod-destinatarios, .app-sidebar__flyout-link--mod-destinatarios {
    --sidebar-active-color: #1d4ed8;
    --sidebar-active-bg: rgba(29, 78, 216, 0.04);
  }
  .app-sidebar__link--mod-conectividad, .app-sidebar__flyout-link--mod-conectividad {
    --sidebar-active-color: #0d9488;
    --sidebar-active-bg: rgba(13, 148, 136, 0.04);
  }
  .app-sidebar__link--mod-informes, .app-sidebar__flyout-link--mod-informes {
    --sidebar-active-color: #b45309;
    --sidebar-active-bg: rgba(180, 83, 9, 0.04);
  }
  .app-sidebar__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    padding: 13px 22px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #3a4a5c;
    border-left: 3px solid transparent;
  }
  .app-sidebar__toggle:hover {
    color: #1e2d3d;
    background-color: #f3f5f8;
  }
  .app-sidebar__toggle--active, .app-sidebar__toggle--active:hover {
    border-left-color: var(--sidebar-active-color);
    color: var(--sidebar-active-color);
    font-weight: 600;
    background-color: var(--sidebar-active-bg);
  }
  .app-sidebar__toggle--active .app-sidebar__icon, .app-sidebar__toggle--active .app-sidebar__toggle-icon {
    color: var(--sidebar-active-color);
  }
  .app-sidebar__toggle-label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .app-sidebar__toggle-icon {
    font-size: 0.5625rem;
    color: #a0aab4;
    transition: transform 0.2s;
  }
  .app-sidebar__links .app-sidebar__link {
    padding-left: 52px;
    font-size: 0.875rem;
    font-weight: 400;
  }
  .app-sidebar__icon {
    width: 20px;
    text-align: center;
    font-size: 1.0625rem;
    color: #3a4a5c;
    flex-shrink: 0;
  }
  .app-sidebar__link:hover .app-sidebar__icon {
    color: #1e2d3d;
  }
  .app-sidebar__footer {
    border-top: 1px solid #e5e9ef;
    padding: 8px 0 12px;
    flex-shrink: 0;
    background-color: #eef0f4;
  }
  .app-sidebar__user-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 10px 22px;
    color: #3a4a5c;
    font-size: 0.9375rem;
    font-weight: 500;
  }
  .app-sidebar__user-avatar {
    font-size: 1.25rem;
    color: #7b8a9a;
  }
  .app-sidebar__version {
    padding: 2px 22px 0;
    font-size: 0.625rem;
    color: #7b8a9a;
    font-family: 'Roboto Mono', monospace;
    letter-spacing: 0.05em;
  }
  .app-sidebar {
    transition: width 0.2s ease;
  }
  .app-sidebar--collapsed {
    width: 56px;
    overflow: visible;
  }
  .app-sidebar--collapsed .app-sidebar__link > span, .app-sidebar--collapsed .app-sidebar__toggle-label > span:not(.app-sidebar__icon), .app-sidebar--collapsed .app-sidebar__link--disabled > span, .app-sidebar--collapsed .app-sidebar__version, .app-sidebar--collapsed .app-sidebar__user-info > span {
    display: none;
  }
  .app-sidebar--collapsed .app-sidebar__toggle-icon, .app-sidebar--collapsed .sidebar-toggle .fa-chevron-down, body.sidebar-collapsed .app-sidebar .app-sidebar__toggle-icon, body.sidebar-collapsed .app-sidebar .sidebar-toggle .fa-chevron-down {
    display: none !important;
  }
  .app-sidebar--collapsed .app-sidebar__link {
    justify-content: center;
    padding: 13px 0;
    border-left-width: 0;
  }
  .app-sidebar--collapsed .app-sidebar__link--active {
    border-bottom: 2px solid var(--sidebar-active-color);
    border-left-width: 0;
  }
  .app-sidebar--collapsed .app-sidebar__link--disabled {
    justify-content: center;
    padding: 13px 0;
    border-left-width: 0;
  }
  .app-sidebar--collapsed .app-sidebar__toggle {
    justify-content: center;
    padding: 13px 0;
    border-left-width: 0;
  }
  .app-sidebar--collapsed .app-sidebar__links {
    display: none;
  }
  .app-sidebar--collapsed .app-sidebar__footer {
    padding: 8px 0 12px;
  }
  .app-sidebar--collapsed .app-sidebar__user-info {
    justify-content: center;
    padding: 10px 0;
  }
  .app-sidebar__item {
    position: relative;
  }
  .app-sidebar__tooltip {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 6px;
    padding: 6px 12px;
    background-color: #1e2d3d;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  .app-sidebar__tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1e2d3d;
  }
  .app-sidebar--collapsed .app-sidebar__item:hover .app-sidebar__tooltip {
    display: block;
  }
  .app-sidebar__section {
    position: relative;
  }
  .app-sidebar__flyout {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 6px;
    background-color: #ffffff;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    padding: 4px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 100;
    white-space: nowrap;
  }
  .app-sidebar__flyout::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 14px;
    border: 5px solid transparent;
    border-right-color: #e5e9ef;
  }
  .app-sidebar__flyout::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 14px;
    border: 5px solid transparent;
    border-right-color: #ffffff;
    margin-right: -1px;
  }
  .app-sidebar__flyout-title {
    padding: 6px 14px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #7b8a9a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .app-sidebar__flyout-links {
    display: flex;
    flex-direction: row;
    gap: 0;
  }
  .app-sidebar__flyout-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #3a4a5c;
    text-decoration: none;
    transition: background-color 0.15s;
  }
  .app-sidebar__flyout-link:hover {
    background-color: #f3f5f8;
    color: #1e2d3d;
  }
  .app-sidebar__flyout-link--active {
    color: var(--sidebar-active-color);
    font-weight: 600;
  }
  .app-sidebar__flyout-link i {
    width: 16px;
    text-align: center;
    font-size: 0.75rem;
    color: #7b8a9a;
  }
  .app-sidebar__flyout-link:hover i {
    color: #3a4a5c;
  }
  .app-sidebar__flyout-link--active i {
    color: var(--sidebar-active-color);
  }
  .app-sidebar--collapsed .app-sidebar__section:hover .app-sidebar__flyout {
    display: block;
  }
}
@layer components {
  .agent-history {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .agent-history__header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .agent-history__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .agent-history__menu-btn {
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .agent-history__menu-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .agent-history__items {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .agent-history__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-block: calc(var(--spacing) * 3);
  }
  .agent-history__item--last {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: calc(var(--spacing) * 3);
  }
  .agent-history__item-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .agent-history__item-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
}
@layer components {
  .agent-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .agent-list__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
  }
  .agent-list__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .agent-list__btn-new {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .agent-list__btn-new-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .agent-list__empty-icon {
    margin-inline: auto;
  }
  .agent-list__btn-new--disabled {
    pointer-events: none;
    opacity: 50%;
  }
  .agent-list__btn-view--disabled {
    pointer-events: none;
    opacity: 50%;
  }
  .agent-list__btn-edit--disabled {
    pointer-events: none;
    opacity: 50%;
  }
}
@layer components {
  .agent-detail {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .agent-detail__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
  }
  .agent-detail__actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .agent-detail__card {
    margin-bottom: calc(var(--spacing) * 6);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .agent-detail__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .agent-detail__card-name {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .agent-detail__card-body {
    padding: calc(var(--spacing) * 6);
  }
  .agent-detail__fields {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
  }
  .agent-detail__icon-svg {
    margin-right: calc(var(--spacing) * 2);
    display: inline;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .agent-detail__btn-icon {
    margin-right: calc(var(--spacing) * 2);
    display: inline;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .agent-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .agent-detail__btn--disabled {
    pointer-events: none;
    opacity: 50%;
  }
  .agent-detail__btn-secondary {
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    background-color: var(--color-gray-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-gray-400);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .agent-detail__btn-primary {
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-400);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .agent-detail__btn-warning {
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    background-color: var(--color-yellow-500);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-600);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-yellow-300);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .agent-detail__btn-danger {
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-red-400);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
}
@layer components {
  .template-apply {
    padding: calc(var(--spacing) * 8);
  }
  .template-apply__panel {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .template-apply__panel-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .template-apply__panel-body {
    padding: calc(var(--spacing) * 6);
  }
  .template-apply__alert--warning {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-amber-200);
    background-color: var(--color-amber-50);
    padding: calc(var(--spacing) * 4);
    color: var(--color-amber-800);
  }
  .template-apply__alert--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding: calc(var(--spacing) * 4);
    color: var(--color-red-800);
  }
  .template-apply__field {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .template-apply__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .template-apply__preview {
    margin-top: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .template-apply__preview-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .template-apply__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .template-apply__panel-title {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .template-apply__actions {
    display: flex;
    justify-content: space-between;
  }
  .template-apply__panel--info {
    margin-top: calc(var(--spacing) * 6);
  }
  .template-apply__info-col {
    margin-bottom: calc(var(--spacing) * 3);
    width: calc(1/2 * 100%);
  }
  .template-apply__info-card {
    height: 100%;
  }
  .template-apply__card-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .template-apply__card-description {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .template-apply__row {
    margin-inline: calc(var(--spacing) * -3);
    display: flex;
    flex-wrap: wrap;
  }
  .template-apply__table-wrapper {
    overflow-x: auto;
  }
  .template-apply__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .template-apply__table-head {
    background-color: var(--color-gray-50);
  }
  .template-apply__btn--cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .template-apply__btn--submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .template-apply__checkbox {
    margin-right: calc(var(--spacing) * 2);
  }
  .template-apply__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
}
@layer components {
  .assign-stations {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .assign-stations__row {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    flex-wrap: wrap;
  }
  .assign-stations__col-full {
    width: 100%;
  }
  .assign-stations__col-half {
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      width: calc(1/2 * 100%);
    }
  }
  .assign-stations__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .assign-stations__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .assign-stations__card-body {
    padding: calc(var(--spacing) * 6);
  }
  .assign-stations__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .assign-stations__section-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .assign-stations__header-title {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .assign-stations__btn--secondary {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .assign-stations__btn--select {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-300);
    background-color: var(--color-blue-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-100);
      }
    }
  }
  .assign-stations__btn--cancel {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .assign-stations__btn--submit {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .assign-stations__alert--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding: calc(var(--spacing) * 4);
    color: var(--color-red-800);
  }
  .assign-stations__alert--warning {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-200);
    background-color: var(--color-yellow-50);
    padding: calc(var(--spacing) * 4);
    color: var(--color-yellow-800);
  }
  .assign-stations__alert-dismiss {
    position: relative;
    padding-right: calc(var(--spacing) * 8);
  }
  .assign-stations__alert-close {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    opacity: 50%;
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .assign-stations__stats {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    flex-wrap: wrap;
  }
  .assign-stations__stat-col {
    width: 100%;
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    @media (width >= 48rem) {
      width: calc(1/3 * 100%);
    }
  }
  .assign-stations__stat-value {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-blue-700);
  }
  .assign-stations__table-wrapper {
    max-height: calc(var(--spacing) * 96);
    overflow-x: auto;
  }
  .assign-stations__table {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .assign-stations__thead {
    background-color: var(--color-gray-50);
  }
  .assign-stations__badge--float {
    float: right;
  }
  .assign-stations__search-wrapper {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .assign-stations__search-input {
    width: 100%;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .assign-stations__select-actions {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .assign-stations__list {
    max-height: calc(var(--spacing) * 96);
    overflow-y: auto;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
  }
  .assign-stations__item {
    cursor: pointer;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .assign-stations__item--selected {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-left-color: var(--color-blue-500);
    background-color: var(--color-blue-50);
  }
  .assign-stations__form-check {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
  }
  .assign-stations__checkbox-input {
    margin-top: calc(var(--spacing) * 1);
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .assign-stations__checkbox-label {
    width: 100%;
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .assign-stations__counter {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .assign-stations__actions {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    justify-content: space-between;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 3);
  }
}
@layer components {
  .credentials-form {
    padding: calc(var(--spacing) * 8);
  }
  .credentials-form__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .credentials-form__breadcrumb-muted {
    color: var(--color-gray-600);
  }
  .credentials-form__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .credentials-form__container {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 4);
    max-width: var(--container-4xl);
  }
  .credentials-form__row {
    display: flex;
    justify-content: center;
  }
  .credentials-form__col {
    width: calc(2/3 * 100%);
  }
  .credentials-form__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .credentials-form__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    background-color: var(--color-yellow-400);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    color: var(--color-gray-900);
  }
  .credentials-form__card-title {
    margin-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .credentials-form__card-body {
    padding: calc(var(--spacing) * 6);
  }
  .credentials-form__alert-info {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 4);
    color: var(--color-blue-800);
  }
  .credentials-form__method-group {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .credentials-form__method-title {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
  }
  .credentials-form__method-selector {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .credentials-form__method-label {
    cursor: pointer;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .credentials-form__method-error {
    margin-top: calc(var(--spacing) * 1);
    color: var(--color-red-600);
  }
  .credentials-form__section-card {
    margin-bottom: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
  }
  .credentials-form__section-body {
    padding: calc(var(--spacing) * 4);
  }
  .credentials-form__section-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .credentials-form__field-group {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .credentials-form__feedback-visible {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-600);
  }
  .credentials-form__actions {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    justify-content: space-between;
  }
  .credentials-form__btn--secondary {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .credentials-form__btn--submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-yellow-500);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-600);
      }
    }
  }
  .credentials-form__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .credentials-form__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
}
@layer components {
  .agent-params {
    padding: calc(var(--spacing) * 8);
  }
  .agent-params__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .agent-params__breadcrumb-parent {
    color: var(--color-gray-600);
  }
  .agent-params__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .agent-params__container {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 4);
    max-width: var(--container-7xl);
  }
  .agent-params__row {
    margin-inline: calc(var(--spacing) * -3);
    display: flex;
    flex-wrap: wrap;
  }
  .agent-params__col {
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      margin-inline: auto;
    }
    @media (width >= 48rem) {
      width: calc(2/3 * 100%);
    }
  }
  .agent-params__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .agent-params__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .agent-params__card-title {
    margin-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .agent-params__card-body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 6);
  }
  .agent-params__flash {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .agent-params__flash--success {
    border-color: var(--color-green-300);
    background-color: var(--color-green-50);
    color: var(--color-green-800);
  }
  .agent-params__flash--danger {
    border-color: var(--color-red-300);
    background-color: var(--color-red-50);
    color: var(--color-red-800);
  }
  .agent-params__flash-close {
    margin-left: calc(var(--spacing) * 4);
    color: currentcolor;
    opacity: 60%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .agent-params__field-group {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .agent-params__field-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .agent-params__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .agent-params__input--invalid {
    border-color: var(--color-red-500);
    &:focus {
      border-color: var(--color-red-500);
    }
    &:focus {
      --tw-ring-color: var(--color-red-500);
    }
  }
  .agent-params__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .agent-params__select--invalid {
    border-color: var(--color-red-500);
    &:focus {
      border-color: var(--color-red-500);
    }
    &:focus {
      --tw-ring-color: var(--color-red-500);
    }
  }
  .agent-params__field-hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .agent-params__field-error {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red-600);
  }
  .agent-params__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: calc(var(--spacing) * 4);
  }
  .agent-params__cancel-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .agent-params__submit-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
}
@layer components {
  .agent-location__wrapper {
    padding: calc(var(--spacing) * 8);
  }
  .agent-location__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    color: var(--color-gray-600);
  }
  .agent-location__breadcrumb-parent {
    color: var(--color-gray-600);
  }
  .agent-location__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .agent-location__container {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 4);
    max-width: var(--container-7xl);
  }
  .agent-location__row {
    margin-inline: calc(var(--spacing) * -3);
    display: flex;
    flex-wrap: wrap;
  }
  .agent-location__col {
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      margin-inline: auto;
    }
    @media (width >= 48rem) {
      width: calc(5/6 * 100%);
    }
  }
  .agent-location__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .agent-location__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .agent-location__card-title {
    margin-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .agent-location__card-body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 6);
  }
  .agent-location__flash {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .agent-location__flash--success {
    border-color: var(--color-green-300);
    background-color: var(--color-green-50);
    color: var(--color-green-800);
  }
  .agent-location__flash--danger {
    border-color: var(--color-red-300);
    background-color: var(--color-red-50);
    color: var(--color-red-800);
  }
  .agent-location__flash-close {
    margin-left: calc(var(--spacing) * 4);
    color: currentcolor;
    opacity: 60%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .agent-location__layout {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .agent-location__col-map {
    width: 100%;
    @media (width >= 48rem) {
      width: calc(7/12 * 100%);
    }
  }
  .agent-location__col-form {
    width: 100%;
    @media (width >= 48rem) {
      width: calc(5/12 * 100%);
    }
  }
  .agent-location__map-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
  }
  .agent-location__map-hint {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .agent-location__coords-display {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .agent-location__field-group {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .agent-location__field-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .agent-location__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .agent-location__input--invalid {
    border-color: var(--color-red-500);
    &:focus {
      border-color: var(--color-red-500);
    }
    &:focus {
      --tw-ring-color: var(--color-red-500);
    }
  }
  .agent-location__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .agent-location__select--invalid {
    border-color: var(--color-red-500);
    &:focus {
      border-color: var(--color-red-500);
    }
    &:focus {
      --tw-ring-color: var(--color-red-500);
    }
  }
  .agent-location__field-hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .agent-location__field-error {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red-600);
  }
  .agent-location__optional-hint {
    color: var(--color-gray-500);
  }
  .agent-location__actions {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: calc(var(--spacing) * 4);
  }
  .agent-location__btn-cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .agent-location__btn-submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
}
@layer components {
  .agent-info {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .agent-info__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .agent-info__row {
    margin-inline: calc(var(--spacing) * -3);
    display: flex;
    flex-wrap: wrap;
  }
  .agent-info__col {
    width: 100%;
  }
  .agent-info__card {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .agent-info__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .agent-info__col-wide {
    min-width: calc(var(--spacing) * 62.5);
    flex: 1;
  }
  .agent-info__col-narrow {
    min-width: calc(var(--spacing) * 50);
    flex: 1;
  }
  .agent-info__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .agent-info__empty-text {
    margin-bottom: calc(var(--spacing) * 0);
    color: var(--color-gray-500);
  }
  .agent-info__metric-subtext {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .agent-info__badge--blue {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .agent-info__badge--yellow {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-yellow-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-yellow-800);
  }
  .agent-info__badge--green {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .agent-info__table-wrapper {
    overflow-x: auto;
  }
  .agent-info__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .agent-info__btn--back {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .agent-info__btn--detail {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .agent-info__status-icon {
    color: var(--color-white);
  }
  .agent-info__temp-badge {
    border-radius: 0.25rem;
    padding: calc(var(--spacing) * 2);
    color: var(--color-white);
  }
  .agent-info__type-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-blue-700);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-white);
  }
  .agent-info__type-title {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .agent-info__card-body {
    padding: calc(var(--spacing) * 4);
  }
  .agent-info__description-block {
    margin-top: calc(var(--spacing) * 3);
  }
  .agent-info__section-title {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .agent-info__status-indicator {
    margin-bottom: calc(var(--spacing) * 3);
    width: calc(1/3 * 100%);
    text-align: center;
  }
  .agent-info__status-circle {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    padding: calc(var(--spacing) * 3);
  }
  .agent-info__status-label {
    margin-top: calc(var(--spacing) * 2);
  }
  .agent-info__metric-col {
    margin-bottom: calc(var(--spacing) * 3);
    width: calc(1/4 * 100%);
    text-align: center;
  }
  .agent-info__dt {
    width: calc(1/3 * 100%);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .agent-info__dd {
    width: calc(2/3 * 100%);
  }
  .agent-info__dt--wide {
    width: calc(5/12 * 100%);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .agent-info__dd--narrow {
    width: calc(7/12 * 100%);
  }
  .agent-info__dt--half {
    width: calc(1/2 * 100%);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .agent-info__dd--half {
    width: calc(1/2 * 100%);
  }
  .agent-info__progress {
    width: 100%;
    overflow: hidden;
    border-radius: 0.25rem;
    background-color: var(--color-gray-200);
    height: 20px;
  }
  .agent-info__progress--tall {
    height: 25px;
  }
  .agent-info__progress-bar {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
  }
  .agent-info__progress-bar--dynamic {
    transition: width 0.5s ease-in-out;
  }
  .agent-info__progress-bar--success {
    background-color: var(--color-green-500);
  }
  .agent-info__progress-bar--warning {
    background-color: var(--color-yellow-500);
  }
  .agent-info__progress-bar--danger {
    background-color: var(--color-red-500);
  }
  .agent-info__progress-bar--calidad-senal {
    width: var(--calidad-senal, 0%);
  }
  .agent-info__progress-bar--cpu {
    width: var(--cpu-porcentaje, 0%);
  }
  .agent-info__progress-bar--memoria {
    width: var(--memoria-porcentaje, 0%);
  }
  .agent-info__progress-bar--disco {
    width: var(--disco-porcentaje, 0%);
  }
  .agent-info__actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .agent-info__firmware-hint--outdated {
    color: var(--color-yellow-600);
  }
  .agent-info__firmware-hint--uptodate {
    color: var(--color-green-600);
  }
  .agent-info__station-badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .agent-info__station-badge--ok {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .agent-info__station-badge--warn {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
}
@layer components {
  .camera-create {
    padding: calc(var(--spacing) * 8);
  }
  .camera-create__breadcrumb-context {
    color: var(--color-gray-600);
  }
  .camera-create__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .camera-create__btn-cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .camera-create__btn-submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .camera-create__field-group {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .camera-create__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
  }
}
@layer components {
  .camera-list {
    padding: calc(var(--spacing) * 8);
  }
  .camera-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .camera-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .camera-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .camera-list__header-text {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .camera-list__subtitle {
    color: var(--color-gray-600);
  }
  .camera-list__add-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .camera-list__add-btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .camera-list__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-700);
  }
  .camera-list__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-700);
  }
  .camera-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .camera-list__count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .camera-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .camera-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .camera-list__thead {
    background-color: var(--color-gray-50);
  }
  .camera-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .camera-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .camera-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .camera-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .camera-list__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .camera-list__td--code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .camera-list__td--status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .camera-list__td--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .camera-list__badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .camera-list__badge--active {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .camera-list__badge--inactive {
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
  }
  .camera-list__badge--ok {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .camera-list__badge--error {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .camera-list__badge--unknown {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .camera-list__actions {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .camera-list__form-inline {
    display: inline;
  }
  .camera-list__deactivate-btn {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .camera-list__deactivate-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .camera-list__empty-td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .camera-list__empty-icon {
    margin-inline: auto;
  }
  .camera-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .camera-list__page-link {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .camera-list__page-link--active {
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .camera-list__page-link--inactive {
    background-color: var(--color-white);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
}
@layer components {
  .history-chart {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .history-chart__header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
  }
  .history-chart__title {
    margin: calc(var(--spacing) * 0);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .history-chart__title-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-gray-500);
  }
  .history-chart__body {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .history-chart__canvas-wrap {
    position: relative;
    width: 100%;
  }
  .history-chart__caption {
    margin-top: calc(var(--spacing) * 3);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
}
@layer components;
@layer components {
  .history-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .history-stats__card {
    border-radius: var(--radius-lg);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .history-stats__card--online {
    background-color: var(--color-green-600);
  }
  .history-stats__card--timeout {
    background-color: var(--color-yellow-500);
    color: var(--color-gray-900);
  }
  .history-stats__card--offline {
    background-color: var(--color-red-600);
  }
  .history-stats__card--periods {
    background-color: var(--color-gray-800);
  }
  .history-stats__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 5);
    text-align: center;
  }
  .history-stats__value {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .history-stats__label {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    opacity: 90%;
  }
}
@layer components {
  .history-filters {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-left: 3px solid var(--module-color, #e5e7eb);
    background-color: var(--module-color-bg, white);
  }
  .history-filters__header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
  }
  .history-filters__title {
    margin: calc(var(--spacing) * 0);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .history-filters__title-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-gray-500);
  }
  .history-filters__body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .history-filters__form {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .history-filters__field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .history-filters__label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .history-filters__input {
    width: 100%;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .history-filters__submit-wrap {
    display: flex;
    align-items: flex-end;
  }
  .history-filters__submit-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .history-filters__submit-btn:hover {
    filter: brightness(0.9);
  }
  .history-filters__btn-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }
  .history-filters__quick-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .history-filters__range-btn {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
}
@layer components {
  .history-header {
    margin-bottom: calc(var(--spacing) * 0);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .history-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .history-header__title {
    margin: calc(var(--spacing) * 0);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .history-header__title-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
  }
  .history-header__availability-badge {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
}
@layer components {
  .history-offline {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .history-offline__header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
  }
  .history-offline__title {
    margin: calc(var(--spacing) * 0);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .history-offline__title-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-yellow-500);
  }
  .history-offline__body {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .history-offline__table-wrap {
    overflow-x: auto;
  }
  .history-offline__table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .history-offline__thead {
    background-color: var(--color-gray-800);
    color: var(--color-white);
  }
  .history-offline__th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }
  .history-offline__tr {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .history-offline__tr--active {
    background-color: var(--color-red-50);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-100);
      }
    }
  }
  .history-offline__td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-gray-700);
  }
  .history-offline__badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .history-offline__badge--danger {
    background-color: var(--color-red-600);
    color: var(--color-white);
  }
  .history-offline__badge--secondary {
    background-color: var(--color-gray-400);
    color: var(--color-white);
  }
  .history-offline__empty {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-green-800);
  }
  .history-offline__empty-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    color: var(--color-green-600);
  }
}
@layer components {
  .conn-alerts__page {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .conn-alerts__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .conn-alerts__breadcrumb-text {
    color: var(--color-gray-900);
  }
  .conn-alerts__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .conn-alerts__subtitle {
    color: var(--color-gray-600);
  }
  .conn-alerts__badge--critical {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-red-800);
  }
  .conn-alerts__badge--ok {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .conn-alerts__kpis {
    margin-bottom: calc(var(--spacing) * 6);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .conn-alerts__kpi-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    text-align: center;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-alerts__kpi-value--active {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-red-600);
  }
  .conn-alerts__kpi-value--inactive {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-green-600);
  }
  .conn-alerts__kpi-value--neutral {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
  }
  .conn-alerts__kpi-value--total {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .conn-alerts__kpi-value--offline {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-blue-600);
  }
  .conn-alerts__kpi-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .conn-alerts__stats {
    margin-bottom: calc(var(--spacing) * 6);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .conn-alerts__stat-card--red {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-red-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-alerts__stat-card--yellow {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-yellow-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-alerts__stat-card--blue {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-blue-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-alerts__stat-card--gray {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-gray-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-alerts__stat-icon--red {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    color: var(--color-red-500);
  }
  .conn-alerts__stat-icon--yellow {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    color: var(--color-yellow-500);
  }
  .conn-alerts__stat-icon--blue {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    color: var(--color-blue-500);
  }
  .conn-alerts__stat-icon--gray {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    color: var(--color-gray-500);
  }
  .conn-alerts__stat-value {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .conn-alerts__stat-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .conn-alerts__results-count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .conn-alerts__results-count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .conn-alerts__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-alerts__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .conn-alerts__thead {
    background-color: var(--color-gray-50);
  }
  .conn-alerts__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .conn-alerts__th--center {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .conn-alerts__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .conn-alerts__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .conn-alerts__cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: center;
    white-space: nowrap;
  }
  .conn-alerts__cell--text {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .conn-alerts__cell--sensor {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    white-space: nowrap;
  }
  .conn-alerts__cell--message {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .conn-alerts__cell--date {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-500);
  }
  .conn-alerts__cell--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: center;
    white-space: nowrap;
  }
  .conn-alerts__status--active {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-red-800);
  }
  .conn-alerts__status--resolved {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .conn-alerts__type-badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
  }
  .conn-alerts__sensor-name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .conn-alerts__sensor-id {
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .conn-alerts__pending-badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-yellow-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-yellow-800);
  }
  .conn-alerts__action-link {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .conn-alerts__action-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .conn-alerts__empty-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .conn-alerts__footer-actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .conn-alerts__btn-back {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .conn-alerts__empty-icon {
    margin-inline: auto;
  }
}
@layer components {
  .notif-config {
    padding: calc(var(--spacing) * 8);
  }
  .notif-config__breadcrumb {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .notif-config__flash {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .notif-config__flash--success {
    border-color: var(--color-green-300);
    background-color: var(--color-green-50);
    color: var(--color-green-800);
  }
  .notif-config__flash--danger {
    border-color: var(--color-red-300);
    background-color: var(--color-red-50);
    color: var(--color-red-800);
  }
  .notif-config__flash--warning {
    border-color: var(--color-yellow-300);
    background-color: var(--color-yellow-50);
    color: var(--color-yellow-800);
  }
  .notif-config__flash--info {
    border-color: var(--color-blue-300);
    background-color: var(--color-blue-50);
    color: var(--color-blue-800);
  }
  .notif-config__flash-close {
    margin-left: calc(var(--spacing) * 4);
    color: currentcolor;
    opacity: 60%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .notif-config__flash-close-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .notif-config__header-card {
    margin-bottom: calc(var(--spacing) * 6);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .notif-config__header-card-title-bar {
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .notif-config__header-card-title {
    margin: calc(var(--spacing) * 0);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
  }
  .notif-config__header-card-body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .notif-config__header-desc {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .notif-config__layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .notif-config__form-col {
    width: 100%;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    @media (width >= 64rem) {
      max-width: 66%;
    }
  }
  .notif-config__help-col {
    width: 100%;
    flex-shrink: 0;
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 80);
    }
  }
  .notif-config__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .notif-config__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .notif-config__card-header--info {
    background-color: var(--color-sky-500);
  }
  .notif-config__card-header--info .notif-config__card-header-title {
    color: var(--color-white);
  }
  .notif-config__card-header-title {
    margin: calc(var(--spacing) * 0);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .notif-config__card-body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 6);
  }
  .notif-config__icon {
    display: inline-block;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }
  .notif-config__field-group {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .notif-config__field-label {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .notif-config__field-hint {
    margin-top: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .notif-config__input-row {
    display: flex;
    align-items: stretch;
  }
  .notif-config__input {
    flex: 1;
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .notif-config__input-addon {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-left-style: var(--tw-border-style);
    border-left-width: 0px;
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
    -webkit-user-select: none;
    user-select: none;
  }
  .notif-config__channels-grid {
    margin-top: calc(var(--spacing) * 1);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2);
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .notif-config__channel-item {
    display: flex;
  }
  .notif-config__check {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .notif-config__check-input {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    cursor: pointer;
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
  }
  .notif-config__channel-label {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    -webkit-user-select: none;
    user-select: none;
  }
  .notif-config__channel-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }
  .notif-config__switch-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .notif-config__switch-input {
    position: relative;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 10);
    cursor: pointer;
    appearance: none;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-300);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:checked {
      background-color: var(--color-blue-600);
    }
  }
  .notif-config__switch-label {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .notif-config__meta-panel {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .notif-config__meta-title {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .notif-config__meta-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 1.5);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .notif-config__meta-item {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .notif-config__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-100);
    padding-top: calc(var(--spacing) * 4);
  }
  .notif-config__btn-icon {
    display: inline-block;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }
  .notif-config__btn--back {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .notif-config__btn--submit {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .notif-config__help-subtitle {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .notif-config__help-subtitle--spaced {
    margin-top: calc(var(--spacing) * 4);
  }
  .notif-config__help-list {
    list-style-type: disc;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-left: calc(var(--spacing) * 4);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-600);
  }
  .notif-config__help-list--last {
    margin-bottom: calc(var(--spacing) * 0);
  }
}
@layer components {
  .conn-sensor-detail {
    padding: calc(var(--spacing) * 8);
  }
  .conn-sensor-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .conn-sensor-detail__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .conn-sensor-detail__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-sensor-detail__header-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .conn-sensor-detail__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .conn-sensor-detail__subtitle {
    margin-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .conn-sensor-detail__badge {
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .conn-sensor-detail__metrics-grid {
    margin-bottom: calc(var(--spacing) * 6);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .conn-sensor-detail__metric-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    text-align: center;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-sensor-detail__metric-label {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .conn-sensor-detail__metric-icon {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .conn-sensor-detail__status-icon {
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
  }
  .conn-sensor-detail__status-icon--online {
    color: var(--color-green-500);
  }
  .conn-sensor-detail__status-icon--timeout {
    color: var(--color-yellow-500);
  }
  .conn-sensor-detail__status-icon--offline {
    color: var(--color-red-500);
  }
  .conn-sensor-detail__status-icon--neutral {
    color: var(--color-gray-400);
  }
  .conn-sensor-detail__metric-value {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .conn-sensor-detail__metric-value--bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .conn-sensor-detail__metric-number {
    margin-block: calc(var(--spacing) * 2);
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .conn-sensor-detail__metric-number--ok {
    color: var(--color-green-600);
  }
  .conn-sensor-detail__metric-number--warning {
    color: var(--color-yellow-600);
  }
  .conn-sensor-detail__metric-number--danger {
    color: var(--color-red-600);
  }
  .conn-sensor-detail__metric-unit {
    margin-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .conn-sensor-detail__section {
    margin-bottom: calc(var(--spacing) * 6);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-sensor-detail__section-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .conn-sensor-detail__section-title {
    margin-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .conn-sensor-detail__section-body {
    padding: calc(var(--spacing) * 6);
  }
  .conn-sensor-detail__obs-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .conn-sensor-detail__obs-card {
    height: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding: calc(var(--spacing) * 4);
  }
  .conn-sensor-detail__obs-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .conn-sensor-detail__obs-value {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .conn-sensor-detail__obs-value--ok {
    color: var(--color-green-600);
  }
  .conn-sensor-detail__obs-value--danger {
    color: var(--color-red-600);
  }
  .conn-sensor-detail__obs-unit {
    margin-left: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-gray-400);
  }
  .conn-sensor-detail__obs-description {
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .conn-sensor-detail__actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-sensor-detail__btn--cancel {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .conn-sensor-detail__btn--outline {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .conn-sensor-detail__btn-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .conn-sensor-detail__text--muted {
    color: var(--color-gray-400);
  }
}
@layer components {
  .connectivity-history {
    padding: calc(var(--spacing) * 8);
  }
  .connectivity-history__breadcrumb {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .connectivity-history__breadcrumb-mid {
    color: var(--color-gray-600);
  }
  .connectivity-history__breadcrumb-current {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .connectivity-history__layout {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
  }
  .connectivity-history__actions {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .connectivity-history__btn-icon {
    display: inline-block;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    vertical-align: middle;
  }
  .connectivity-history__back-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .connectivity-history__export-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
}
@layer components {
  .conn-panel {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .conn-panel__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .conn-panel__breadcrumb-text--muted {
    color: var(--color-gray-600);
  }
  .conn-panel__breadcrumb-text--current {
    color: var(--color-gray-900);
  }
  .conn-panel__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .conn-panel__subtitle {
    color: var(--color-gray-600);
  }
  .conn-panel__refresh-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .conn-panel__refresh-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .conn-panel__stats-grid {
    margin-bottom: calc(var(--spacing) * 6);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .conn-panel__stat-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    text-align: center;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-panel__stat-value {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .conn-panel__stat-value--online {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-green-600);
  }
  .conn-panel__stat-value--timeout {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-yellow-600);
  }
  .conn-panel__stat-value--offline {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-red-600);
  }
  .conn-panel__stat-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .conn-panel__stat-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline-block;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .conn-panel__stat-icon--online {
    color: var(--color-green-500);
  }
  .conn-panel__stat-icon--timeout {
    color: var(--color-yellow-500);
  }
  .conn-panel__stat-icon--offline {
    color: var(--color-red-500);
  }
  .conn-panel__counter {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .conn-panel__counter-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .conn-panel__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .conn-panel__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .conn-panel__thead {
    background-color: var(--color-gray-50);
  }
  .conn-panel__th--left {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .conn-panel__th--center {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .conn-panel__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .conn-panel__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .conn-panel__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .conn-panel__cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .conn-panel__cell--center-status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .conn-panel__cell--gap {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .conn-panel__cell--gap-warning {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-yellow-600);
  }
  .conn-panel__cell--gap-danger {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-red-600);
  }
  .conn-panel__cell--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .conn-panel__status-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline-block;
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
  }
  .conn-panel__link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .conn-panel__text--muted {
    color: var(--color-gray-400);
  }
  .conn-panel__empty-state {
    padding-block: calc(var(--spacing) * 8);
  }
  .conn-panel__empty-state-icon {
    margin-inline: auto;
  }
  .conn-panel__legend {
    margin-top: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .conn-panel__legend-item {
    margin-left: calc(var(--spacing) * 3);
  }
  .conn-panel__legend-icon {
    display: inline-block;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .conn-panel__legend-icon--online {
    color: var(--color-green-500);
  }
  .conn-panel__legend-icon--timeout {
    color: var(--color-yellow-500);
  }
  .conn-panel__legend-icon--offline {
    color: var(--color-red-500);
  }
}
@layer components {
  .hw-config {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .hw-config__header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .hw-config__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .hw-config__title-icon {
    margin-right: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
  }
  .hw-config__actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .hw-config__btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .hw-config__btn-icon {
    margin-right: calc(var(--spacing) * 1);
  }
  .hw-config__table-wrapper {
    overflow-x: auto;
  }
  .hw-config__table {
    width: 100%;
  }
  .hw-config__row {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
  }
  .hw-config__cell-label {
    width: calc(var(--spacing) * 40);
    padding-block: calc(var(--spacing) * 2.5);
    padding-right: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .hw-config__cell-value {
    padding-block: calc(var(--spacing) * 2.5);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .hw-config__badge--yes {
    display: inline-flex;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .hw-config__badge--no {
    display: inline-flex;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-red-800);
  }
  .hw-config__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .hw-config__form-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .hw-config__form-field {
    display: flex;
    flex-direction: column;
  }
  .hw-config__form-field--full {
    @media (width >= 40rem) {
      grid-column: span 2 / span 2;
    }
  }
  .hw-config__form-label {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .hw-config__form-input {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .hw-config__form-checkbox {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .hw-config__form-actions {
    display: flex;
    gap: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 2);
  }
  .hw-config__btn--save {
    border-radius: var(--radius-md);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .hw-config__btn--cancel {
    border-radius: var(--radius-md);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .hw-config__viewer {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-900);
    padding: calc(var(--spacing) * 4);
  }
  .hw-config__code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: pre;
    color: var(--color-green-400);
  }
  .hw-config__empty {
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .hw-config__empty-icon {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
}
@layer components {
  .group-history__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: calc(var(--spacing) * 12);
    color: var(--color-gray-400);
  }
  .group-history__empty-icon {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .group-history__empty-text {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .group-history__wrapper {
    display: flow-root;
  }
  .group-history__list {
    margin-bottom: calc(var(--spacing) * -8);
  }
  .group-history__item {
    position: relative;
    padding-bottom: calc(var(--spacing) * 8);
  }
  .group-history__connector {
    position: absolute;
    top: calc(var(--spacing) * 4);
    left: calc(var(--spacing) * 4);
    margin-left: -1px;
    height: 100%;
    width: calc(var(--spacing) * 0.5);
    background-color: var(--color-gray-200);
  }
  .group-history__event {
    position: relative;
    display: flex;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .group-history__icon--initial {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-white);
  }
  .group-history__icon--change {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-white);
  }
  .group-history__icon-fa {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
  }
  .group-history__content {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    padding-top: calc(var(--spacing) * 1.5);
  }
  .group-history__content-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .group-history__text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .group-history__group--new {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-700);
  }
  .group-history__group--old {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .group-history__group--target {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-700);
  }
  .group-history__reason {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .group-history__reason-icon {
    margin-right: calc(var(--spacing) * 1);
  }
  .group-history__time {
    margin-left: calc(var(--spacing) * 4);
    flex-shrink: 0;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    white-space: nowrap;
    color: var(--color-gray-400);
  }
  .group-history__time-detail {
    color: var(--color-gray-300);
  }
  .group-history__footer {
    margin-top: calc(var(--spacing) * 6);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-top: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
}
@layer components {
  .plano-list__empty {
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    color: var(--color-gray-400);
  }
  .plano-list__empty-icon {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .plano-list__empty-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .plano-list__cards {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding: calc(var(--spacing) * 4);
  }
  .plano-list__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .plano-list__canvas {
    position: relative;
    cursor: default;
    overflow: hidden;
    background-color: var(--color-gray-100);
    min-height: 250px;
  }
  .plano-list__canvas-img {
    display: block;
    height: auto;
    width: 100%;
    max-height: 400px;
    object-fit: contain;
  }
  .plano-list__canvas-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 20);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    color: var(--color-gray-300);
  }
  .plano-list__marker {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    width: 24px;
    height: 24px;
    z-index: 10;
    pointer-events: none;
    color: #dc2626;
    font-size: 20px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    transition: transform 0.15s ease;
  }
  .plano-list__marker--editing {
    color: #2563eb;
    animation: marker-pulse 1.5s ease-in-out infinite;
  }
  @keyframes marker-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }
  .plano-list__card-body {
    padding: calc(var(--spacing) * 3);
  }
  .plano-list__card-title {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .plano-list__card-coords {
    display: flex;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .plano-list__coord {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .plano-list__footer {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .plano-list__add-panel {
    margin: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 4);
  }
  .plano-list__add-title {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .plano-list__add-form {
    margin-top: calc(var(--spacing) * 2);
  }
  .plano-list__add-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .plano-list__add-select {
    min-width: calc(var(--spacing) * 50);
    flex: 1;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .plano-list__add-coord {
    width: calc(var(--spacing) * 20);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .plano-list__add-btn {
    border-radius: var(--radius-md);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .plano-list__card-actions {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-100);
    padding-top: calc(var(--spacing) * 2);
  }
  .plano-list__action-edit {
    cursor: pointer;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .plano-list__edit-hint {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-700);
  }
  .plano-list__action-remove {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red-500);
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
  }
  .plano-list__pos-form {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .plano-list__pos-save {
    border-radius: 0.25rem;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .plano-list__pos-cancel {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
}
@layer components {
  .station-breadcrumb {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .station-breadcrumb__list {
    display: flex;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .station-breadcrumb__link {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .station-breadcrumb__current {
    &::before {
      content: var(--tw-content);
      margin-inline: calc(var(--spacing) * 2);
    }
    &::before {
      content: var(--tw-content);
      --tw-content: '/';
      content: var(--tw-content);
    }
  }
}
@layer components {
  .station-basics {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .station-basics__header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .station-basics__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .station-basics__title-icon {
    margin-right: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
  }
  .station-basics__body {
    padding: calc(var(--spacing) * 6);
  }
  .station-basics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
  }
  .station-basics__field--wide {
    grid-column: span 2 / span 2;
  }
  .station-basics__label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .station-basics__value {
    margin-top: calc(var(--spacing) * 1);
    color: var(--color-gray-900);
  }
  .station-basics__badge--yes {
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .station-basics__badge--no {
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-red-800);
  }
}
@layer components {
  .station-header {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .station-header__body {
    padding: calc(var(--spacing) * 6);
  }
  .station-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .station-header__name {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .station-header__code {
    color: var(--color-gray-500);
  }
  .station-header__actions {
    display: flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .station-header__badge {
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .station-header__badge--active {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .station-header__badge--inactive {
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
  }
  .station-header__badge--online {
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
  }
  .station-header__badge--offline {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .station-header__badge-icon {
    margin-right: calc(var(--spacing) * 1);
  }
  .station-header__form-inline {
    display: inline;
  }
  .station-header__btn-verify {
    border-radius: var(--radius-lg);
    background-color: var(--color-cyan-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-cyan-700);
      }
    }
  }
  .station-header__btn-verify-icon {
    margin-right: calc(var(--spacing) * 1);
  }
  .station-header__connectivity-result {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .station-header__connectivity-result--online {
    color: var(--color-green-600);
  }
  .station-header__connectivity-result--offline {
    color: var(--color-red-600);
  }
  .station-header__btn-deactivate {
    border-radius: var(--radius-lg);
    background-color: var(--color-amber-500);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-600);
      }
    }
  }
  .station-header__btn-reactivate {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .station-header__btn-edit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .station-header__btn-connection {
    border-radius: var(--radius-lg);
    background-color: var(--color-purple-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-purple-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-purple-200);
      }
    }
  }
  .station-header__btn-location {
    border-radius: var(--radius-lg);
    background-color: var(--color-teal-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-teal-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-teal-200);
      }
    }
  }
  .station-header__btn-back {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .station-header__btn-decommission {
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
}
@layer components {
  .station-tabs {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .station-tabs__header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .station-tabs__nav {
    margin-bottom: -1px;
    display: flex;
  }
  .station-tabs__tab {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .station-tabs__tab:hover {
    color: var(--color-gray-700);
  }
  .station-tabs__tab--active {
    border-color: var(--color-blue-500);
    color: var(--color-blue-600);
  }
  .station-tabs__tab-icon {
    margin-right: calc(var(--spacing) * 2);
  }
  .station-tabs__body {
    padding: calc(var(--spacing) * 6);
  }
  .station-tabs__panel-loader {
    display: flex;
    justify-content: center;
    padding-block: calc(var(--spacing) * 8);
  }
  .station-tabs__spinner-icon {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    color: var(--color-gray-400);
  }
  .station-tabs__panel-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 6);
  }
  .station-tabs__panel-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .station-tabs__panel-text i {
    margin-right: calc(var(--spacing) * 1);
    color: var(--color-blue-500);
  }
  .station-tabs__panel-link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-decoration-line: none;
  }
  .station-tabs__panel-link:hover {
    background-color: var(--color-blue-700);
  }
}
@layer components {
  .station-location {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .station-location__header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .station-location__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .station-location__title-icon {
    margin-right: calc(var(--spacing) * 2);
    color: var(--color-red-600);
  }
  .station-location__body {
    padding: calc(var(--spacing) * 6);
  }
  .station-location__map {
    margin-bottom: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 64);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
  }
  .station-location__map-loading {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
  }
  .station-location__map-loading-icon {
    margin-right: calc(var(--spacing) * 2);
  }
  .station-location__coords {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .station-location__coord-row {
    display: flex;
    justify-content: space-between;
  }
  .station-location__coord-label {
    color: var(--color-gray-500);
  }
  .station-location__coord-value {
    font-family: var(--font-mono);
  }
  .station-location__empty {
    display: flex;
    height: calc(var(--spacing) * 48);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
  }
  .station-location__empty-icon {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}
@layer components {
  .sensor-list__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: calc(var(--spacing) * 12);
    color: var(--color-gray-400);
  }
  .sensor-list__empty-icon {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .sensor-list__empty-text {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .sensor-list__wrapper {
    overflow-x: auto;
  }
  .sensor-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .sensor-list__thead {
    background-color: var(--color-gray-50);
  }
  .sensor-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .sensor-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .sensor-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .sensor-list__row {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .sensor-list__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    white-space: nowrap;
  }
  .sensor-list__td--muted {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-500);
  }
  .sensor-list__td--actions {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .sensor-list__code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .sensor-list__type-badge {
    border-radius: 0.25rem;
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .sensor-list__status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .sensor-list__status-badge--active {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .sensor-list__status-badge--inactive {
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
  }
  .sensor-list__status-badge--warning {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .sensor-list__status-dot {
    margin-right: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
  }
  .sensor-list__status-dot--active {
    background-color: var(--color-green-400);
  }
  .sensor-list__status-dot--inactive {
    background-color: var(--color-gray-400);
  }
  .sensor-list__status-dot--warning {
    background-color: var(--color-yellow-400);
  }
  .sensor-list__date-empty {
    color: var(--color-gray-400);
  }
  .sensor-list__deactivate-form {
    display: inline;
  }
  .sensor-list__action-deactivate {
    color: var(--color-amber-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-amber-800);
      }
    }
  }
  .sensor-list__action-view {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .sensor-list__footer {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .sensor-list__add-panel {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 4);
  }
  .sensor-list__add-header {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .sensor-list__add-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .sensor-list__add-form {
    position: relative;
  }
  .sensor-list__search-wrapper {
    position: relative;
  }
  .sensor-list__search-input {
    width: 100%;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .sensor-list__search-loading {
    position: absolute;
    top: calc(1/2 * 100%);
    right: calc(var(--spacing) * 3);
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    color: var(--color-blue-500);
  }
  .sensor-list__search-dropdown {
    position: absolute;
    z-index: 10;
    margin-top: calc(var(--spacing) * 1);
    width: 100%;
  }
  .sensor-list__search-results {
    max-height: calc(var(--spacing) * 48);
    overflow-y: auto;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .sensor-list__search-empty {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .sensor-list__search-result {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .sensor-list__search-code {
    font-family: var(--font-mono);
    color: var(--color-gray-900);
  }
  .sensor-list__search-name {
    flex: 1;
    color: var(--color-gray-600);
  }
  .sensor-list__search-type {
    border-radius: 0.25rem;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-600);
  }
  .sensor-list__remove-form {
    display: inline;
  }
  .sensor-list__action-remove {
    color: var(--color-red-500);
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
  }
  .sensor-list__action-activate {
    color: var(--color-green-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-green-800);
      }
    }
  }
  .sensor-list__toolbar {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    justify-content: flex-end;
  }
  .sensor-list__btn-create {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .sensor-modal__overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .sensor-modal__dialog {
    margin-inline: calc(var(--spacing) * 4);
    display: flex;
    max-height: 90vh;
    width: 100%;
    max-width: var(--container-2xl);
    flex-direction: column;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .sensor-modal__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .sensor-modal__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .sensor-modal__close {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .sensor-modal__body {
    min-height: calc(var(--spacing) * 0);
    flex: 1;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .sensor-modal__field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .sensor-modal__field label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .sensor-modal__input {
    width: 100%;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  #sensor-modal-form {
    display: flex;
    min-height: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }
  .sensor-modal__footer {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .sensor-modal__btn-save {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .sensor-modal__btn-cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .sensor-modal__hint {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .sensor-modal__tab-nav {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    gap: calc(var(--spacing) * 1);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
  }
  .sensor-modal__tab-btn {
    cursor: pointer;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .sensor-modal__tab-btn:hover {
    color: var(--color-gray-700);
  }
  .sensor-modal__tab-btn--active {
    border-color: var(--color-blue-600);
    color: var(--color-blue-600);
  }
  .sensor-modal__tab-panel {
    min-height: 12rem;
  }
  .sensor-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
  }
  .sensor-list__urls-data {
    display: none;
  }
}
@layer components {
  .tipo-alerta-check {
    padding: calc(var(--spacing) * 4);
  }
  .tipo-alerta-check__header {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .tipo-alerta-check__title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .tipo-alerta-check__hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .tipo-alerta-check__summary {
    display: flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
  }
  .tipo-alerta-check__count {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-blue-600);
  }
  .tipo-alerta-check__count-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .tipo-alerta-check__empty {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    color: var(--color-gray-400);
  }
  .tipo-alerta-check__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 3);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .tipo-alerta-check__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .tipo-alerta-check__card--active {
    border-color: var(--color-blue-300);
    background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-50) 30%, transparent);
    }
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .tipo-alerta-check__card-header {
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 2);
  }
  .tipo-alerta-check__priority {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .tipo-alerta-check__priority--high {
    background-color: var(--color-red-100);
    color: var(--color-red-700);
  }
  .tipo-alerta-check__priority--medium {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-700);
  }
  .tipo-alerta-check__priority--low {
    background-color: var(--color-green-100);
    color: var(--color-green-700);
  }
  .tipo-alerta-check__card-body {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .tipo-alerta-check__icon {
    display: flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-gray-400);
  }
  .tipo-alerta-check__icon--active {
    background-color: var(--color-blue-100);
    color: var(--color-blue-600);
  }
  .tipo-alerta-check__info {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-direction: column;
  }
  .tipo-alerta-check__name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .tipo-alerta-check__code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .tipo-alerta-check__desc {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .tipo-alerta-check__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .tipo-alerta-check__toggle {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .tipo-alerta-check__toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .tipo-alerta-check__toggle-slider {
    position: relative;
    display: inline-block;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 9);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-300);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .tipo-alerta-check__toggle-slider::after {
    content: '';
    position: absolute;
    top: calc(var(--spacing) * 0.5);
    left: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .tipo-alerta-check__toggle-input:checked + .tipo-alerta-check__toggle-slider {
    background-color: var(--color-blue-600);
  }
  .tipo-alerta-check__toggle-input:checked + .tipo-alerta-check__toggle-slider::after {
    transform: translateX(16px);
  }
  .tipo-alerta-check__toggle-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .tipo-alerta-check__loading {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-500);
  }
}
@layer components {
  .station-location-tab {
    padding: calc(var(--spacing) * 4);
  }
  .station-location-tab__header {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .station-location-tab__title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .station-location-tab__coords {
    margin-bottom: calc(var(--spacing) * 6);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .station-location-tab__coord-group {
    display: flex;
    flex-direction: column;
  }
  .station-location-tab__coord-group--full {
    @media (width >= 40rem) {
      grid-column: span 2 / span 2;
    }
  }
  .station-location-tab__label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .station-location-tab__value {
    margin-top: calc(var(--spacing) * 1);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .station-location-tab__map-container {
    z-index: 0;
    margin-bottom: calc(var(--spacing) * 4);
    height: 350px;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
  }
  .station-location-tab__hint {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .station-location-tab__edit-hint {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    background-color: var(--color-blue-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
  }
  .station-location-tab__empty {
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-400);
  }
  .station-location-tab__empty-icon {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .station-location-tab__form-section {
    margin-top: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .station-location-tab__btn-edit {
    border-radius: var(--radius-md);
    background-color: var(--color-blue-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-100);
      }
    }
  }
  .station-location-tab__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .station-location-tab__form-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .station-location-tab__form-field {
    display: flex;
    flex-direction: column;
  }
  .station-location-tab__form-label {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .station-location-tab__form-input {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .station-location-tab__form-actions {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .station-location-tab__btn-save {
    border-radius: var(--radius-md);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .station-location-tab__btn-cancel {
    border-radius: var(--radius-md);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
}
@layer components {
  .station-edit {
    padding-block: calc(var(--spacing) * 4);
  }
  .station-edit__breadcrumb {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .station-edit__breadcrumb-list {
    display: flex;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .station-edit__breadcrumb-item {
    &::before {
      content: var(--tw-content);
      margin-inline: calc(var(--spacing) * 2);
    }
    &::before {
      content: var(--tw-content);
      --tw-content: '/';
      content: var(--tw-content);
    }
  }
  .station-edit__breadcrumb-link {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .station-edit__header {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .station-edit__title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .station-edit__title-icon {
    margin-right: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
  }
  .station-edit__subtitle {
    margin-top: calc(var(--spacing) * 1);
    color: var(--color-gray-500);
  }
  .station-edit__card {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .station-edit__body {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding: calc(var(--spacing) * 6);
  }
  .station-edit__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .station-edit__required {
    color: var(--color-red-500);
  }
  .station-edit__input {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .station-edit__textarea {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .station-edit__help {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .station-edit__readonly-section {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-top: calc(var(--spacing) * 4);
  }
  .station-edit__readonly-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    text-transform: uppercase;
  }
  .station-edit__readonly-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .station-edit__readonly-term {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .station-edit__readonly-value {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .station-edit__readonly-value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  .station-edit__status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .station-edit__status-badge--active {
    background-color: #dcfce7;
    color: #166534;
  }
  .station-edit__status-badge--inactive {
    background-color: #f3f4f6;
    color: #1f2937;
  }
  .station-edit__footer {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .station-edit__btn-cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .station-edit__btn-save {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .station-edit__btn-save-icon {
    margin-right: calc(var(--spacing) * 1);
  }
}
@layer components {
  .station-detail {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .station-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .station-detail__breadcrumb-link {
    color: var(--color-blue-600);
    text-decoration-line: none;
  }
  .station-detail__breadcrumb-link:hover {
    text-decoration-line: underline;
  }
  .station-detail__breadcrumb-sep {
    margin: 0 0.25rem;
  }
  .station-detail__breadcrumb-current {
    color: #374151;
  }
  .station-detail__header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .station-detail__title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    margin: 0;
  }
  .station-detail__subtitle {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    margin: 0.25rem 0 0 0;
  }
  .station-detail__btn--back {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    text-decoration-line: none;
  }
  .station-detail__btn--back:hover {
    background-color: var(--color-gray-200);
  }
  .station-detail__card {
    margin-bottom: calc(var(--spacing) * 4);
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    border-radius: 0.75rem;
  }
  .station-detail__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .station-detail__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin: 0;
  }
  .station-detail__card-id {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
    margin: 0.25rem 0 0 0;
  }
  .station-detail__card-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .station-detail__badge--active {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .station-detail__badge--inactive {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .station-detail__badge--online {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
  }
  .station-detail__badge--offline {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .station-detail__badge--yes {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .station-detail__badge--no {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .station-detail__btn--verify {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-md);
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-cyan-600);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
  }
  .station-detail__btn--verify:hover {
    background-color: var(--color-cyan-700);
  }
  .station-detail__connectivity-result {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .station-detail__connectivity-result--online {
    color: var(--color-green-600);
  }
  .station-detail__connectivity-result--offline {
    color: var(--color-red-600);
  }
  .station-detail__btn--edit {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-md);
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
    text-decoration-line: none;
  }
  .station-detail__btn--edit:hover {
    background-color: var(--color-blue-700);
  }
  .station-detail__section {
    border: none;
    border-bottom: 1px solid #f3f4f6;
    padding: 0;
    margin: 0;
  }
  .station-detail__section:last-child {
    border-bottom: none;
  }
  .station-detail__section--actions {
    background-color: var(--color-gray-50);
  }
  .station-detail__section-title {
    padding-inline: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-gray-700);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
  }
  .station-detail__section-title i {
    color: var(--color-gray-400);
    font-size: 0.875rem;
  }
  .station-detail__fields {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .station-detail__fields--3col {
    grid-template-columns: repeat(3, 1fr);
  }
  .station-detail__field--full {
    grid-column: 1 / -1;
  }
  .station-detail__field--span2 {
    grid-column: span 2;
  }
  .station-detail__label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-bottom: 0.15rem;
  }
  .station-detail__value {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    margin: 0;
  }
  .station-detail__text-gray-500 {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
    font-style: italic;
  }
  .station-detail__save-bar {
    display: flex;
    justify-content: flex-end;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-100);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .station-detail__section-save {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    justify-content: flex-end;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-100);
    padding-top: calc(var(--spacing) * 3);
  }
  .station-detail__btn--save-section {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition: background-color 0.2s, transform 0.1s;
  }
  .station-detail__btn--save-section:hover {
    background-color: var(--color-blue-700);
  }
  .station-detail__btn--save-section:disabled {
    cursor: not-allowed;
    opacity: 60%;
  }
  .station-detail__btn--saved {
    display: inline-flex;
    cursor: not-allowed;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .station-detail__btn--save-error {
    display: inline-flex;
    cursor: not-allowed;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .station-detail__btn--save-inline {
    margin-left: calc(var(--spacing) * 2);
    flex-shrink: 0;
  }
  .station-detail__inline-form {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 0);
  }
  .station-detail__inline-form .station-detail__input {
    flex: 1;
  }
  .station-detail__input {
    width: 100%;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .station-detail__input:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    --tw-outline-style: none;
    outline-style: none;
  }
  .station-detail__textarea {
    width: 100%;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    resize: vertical;
  }
  .station-detail__textarea:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    --tw-outline-style: none;
    outline-style: none;
  }
  .station-detail__select {
    width: 100%;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .station-detail__select:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    --tw-outline-style: none;
    outline-style: none;
  }
  .station-detail__select--multi {
    min-height: 4.5rem;
  }
  .station-detail__checkbox-label {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .station-detail__checkbox {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
  }
  .station-detail__gps-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .station-detail__gps-trigger {
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-indigo-600);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
  }
  .station-detail__gps-trigger:hover {
    background-color: var(--color-indigo-700);
  }
  .station-detail__gps-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .station-detail__gps-modal-content {
    margin-inline: calc(var(--spacing) * 4);
    width: 100%;
    max-width: var(--container-2xl);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    max-height: 90vh;
    overflow-y: auto;
  }
  .station-detail__gps-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .station-detail__gps-modal-header h3 {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin: 0;
  }
  .station-detail__gps-modal-close {
    cursor: pointer;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    color: var(--color-gray-400);
  }
  .station-detail__gps-modal-close:hover {
    color: var(--color-gray-600);
  }
  .station-detail__gps-modal-map {
    height: 350px;
    z-index: 0;
  }
  .station-detail__gps-modal-hint {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
    margin: 0;
  }
  .station-detail__gps-modal-form {
    padding-inline: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
  }
  .station-detail__gps-modal-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: calc(var(--spacing) * 4);
  }
  .station-detail__gps-modal-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .plano-thumb__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
  }
  .plano-thumb__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
  }
  .plano-thumb__card--clickable {
    cursor: pointer;
  }
  .plano-thumb__card--clickable:hover {
    border-color: var(--color-blue-300);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .plano-thumb__card--add {
    border-style: var(--tw-border-style);
    border-width: 2px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    cursor: pointer;
  }
  .plano-thumb__card--add:hover {
    border-color: var(--color-blue-400);
    background-color: var(--color-blue-50);
  }
  .plano-thumb__card--add .plano-thumb__placeholder {
    color: var(--color-gray-400);
  }
  .plano-thumb__card--add:hover .plano-thumb__placeholder {
    color: var(--color-blue-500);
  }
  .plano-thumb__canvas {
    position: relative;
    background-color: var(--color-gray-100);
    height: 100px;
    overflow: hidden;
  }
  .plano-thumb__img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .plano-thumb__placeholder {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-gray-300);
  }
  .plano-thumb__marker {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    z-index: 10;
    pointer-events: none;
    color: #dc2626;
    font-size: 14px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  }
  .plano-thumb__marker--editing {
    color: #2563eb;
    animation: marker-pulse 1.5s ease-in-out infinite;
  }
  @keyframes marker-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
  }
  .plano-thumb__info {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .plano-thumb__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .plano-thumb__form-inline {
    display: inline;
  }
  .plano-popup__body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .plano-popup__field {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .plano-popup__hint {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
    margin: 0 0 0.5rem 0;
  }
  .plano-popup__preview {
    position: relative;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-100);
    height: 350px;
    cursor: crosshair;
    overflow: hidden;
  }
  .plano-popup__preview-img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .plano-popup__coords {
    padding-block: calc(var(--spacing) * 2);
  }
  .plano-popup__actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 3);
  }
  .plano-popup__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .station-detail__actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    margin: 0;
  }
  .station-detail__action-link {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
  }
  .station-detail__action-link:hover {
    background-color: var(--color-gray-200);
  }
  .station-detail__action-link--warning {
    border-color: var(--color-amber-200);
    background-color: var(--color-amber-50);
    color: var(--color-amber-700);
  }
  .station-detail__action-link--warning:hover {
    background-color: var(--color-amber-100);
  }
  .station-detail__action-link--danger {
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    color: var(--color-red-700);
  }
  .station-detail__action-link--danger:hover {
    background-color: var(--color-red-100);
  }
  .station-detail__action-link--success {
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    color: var(--color-green-700);
  }
  .station-detail__action-link--success:hover {
    background-color: var(--color-green-100);
  }
  .station-detail__form-inline {
    display: inline;
  }
  .station-detail__tabs-card {
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    border-radius: 0.75rem;
  }
  .station-detail__tabs-nav {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--color-gray-50);
    border-bottom: 2px solid #e5e7eb;
  }
  .station-detail__tab {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    padding: 0.75rem 1.25rem;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
  }
  .station-detail__tab:hover {
    color: var(--color-gray-700);
  }
  .station-detail__tab--active {
    color: var(--color-blue-600);
    border-bottom-color: #2563eb;
  }
  .station-detail__tab-content {
    padding: calc(var(--spacing) * 6);
    min-height: 200px;
  }
  .station-detail__tab-loading {
    text-align: center;
    color: var(--color-gray-400);
    padding: 2rem 0;
  }
  .station-detail__tab-loading i {
    font-size: 1.5rem;
  }
  .station-detail__tab-loading p {
    margin-top: 0.5rem;
  }
  .station-detail__panel-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .station-detail__panel-info i {
    margin-right: calc(var(--spacing) * 1);
    color: var(--color-blue-500);
  }
  .station-detail__btn--matrix {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-decoration-line: none;
  }
  .station-detail__btn--matrix:hover {
    background-color: var(--color-blue-700);
  }
  .station-detail__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .station-detail__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .station-detail__label-required {
    color: var(--color-red-500);
  }
  .station-detail__value-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .station-detail__hint {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
    margin-top: 0.25rem;
  }
  .station-detail__icon--xl {
    font-size: 2rem;
  }
  .station-detail__icon--lg {
    font-size: 1.5rem;
  }
  .station-detail__icon--muted {
    color: var(--color-gray-400);
  }
  .station-detail__btn--cancel {
    margin-left: calc(var(--spacing) * 4);
  }
  .plano-thumb__placeholder--full {
    height: 100%;
  }
  .foto-thumb__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
  }
  .foto-thumb__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    cursor: pointer;
    transition: box-shadow 0.2s;
  }
  .foto-thumb__card:hover {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .foto-thumb__card--add {
    border-style: var(--tw-border-style);
    border-width: 2px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    cursor: pointer;
  }
  .foto-thumb__card--add:hover {
    border-color: var(--color-blue-400);
    background-color: var(--color-blue-50);
  }
  .foto-thumb__card--add .foto-thumb__placeholder {
    color: var(--color-gray-400);
  }
  .foto-thumb__card--add:hover .foto-thumb__placeholder {
    color: var(--color-blue-500);
  }
  .foto-thumb__canvas {
    position: relative;
    width: 100%;
    background-color: var(--color-gray-100);
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .foto-thumb__img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .foto-thumb__placeholder {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-300);
  }
  .foto-thumb__overlay {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(239, 68, 68, 0.85);
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
  }
  .foto-thumb__card:hover .foto-thumb__overlay {
    display: flex;
  }
  .foto-thumb__info {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .foto-thumb__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .foto-thumb__counter {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: normal;
  }
  .foto-thumb__empty {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
  }
  .foto-thumb__empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  .foto-upload__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .foto-upload__modal {
    background: white;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
  }
  .foto-upload__dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }
  .foto-upload__dropzone--active {
    border-color: #3b82f6;
    background: #eff6ff;
  }
  .foto-upload__preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .foto-upload__preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.375rem;
    overflow: hidden;
  }
  .foto-upload__preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .foto-upload__preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .foto-upload__preview-remove:hover {
    background: rgba(0, 0, 0, 0.8);
  }
  .foto-upload__error {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 0.25rem;
  }
  .foto-upload__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .foto-lightbox__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .foto-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1401;
    padding: 0.5rem;
    opacity: 0.7;
  }
  .foto-lightbox__close:hover {
    opacity: 1;
  }
  .foto-lightbox__content {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .foto-lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 0.25rem;
  }
  .foto-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 1rem 0.75rem;
    border-radius: 0.375rem;
    opacity: 0.7;
    z-index: 1401;
  }
  .foto-lightbox__nav:hover {
    opacity: 1;
    background: rgba(255,255,255,0.25);
  }
  .foto-lightbox__nav--prev {
    left: 1rem;
  }
  .foto-lightbox__nav--next {
    right: 1rem;
  }
  .foto-lightbox__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 1.5rem 2rem 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
  }
  .foto-lightbox__caption {
    flex: 1;
    min-width: 0;
  }
  .foto-lightbox__title {
    color: white;
    font-size: 0.95rem;
    font-weight: 500;
    display: block;
  }
  .foto-lightbox__desc {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    display: block;
    margin-top: 0.25rem;
  }
  .foto-lightbox__counter {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    white-space: nowrap;
  }
  .foto-lightbox__actions {
    display: flex;
    gap: 0.5rem;
  }
  .foto-lightbox__btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.8;
  }
  .foto-lightbox__btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.25);
  }
  .foto-lightbox__btn--delete:hover {
    background: rgba(239,68,68,0.6);
  }
  .foto-thumb__card--ghost {
    opacity: 0.4;
  }
  .foto-edit__backdrop {
    z-index: 1500;
  }
  .foto-edit__modal {
    max-width: 400px;
  }
  .foto-edit__title {
    margin: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .foto-edit__row {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 6);
  }
  .foto-edit__preview {
    height: calc(var(--spacing) * 15);
    width: calc(var(--spacing) * 20);
    flex-shrink: 0;
    border-radius: var(--radius-md);
    object-fit: cover;
  }
  .foto-edit__field {
    flex: 1;
  }
  .foto-edit__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .foto-edit__input {
    width: 100%;
  }
  .foto-edit__textarea {
    width: 100%;
    resize: vertical;
  }
  .foto-edit__counter {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .foto-edit__group {
    margin-bottom: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 6);
  }
  .foto-edit__actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
  }
  .foto-upload__icon {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    color: var(--color-gray-400);
  }
  .foto-upload__text {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .foto-upload__hint {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .foto-upload__selected-count {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .foto-upload__fields {
    margin-top: calc(var(--spacing) * 3);
  }
  .foto-upload__label--desc {
    margin-top: calc(var(--spacing) * 2);
    display: block;
  }
  .foto-upload__server-errors {
    margin-top: calc(var(--spacing) * 2);
  }
}
@layer components {
  .event-stats {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .event-stats__top {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .event-stats__breadcrumb-list {
    display: flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .event-stats__breadcrumb-item {
    display: flex;
    align-items: center;
  }
  .event-stats__breadcrumb-item::before {
    content: '/';
    margin-inline: calc(var(--spacing) * 2);
    color: var(--color-gray-300);
  }
  .event-stats__breadcrumb-item:first-child::before {
    content: '';
    margin-inline: calc(var(--spacing) * 0);
  }
  .event-stats__breadcrumb-item--active {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .event-stats__breadcrumb-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .event-stats__year-filter {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .event-stats__year-form {
    display: flex;
    align-items: center;
  }
  .event-stats__year-label {
    margin-right: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .event-stats__year-select {
    width: auto;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .event-stats__summary-grid {
    margin-bottom: calc(var(--spacing) * 6);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .event-stats__summary-card {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 6);
    color: var(--color-white);
  }
  .event-stats__summary-card--primary {
    background-color: var(--color-blue-600);
  }
  .event-stats__summary-card--success {
    background-color: var(--color-green-600);
  }
  .event-stats__summary-card--warning {
    background-color: var(--color-amber-500);
  }
  .event-stats__summary-card--info {
    background-color: var(--color-cyan-600);
  }
  .event-stats__summary-title {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    opacity: 90%;
  }
  .event-stats__summary-value {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .event-stats__details-grid {
    margin-bottom: calc(var(--spacing) * 6);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .event-stats__panel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .event-stats__panel-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .event-stats__panel-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .event-stats__panel-body {
    padding: calc(var(--spacing) * 4);
  }
  .event-stats__empty {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .event-stats__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .event-stats__thead {
    background-color: var(--color-gray-50);
  }
  .event-stats__th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .event-stats__th--right {
    text-align: right;
  }
  .event-stats__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .event-stats__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .event-stats__td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .event-stats__td--right {
    text-align: right;
  }
  .event-stats__actions {
    margin-top: calc(var(--spacing) * 6);
  }
  .event-stats__back-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .event-stats__back-btn-icon {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .station-history {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .station-history__top {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .station-history__breadcrumb-list {
    display: flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .station-history__breadcrumb-item {
    display: flex;
    align-items: center;
  }
  .station-history__breadcrumb-item::before {
    content: '/';
    margin-inline: calc(var(--spacing) * 2);
    color: var(--color-gray-300);
  }
  .station-history__breadcrumb-item:first-child::before {
    content: '';
    margin-inline: calc(var(--spacing) * 0);
  }
  .station-history__breadcrumb-item--active {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .station-history__breadcrumb-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .station-history__card {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .station-history__section-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .station-history__section-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .station-history__card-body {
    padding: calc(var(--spacing) * 4);
  }
  .station-history__filter-form {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .station-history__filter-group--wide {
    flex: 2;
  }
  .station-history__filter-actions {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .station-history__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .station-history__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .station-history__btn--primary {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .station-history__btn--secondary {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .station-history__btn--stats {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-500);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-600);
      }
    }
  }
  .station-history__btn--export {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .station-history__btn--detail {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .station-history__btn-icon {
    margin-right: calc(var(--spacing) * 1);
  }
  .station-history__toolbar {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .station-history__toolbar-left {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .station-history__meta-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .station-history__table-wrapper {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .station-history__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .station-history__thead {
    background-color: var(--color-gray-50);
  }
  .station-history__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .station-history__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .station-history__row {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .station-history__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .station-history__gps-text {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .station-history__alert-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    background-color: var(--color-amber-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-amber-800);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-200);
      }
    }
  }
  .station-history__type-badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
  }
  .station-history__pagination-nav {
    margin-top: calc(var(--spacing) * 4);
  }
  .station-history__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .station-history__page-item--active .station-history__page-btn {
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .station-history__page-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .station-history__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: calc(var(--spacing) * 16);
    color: var(--color-gray-400);
  }
  .station-history__empty-icon {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .station-history__empty-text {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-gray-500);
  }
}
@layer components {
  .station-connection {
    padding: calc(var(--spacing) * 8);
  }
  .station-connection__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .station-connection__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .station-connection__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .station-connection__btn-cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .station-connection__btn-submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .station-connection__card-title {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .station-connection__card-icon {
    margin-right: calc(var(--spacing) * 2);
  }
  .station-connection__field {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .station-connection__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .station-connection__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .station-connection__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .station-connection__item {
    margin-right: calc(var(--spacing) * 1);
  }
  .station-connection__item-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .station-connection__wrapper {
    padding-block: calc(var(--spacing) * 4);
  }
  .station-connection__wrapper-1 {
    justify-content: center;
  }
  .station-connection__wrapper-2 {
    display: flex;
    justify-content: space-between;
  }
}
@layer components {
  .station-create {
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--spacing) * 8);
  }
  .station-create__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .station-create__breadcrumb-link {
    color: var(--color-blue-600);
    text-decoration-line: none;
  }
  .station-create__breadcrumb-link:hover {
    text-decoration-line: underline;
  }
  .station-create__breadcrumb-sep {
    margin: 0 0.25rem;
  }
  .station-create__breadcrumb-current {
    color: #374151;
  }
  .station-create__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .station-create__subtitle {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    margin: 0.25rem 0 0 0;
  }
  .station-create__btn--back {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    text-decoration-line: none;
  }
  .station-create__btn--back:hover {
    background-color: var(--color-gray-200);
  }
  .station-create__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .station-create__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .station-create__card {
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    border-radius: 0.75rem;
  }
  .station-create__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .station-create__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin: 0;
  }
  .station-create__card-subtitle {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
    margin: 0.25rem 0 0 0;
  }
  .station-create__form {
    padding: calc(var(--spacing) * 6);
  }
  .station-create__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
  .station-create__field--full {
    grid-column: 1 / -1;
  }
  .station-create__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .station-create__label-required {
    color: var(--color-red-500);
  }
  .station-create__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .station-create__input:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .station-create__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .station-create__select--multi {
    min-height: 5rem;
  }
  .station-create__select:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .station-create__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    box-sizing: border-box;
  }
  .station-create__textarea:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .station-create__hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .station-create__checkbox-label {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .station-create__checkbox {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
  }
  .station-create__actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 6);
  }
  .station-create__btn--submit {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    border: none;
  }
  .station-create__btn--submit:hover {
    background-color: var(--color-blue-700);
  }
  .station-create__btn--cancel {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    text-decoration-line: none;
  }
  .station-create__btn--cancel:hover {
    background-color: var(--color-gray-200);
  }
}
@layer components {
  .csv-import {
    padding: calc(var(--spacing) * 8);
  }
  .csv-import__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .csv-import__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .csv-import__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .csv-import__btn-cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .csv-import__btn-submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .csv-import__heading {
    margin-bottom: 0;
  }
  .csv-import__field {
    margin-bottom: 0.75rem;
  }
  .csv-import__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .csv-import__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .csv-import__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .csv-import__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .csv-import__item-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .csv-import__item-2 {
    margin-right: calc(var(--spacing) * 1);
  }
  .csv-import__item-3 {
    margin-right: calc(var(--spacing) * 1);
  }
  .csv-import__wrapper {
    padding-block: calc(var(--spacing) * 4);
  }
  .csv-import__wrapper-1 {
    justify-content: center;
  }
  .csv-import__wrapper-2 {
    display: flex;
    justify-content: space-between;
  }
}
@layer components {
  .csv-import-result {
    padding: calc(var(--spacing) * 8);
  }
  .csv-import-result__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .csv-import-result__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .csv-import-result__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .csv-import-result__btn-secondary {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .csv-import-result__btn-primary {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .csv-result__heading {
    margin-bottom: 0;
  }
  .csv-import-result__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .csv-import-result__item-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .csv-import-result__item-2 {
    margin-right: calc(var(--spacing) * 1);
  }
  .csv-import-result__item-3 {
    margin-right: calc(var(--spacing) * 1);
  }
  .csv-import-result__item-4 {
    margin-right: calc(var(--spacing) * 1);
  }
  .csv-import-result__wrapper {
    padding-block: calc(var(--spacing) * 4);
  }
  .csv-import-result__wrapper-1 {
    justify-content: center;
  }
  .csv-import-result__wrapper-2 {
    margin-bottom: calc(var(--spacing) * 4);
    text-align: center;
  }
  .csv-import-result__wrapper-3 {
    background-color: var(--color-gray-100);
  }
  .csv-import-result__wrapper-4 {
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .csv-import-result__wrapper-5 {
    display: flex;
    justify-content: space-between;
  }
  .csv-import-result__failed-card {
    background-color: var(--color-gray-100);
  }
  .csv-import-result__failed-card--has-errors {
    background-color: var(--color-red-600);
    color: var(--color-white);
  }
}
@layer components {
  .station-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .station-list__breadcrumb-current {
    color: #111827;
  }
  .station-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .station-list__title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    font-family: 'Space Grotesk', sans-serif;
    color: #111827;
  }
  .station-list__subtitle {
    color: #4B5563;
  }
  .station-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    padding: 0.5rem 1rem;
    background-color: #2563EB;
    color: #ffffff;
    transition-property: color, background-color, border-color, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    text-decoration: none;
  }
  .station-list__create-btn:hover {
    background-color: #1D4ED8;
  }
  .station-list__counter {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #4B5563;
  }
  .station-list__counter-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .station-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: #ffffff;
  }
  .station-list__table {
    min-width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #E5E7EB;
  }
  .station-list__table tbody tr + tr {
    border-top: 1px solid #E5E7EB;
  }
  .station-list__thead {
    background-color: #F9FAFB;
  }
  .station-list__th {
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    padding: 0.75rem 0.75rem;
    color: #6B7280;
  }
  .station-list__tbody {
    background-color: #ffffff;
  }
  .station-list__row {
    transition-property: background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .station-list__row:hover {
    background-color: #F9FAFB;
  }
  .station-list__td {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    padding: 0.75rem 0.75rem;
    color: #374151;
  }
  .station-list__td--code {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    padding: 0.75rem 0.75rem;
    color: #111827;
  }
  .station-list__td--actions {
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    padding: 0.75rem 0.75rem;
  }
  .station-list__badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    padding: 0.125rem 0.625rem;
  }
  .station-list__badge--active {
    background-color: #D1FAE5;
    color: #065F46;
  }
  .station-list__badge--inactive {
    background-color: #F3F4F6;
    color: #1F2937;
  }
  .station-list__actions-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .station-list__action-link {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: #2563EB;
    text-decoration: none;
    transition-property: background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .station-list__action-link:hover {
    background-color: #EFF6FF;
  }
  .station-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
  }
  .station-list__page-btn {
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    padding: 0.5rem 0.75rem;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #D1D5DB;
    text-decoration: none;
    transition-property: background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .station-list__page-btn:hover {
    background-color: #F9FAFB;
  }
  .station-list__page-btn--active {
    color: #ffffff;
    background-color: #2563EB;
    border-color: #D1D5DB;
  }
  .station-list__page-btn--active:hover {
    background-color: #2563EB;
  }
  .station-list__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .station-list__wrapper-1 {
    margin-inline: auto;
  }
}
@layer components {
  .station-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .station-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .station-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .station-list__subtitle {
    color: var(--color-gray-600);
  }
  .station-list__breadcrumb-current {
    color: #111827;
  }
  .station-list__header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .station-list__btn--export {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--color-white);
    color: var(--color-gray-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    border: 1px solid #9ca3af;
    white-space: nowrap;
    gap: 0.375rem;
    flex-wrap: nowrap;
  }
  .station-list__btn--matrix {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--color-white);
    color: var(--color-gray-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    border: 1px solid #9ca3af;
    white-space: nowrap;
    gap: 0.375rem;
    flex-wrap: nowrap;
  }
  .station-list__btn--create {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
    white-space: nowrap;
  }
  .station-list__btn--create:hover {
    filter: brightness(0.9);
  }
  .station-list .station-list__filters-search {
    flex: 1 1 14rem;
    min-width: 8rem;
    width: auto;
  }
  .station-list .station-list__filters-search .station-list__filters-search-input {
    width: 100%;
    min-width: 0;
  }
  .station-list .station-list__filters-estado-select {
    max-width: 9rem;
  }
  @media (max-width: 1440px) {
    .station-list .station-list__filters-search {
      min-width: 6rem;
      flex-basis: 10rem;
    }
  }
  .station-list__bulk-actions {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .station-list__bulk-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .station-list__bulk-btn-icon {
    margin-right: calc(var(--spacing) * 1.5);
    display: inline;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .station-list__btn--danger {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
    border: none;
  }
  .station-list__btn--danger:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .station-list__th--checkbox {
    width: 1px;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }
  .station-list__cell--checkbox {
    width: 1px;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }
  .station-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .station-list__count-value {
    font-weight: 500;
  }
  .station-list__count-filtered {
    color: var(--color-gray-400);
  }
  .station-list__table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .station-list__hover-card {
    display: none;
  }
  .station-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .station-list__thead {
    background-color: var(--color-gray-50);
  }
  .station-list__th {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .station-list__th--actions {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .station-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .station-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .station-list__cell {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .station-list__cell--id {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .station-list__cell--status {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .station-list__cell--actions {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .station-list__th--ip, .station-list__cell--ip {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
  }
  .station-list__th--mac, .station-list__cell--mac {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
  }
  .station-list__badge--active {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .station-list__badge--inactive {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
  }
  .station-list__action-group {
    display: flex;
    justify-content: flex-start;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .station-list__action-link {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .station-list__action-link--danger {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
    border: none;
    background: none;
    cursor: pointer;
  }
  .station-list__action-link--success {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-green-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
    border: none;
    background: none;
    cursor: pointer;
  }
  .station-list__na {
    color: var(--color-gray-400);
  }
  .station-list__empty {
    padding-inline: calc(var(--spacing) * 6);
    text-align: center;
    color: var(--color-gray-500);
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .station-list__empty-state {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .station-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .station-list__pagination-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .station-list__pagination-value {
    font-weight: 500;
  }
  .station-list__pagination-nav {
    display: flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .station-list__page-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .station-list__page-btn--active {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .station-list__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  @media (max-width: 1280px) {
    .station-list__table-wrap {
      overflow: visible;
    }
    .station-list__th--ubicacion, .station-list__th--grupo, .station-list__th--ip, .station-list__th--mac, .station-list__cell--ubicacion, .station-list__cell--grupo, .station-list__cell--ip, .station-list__cell--mac {
      display: none;
    }
    .station-list__cell--codigo {
      position: relative;
    }
    .station-list__hover-card {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      z-index: 50;
      background: #1e2d3d;
      color: #fff;
      padding: .5rem .75rem;
      border-radius: 6px;
      white-space: nowrap;
      font-size: .75rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
      min-width: 180px;
      pointer-events: none;
    }
    .station-list__hover-card--above {
      top: auto;
      bottom: calc(100% + 4px);
    }
    .station-list__cell--codigo:hover .station-list__hover-card {
      display: block;
    }
    .station-list__hover-card-row {
      display: block;
      padding: .1rem 0;
    }
    .station-list__hover-card-row strong {
      font-weight: 600;
      opacity: .75;
    }
  }
}
@layer components {
  .station-location__wrapper {
    padding: calc(var(--spacing) * 8);
  }
  .station-location__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .station-location__breadcrumb-context {
    color: var(--color-gray-600);
  }
  .station-location__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .station-location__btn-cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .station-location__btn-submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .station-location__icon-gap {
    margin-right: calc(var(--spacing) * 1);
  }
  .station-location__icon-gap--wide {
    margin-right: calc(var(--spacing) * 2);
  }
  #map {
    height: 300px;
    background: #e9ecef;
    border-radius: 4px;
  }
  .station-location__heading {
    margin-bottom: 0;
  }
  .station-location__field {
    margin-bottom: 0.75rem;
  }
  .station-location__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .station-location__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .station-location__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .station-location__wrapper-1 {
    padding-block: calc(var(--spacing) * 4);
  }
  .station-location__wrapper-2 {
    justify-content: center;
  }
  .station-location__wrapper-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .station-location__wrapper-4 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .station-location__wrapper-5 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .station-location__wrapper-6 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .station-location__wrapper-7 {
    display: flex;
    height: calc(var(--spacing) * 100);
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
  }
  .station-location__wrapper-8 {
    display: flex;
    justify-content: space-between;
  }
}
@layer components {
  .event-show {
    padding: calc(var(--spacing) * 8);
  }
  .event-show__layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
  }
  @media (max-width: 768px) {
    .event-show__layout {
      grid-template-columns: 1fr;
    }
  }
  .event-show__main {
    min-width: 0;
  }
  .event-show__sidebar {
    min-width: 0;
  }
  .event-show__actions {
    margin-top: calc(var(--spacing) * 4);
  }
  .event-show__dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-2) var(--space-4);
  }
  .event-show__dt {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
  }
  .event-show__dd {
    font-size: var(--font-size-sm);
    margin: 0;
  }
  @media (max-width: 576px) {
    .event-show__dl {
      grid-template-columns: 1fr;
    }
  }
  .event-show__btn-back {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .event-show__heading {
    margin-bottom: 0;
  }
  .event-show__type-code {
    color: var(--color-gray-500);
  }
  .event-show__no-alert {
    color: var(--color-gray-500);
  }
  .event-show__empty-text {
    color: var(--color-gray-500);
    font-style: italic;
  }
  .event-show__detail-card {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .active__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .active__wrapper-1 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .active__wrapper-2 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .active__wrapper-3 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .event-show__type-badge {
    background-color: var(--color-gray-600);
    color: var(--color-white);
  }
  .event-show__alert-badge {
    background-color: var(--color-yellow-500);
    color: var(--color-gray-900);
  }
}
@layer components {
  .plans-empty {
    padding-block: calc(var(--spacing) * 5);
    text-align: center;
  }
  .plans-empty__title {
    margin-top: calc(var(--spacing) * 3);
  }
}
@layer components {
  .plan-flash {
    position: relative;
    padding-right: calc(var(--spacing) * 8);
  }
  .plan-flash__close {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 3);
    cursor: pointer;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    color: inherit;
    opacity: 60%;
  }
  .plan-flash__close:hover {
    opacity: 100%;
  }
}
@layer components {
  .plans-grid__name {
    margin-bottom: calc(var(--spacing) * 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .plano-grid {
    display: none;
  }
  .plano-grid-empty-icon {
    color: var(--color-gray-500);
  }
  .plano-grid-empty-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-100);
  }
  .plano-grid__wrapper {
    display: flex;
    gap: calc(var(--spacing) * 1);
  }
}
@layer components {
  .plans-header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .plans-header__wrapper {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
}
@layer components {
  .plan-delete-modal__overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .plan-delete-modal__dialog {
    margin-inline: calc(var(--spacing) * 4);
    width: 100%;
    max-width: var(--container-md);
  }
  .plan-delete-modal__content {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .plan-delete-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .plan-delete-modal__title {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .plan-delete-modal__close-btn {
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .plan-delete-modal__body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .plan-delete-modal__warning {
    color: var(--color-red-600);
  }
  .plan-delete-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .plan-delete-modal__btn-secondary {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .plan-delete-modal__btn-danger {
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
}
@layer components {
  .plans-upload-modal__overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .plans-upload-modal__dialog {
    margin-inline: calc(var(--spacing) * 4);
    width: 100%;
    max-width: var(--container-md);
  }
  .plans-upload-modal__dialog--lg {
    max-width: var(--container-2xl);
  }
  .plans-upload-modal__content {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .plans-upload-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .plans-upload-modal__title {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .plans-upload-modal__close-btn {
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .plans-upload-modal__body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .plans-upload-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .plans-upload__hint {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 0);
  }
  .plans-upload__formats-hint {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .plans-upload__file-input {
    margin-top: calc(var(--spacing) * 2);
  }
  .plans-upload__btn-secondary {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .plans-upload__btn-primary {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
  }
}
@layer components {
  .plans-tabs__count {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .plans-tabs__card-title {
    margin-bottom: calc(var(--spacing) * 0);
  }
}
@layer components;
@layer components;
@layer components;
@layer components {
  .plans-index {
    padding-block: calc(var(--spacing) * 4);
  }
  .planos-container {
    display: flex;
    gap: 1rem;
  }
  .planos-tabs {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid #dee2e6;
    padding-right: 1rem;
  }
  .planos-content {
    flex-grow: 1;
    min-height: 400px;
  }
  .tab-item {
    display: block;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    border-radius: 0.375rem;
    text-decoration: none;
    color: #495057;
    background-color: #f8f9fa;
    transition: all 0.2s;
  }
  .tab-item:hover {
    background-color: #e9ecef;
    color: #212529;
  }
  .tab-item.active {
    background-color: #0d6efd;
    color: white;
  }
  .tab-item .tab-thumbnail {
    width: 40px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 0.5rem;
  }
  .plano-viewer {
    position: relative;
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .plano-viewer img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
  }
  .plano-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }
  .plano-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .plano-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .plano-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
  .plano-card-body {
    padding: 0.75rem;
  }
  .upload-zone {
    border: 2px dashed #dee2e6;
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    background: #f8f9fa;
    transition: all 0.2s;
  }
  .upload-zone:hover, .upload-zone.dragover {
    border-color: #0d6efd;
    background: #e7f1ff;
  }
  .upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
  }
  .upload-preview-item {
    width: 150px;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem;
    position: relative;
  }
  .upload-preview-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
  }
  .upload-preview-item .remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dc3545;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .view-toggle {
    display: flex;
    gap: 0.5rem;
  }
  .view-toggle .btn {
    padding: 0.375rem 0.75rem;
  }
  .upload-zone-icon {
    font-size: 3rem;
    color: #6c757d;
  }
  .plano-viewer-icon {
    font-size: 3rem;
  }
  #deleteForm {
    display: inline;
  }
  .plano-grid-empty-image {
    height: 150px;
  }
  .plano-grid-empty-icon {
    font-size: 2rem;
  }
}
@layer components {
  .plan-upload {
    margin-top: calc(var(--spacing) * 4);
  }
  .plan-upload__field {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .plan-upload__title {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .plan-upload__cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .plan-upload__wrapper {
    display: flex;
    justify-content: space-between;
  }
  .plan-upload__hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
}
@layer components {
  .ubicar-container {
    display: flex;
    gap: 20px;
    padding: 20px;
  }
  .plano-canvas {
    position: relative;
    flex: 1;
    border: 2px solid #ddd;
    background-color: #f5f5f5;
    min-height: 600px;
  }
  .plano-imagen {
    display: block;
    width: 100%;
    height: auto;
  }
  .estacion-marker {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    -webkit-user-select: none;
    user-select: none;
    width: 30px;
    height: 30px;
    background-color: #007bff;
    border-radius: 50%;
    cursor: move;
    color: white;
    font-size: 12px;
    z-index: 10;
  }
  .estacion-marker:hover {
    background-color: #0056b3;
    transform: scale(1.1);
  }
  .estacion-marker.placed {
    background-color: #28a745;
  }
  .sidebar {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
  }
  .estacion-item {
    cursor: grab;
    padding: 10px;
    margin-bottom: 10px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .estacion-item:hover {
    background-color: #e9ecef;
  }
  .estacion-item.used {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .btn-guardar {
    width: 100%;
    margin-top: 20px;
  }
  .controls {
    margin-bottom: 20px;
  }
  .control-group {
    margin-bottom: 10px;
  }
  .control-group label {
    display: block;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    margin-bottom: 5px;
  }
  .control-group input[type="range"] {
    width: 100%;
  }
  .controls.estacion-controls-hidden {
    display: none;
  }
}
@layer components {
  .plan-viewer__edit-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .plan-viewer__back-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .plano-header {
    margin-bottom: 2rem;
  }
  .plano-header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  .estaciones-count {
    color: #6c757d;
    font-size: 0.95rem;
    margin-top: 0.5rem;
  }
  .plano-container {
    position: relative;
    margin: 2rem 0;
    min-height: 400px;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    overflow: hidden;
    background: #f8f9fa;
  }
  .plano-imagen {
    width: 100%;
    height: auto;
    display: block;
  }
  .plano-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    background: #e9ecef;
    color: #6c757d;
    font-size: 1.2rem;
  }
  .estacion-marker {
    position: absolute;
    cursor: pointer;
  }
  .estacion-icon {
    color: #dc3545;
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  }
  .estacion-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    display: none;
    margin-bottom: 0.5rem;
  }
  .estacion-marker:hover .estacion-tooltip {
    display: block;
  }
  .plano-info {
    margin-top: 2rem;
    padding: 1.5rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
  }
  .plano-info h5 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
  }
  .plano-header__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .plano-header__wrapper {
    padding-block: calc(var(--spacing) * 4);
  }
  .plano-header__wrapper-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .plano-info__table {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .plano-info__table tbody tr:nth-child(odd) {
    background-color: var(--color-gray-50);
  }
}
@layer components {
  .alert-filters {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .alert-filters__title {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .alert-filters__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .alert-filters__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .alert-filters__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .alert-filters__btn-reset {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .alert-filters__wrapper {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
  }
}
@layer components;
@layer components {
  .alert-pagination__summary {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .pagination {
    justify-content: center;
  }
  .pagination__wrapper {
    text-align: center;
    color: var(--color-gray-500);
  }
}
@layer components {
  .alert-summary {
    margin-bottom: calc(var(--spacing) * 4);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .alert-summary__card {
    flex: 1;
  }
  .alert-summary__severity-card {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .alert-summary__severity-card--critical {
    border-color: #dc3545;
  }
  .alert-summary__severity-card--high {
    border-color: #ffc107;
  }
  .alert-summary__severity-card--medium {
    border-color: #0dcaf0;
  }
  .alert-summary__severity-card--low {
    border-color: #6c757d;
  }
  .alert-summary__severity-body {
    padding: calc(var(--spacing) * 4);
    text-align: center;
  }
  .alert-summary__value {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .alert-summary__value--critical {
    color: #dc3545;
  }
  .alert-summary__value--high {
    color: #ffc107;
  }
  .alert-summary__value--medium {
    color: #0dcaf0;
  }
  .alert-summary__value--low {
    color: #6c757d;
  }
  .alert-summary__label {
    color: #6b7280;
  }
}
@layer components {
  .alert-table__badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .alert-table__badge--tipo {
    background-color: #6c757d;
  }
  .alert-table__badge--severidad-danger {
    background-color: #dc3545;
  }
  .alert-table__badge--severidad-warning {
    background-color: #ffc107;
    color: #212529;
  }
  .alert-table__badge--severidad-info {
    background-color: #0dcaf0;
    color: #212529;
  }
  .alert-table__badge--severidad-secondary {
    background-color: #6c757d;
  }
  .alert-table__badge--estado-danger {
    background-color: #dc3545;
  }
  .alert-table__badge--estado-warning {
    background-color: #ffc107;
    color: #212529;
  }
  .alert-table__badge--estado-success {
    background-color: #198754;
  }
  .alert-table__badge--estado-secondary {
    background-color: #6c757d;
  }
  .alert-table {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .alert-table__title {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .alert-table__title-icon {
    margin-inline-end: calc(var(--spacing) * 2);
  }
  .alert-table__body {
    padding: calc(var(--spacing) * 0);
  }
  .alert-table__empty-wrapper {
    color: var(--color-gray-500);
  }
  .alert-table__empty {
    padding: calc(var(--spacing) * 4);
    text-align: center;
  }
  .alert-table__empty-icon {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: 3em;
  }
  .alert-table__empty-text {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .alert-table__responsive {
    overflow-x: auto;
  }
  .alert-table__thead {
    background-color: #f8f9fa;
  }
  .alert-table__value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .alert-table__value--danger {
    color: var(--color-red-600);
  }
  .alert-table__value--ok {
    color: var(--color-green-600);
  }
  .alert-table__expected {
    display: block;
    color: var(--color-gray-500);
  }
  .alert-table__btn-acknowledge {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .alert-table__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .alert-table__content {
    width: 100%;
  }
  .alert-table__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  }
  .alert-table__row--critica {
    background-color: #f8d7da;
  }
  .alert-table__row--alta {
    background-color: #fff3cd;
  }
  .alert-table__th-checkbox {
    width: 40px;
  }
  .alert-table__checkbox {
    cursor: pointer;
  }
  .alert-table__actions {
    display: inline-flex;
    gap: calc(var(--spacing) * 1);
  }
  .alert-table__action-btn {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .alert-table__action-btn--view {
    border-color: var(--color-blue-500);
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .alert-table__action-btn--acknowledge {
    border-color: var(--color-green-500);
    color: var(--color-green-600);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
  }
}
@layer components {
  .sensor-alerts {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .sensor-alerts__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .sensor-alerts__content {
    margin-inline: calc(var(--spacing) * -3);
    display: flex;
    flex-wrap: wrap;
  }
  .sensor-alerts__header-card {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .sensor-alerts__back-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .sensor-alerts__chart-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .sensor-alerts__col-full {
    width: 100%;
  }
  .sensor-alerts__heading {
    margin-bottom: 0;
  }
  .sensor-alerts__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .sensor-alerts__wrapper-1 {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .text-dark {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-gray-100);
  }
  .sensor-alerts__header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-gray-100);
  }
  .sensor-alerts__badge-count {
    margin-left: calc(var(--spacing) * 1);
    color: var(--color-gray-900);
  }
  .sensor-alerts__badge-tipo {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    background-color: #212529;
  }
}
@layer components {
  .sensor-compare__container {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .sensor-compare__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .sensor-compare__row {
    margin-inline: calc(var(--spacing) * -3);
    display: flex;
    flex-wrap: wrap;
  }
  .sensor-compare__col-full {
    width: 100%;
  }
  .sensor-compare__card {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .sensor-compare__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .sensor-compare__card-body {
    padding: calc(var(--spacing) * 4);
  }
  .sensor-compare__form {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 4);
  }
  .sensor-compare__field {
    min-width: calc(var(--spacing) * 50);
    flex: 1;
  }
  .sensor-compare__field--double {
    flex: 2;
  }
  .sensor-compare__field--wide {
    min-width: calc(var(--spacing) * 62.5);
    flex: 1;
  }
  .sensor-compare__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .sensor-compare__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .sensor-compare__columns {
    margin-inline: calc(var(--spacing) * -3);
    display: flex;
    flex-wrap: wrap;
  }
  .sensor-compare__sensor-label {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .sensor-compare__sensor-station {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .sensor-compare__empty-text {
    color: var(--color-gray-500);
    margin-bottom: 0;
  }
  .sensor-compare__heading {
    margin-bottom: 0;
  }
  .sensor-compare__thead {
    background-color: #f8f9fa;
  }
  .sensor-compare__th--right {
    text-align: right;
  }
  .sensor-compare__badge-tipo {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    background-color: #6c757d;
  }
  .sensor-compare__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
  }
  .sensor-compare__table > tbody > tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.05);
  }
  .sensor-compare__counter-badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .sensor-compare__actions {
    margin-top: calc(var(--spacing) * 2);
  }
  .sensor-compare__btn-compare {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .sensor-compare__btn-clear {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .sensor-compare__chart-body {
    padding: calc(var(--spacing) * 4);
  }
  .sensor-compare__chart-info {
    margin-top: calc(var(--spacing) * 2);
    text-align: center;
  }
  .sensor-compare__chart-info-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .sensor-compare__legend-content {
    margin-inline: calc(var(--spacing) * -3);
    display: flex;
    flex-wrap: wrap;
  }
  .sensor-compare__legend-col {
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      width: calc(1/3 * 100%);
    }
  }
  .sensor-compare__scrollable {
    overflow-x: auto;
  }
  .sensor-compare__correlation-body {
    padding: calc(var(--spacing) * 4);
  }
  .sensor-compare__correlation-note {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .sensor-compare__footer-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .sensor-compare__btn-back {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .sensor-compare__btn-export {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .sensor-compare__sensor-box {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 2);
  }
  .sensor-compare__mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .sensor-list-container {
    max-height: 300px;
    overflow-y: auto;
  }
  .sensor-selected-container {
    min-height: 100px;
  }
  .comparar-chart-hidden {
    display: none;
  }
  .chart-container {
    position: relative;
    height: 450px;
  }
  .bg-blue-600 {
    color: var(--color-white);
  }
  .bg-gray-600 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-compare__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-compare__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-compare__item-2 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-compare__item-3 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-compare__item-4 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-compare__item-5 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-compare__item-6 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-compare__item-7 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-compare__item-8 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-compare__item-9 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-compare__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sensor-compare__wrapper-1 {
    padding: calc(var(--spacing) * 0);
  }
  .sensor-compare__header-primary {
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-white);
  }
}
@layer components {
  .sensor-sheet {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .sensor-sheet__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .sensor-sheet__row {
    margin-inline: calc(var(--spacing) * -3);
    display: flex;
    flex-wrap: wrap;
  }
  .sensor-sheet__col-full {
    width: 100%;
  }
  .sensor-sheet__card {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .sensor-sheet__col-half {
    min-width: calc(var(--spacing) * 62.5);
    flex: 1;
  }
  .sensor-sheet__dl {
    margin-inline: calc(var(--spacing) * -3);
    margin-bottom: calc(var(--spacing) * 0);
    display: flex;
    flex-wrap: wrap;
  }
  .sensor-sheet__section-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .sensor-sheet__card-body {
    padding: calc(var(--spacing) * 4);
  }
  .sensor-sheet__table-wrapper {
    overflow-x: auto;
  }
  .sensor-sheet__empty-text {
    margin-bottom: calc(var(--spacing) * 0);
    color: var(--color-gray-500);
  }
  .sensor-sheet__count-badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
  }
  .sensor-sheet__meta-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .sensor-sheet__btn--primary {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .sensor-sheet__btn--warning {
    border-radius: var(--radius-lg);
    background-color: var(--color-yellow-500);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-600);
      }
    }
  }
  .sensor-sheet__btn--back {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .grafica-historico-container {
    height: 300px;
  }
  .sensor-detail__heading {
    margin-bottom: 0;
  }
  .sensor-sheet__primary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    background-color: #0d6efd;
    color: #ffffff;
  }
  .sensor-sheet__estado-badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .sensor-sheet__estado-badge--success {
    background-color: #198754;
    color: #ffffff;
  }
  .sensor-sheet__estado-badge--warning {
    background-color: #ffc107;
    color: #212529;
  }
  .sensor-sheet__estado-badge--secondary {
    background-color: #6c757d;
    color: #ffffff;
  }
  .sensor-sheet__table--striped {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }
  .sensor-sheet__table--striped > tbody > tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.05);
  }
  .sensor-sheet__table--striped > thead {
    background-color: #f8f9fa;
  }
  .bg-blue-600 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-white);
  }
  .sensor-sheet__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-sheet__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-sheet__item-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-sheet__item-3 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-sheet__item-4 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-sheet__item-5 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-sheet__item-6 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-sheet__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .sensor-sheet__wrapper-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sensor-sheet__wrapper-2 {
    display: flex;
    justify-content: space-between;
  }
  .sensor-sheet__wrapper-3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sensor-sheet__wrapper-4 {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .sensor-alert-modal {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sensor-alert-modal--hidden {
    display: none;
  }
  .sensor-alert-modal__backdrop {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .sensor-alert-modal__dialog {
    position: relative;
    z-index: 10;
    margin-inline: calc(var(--spacing) * 4);
    width: 100%;
    max-width: var(--container-lg);
  }
  .sensor-alert-modal__dialog--lg {
    max-width: var(--container-2xl);
  }
  .sensor-alert-modal__content {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .sensor-alert-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .sensor-alert-modal__title {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .sensor-alert-modal__close-btn {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
    background: none;
    border: none;
    cursor: pointer;
  }
  .sensor-alert-modal__body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .sensor-alert-modal__center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: calc(var(--spacing) * 8);
  }
  .sensor-alert-modal__footer {
    display: flex;
    justify-content: flex-end;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .sensor-alert-modal__btn-secondary {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
    border: none;
    cursor: pointer;
  }
}
@layer components {
  .sensor-chart {
    padding: calc(var(--spacing) * 8);
  }
  .sensor-chart__breadcrumb-muted {
    color: var(--color-gray-600);
  }
  .sensor-chart__breadcrumb-active {
    color: var(--color-gray-900);
  }
  .sensor-chart__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-white);
  }
  .sensor-chart__btn-group {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .sensor-chart__submit-btn {
    width: 100%;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .sensor-chart__col-end {
    display: flex;
    align-items: flex-end;
  }
  .sensor-chart__btn--secondary {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .sensor-chart__btn--export-csv {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .sensor-chart__btn--export-png {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-500);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-600);
      }
    }
  }
  .sensor-chart__heading {
    margin-bottom: 0;
  }
  .sensor-chart__subheading {
    margin-bottom: 0;
  }
  .sensor-chart__quick-range {
    margin-top: 0.75rem;
  }
  .sensor-chart__data-summary {
    text-align: center;
    margin-top: 0.75rem;
    color: #6b7280;
  }
  .sensor-chart__stat-card {
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
  }
  .sensor-chart__stat-value {
    margin-bottom: 0;
  }
  .sensor-chart__stat-value--min {
    color: #3b82f6;
  }
  .sensor-chart__stat-value--max {
    color: #22c55e;
  }
  .sensor-chart__stat-value--avg {
    color: #06b6d4;
  }
  .sensor-chart__stat-value--median {
    color: #6b7280;
  }
  .sensor-chart__stat-value--stddev {
    color: #eab308;
  }
  .sensor-chart__stat-value--total {
    color: #1f2937;
  }
  .sensor-chart__stat-label {
    color: #6b7280;
  }
  .sensor-chart__empty-stats {
    color: #6b7280;
    margin-bottom: 0;
  }
  .chart-container {
    position: relative;
    height: 400px;
  }
  .sensor-chart__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-chart__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-chart__item-2 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-chart__item-3 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-chart__item-4 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-chart__item-5 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-chart__item-6 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-chart__item-7 {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-chart__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .sensor-chart__wrapper-1 {
    padding-block: calc(var(--spacing) * 4);
  }
  .sensor-chart__wrapper-2 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .sensor-chart__form--hidden {
    display: none;
  }
  .sensor-chart__wrapper-3 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .sensor-chart__wrapper-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .sensor-chart__wrapper-5 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .sensor-chart__wrapper-6 {
    text-align: center;
  }
  .sensor-chart__wrapper-7 {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .sensor-chart__badge {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
  }
  .sensor-chart__col-full {
    width: 100%;
  }
  .sensor-chart__stat-col {
    width: 100%;
    padding-inline: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      width: calc(1/6 * 100%);
    }
  }
  .text-dark {
    background-color: var(--color-gray-100);
  }
}
@layer components {
  .sensor-extended {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .sensor-extended__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .sensor-extended__row {
    margin-inline: calc(var(--spacing) * -3);
    display: flex;
    flex-wrap: wrap;
  }
  .sensor-extended__col {
    min-width: calc(var(--spacing) * 62.5);
    flex: 1;
  }
  .sensor-extended__card {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .sensor-extended__section-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .sensor-extended__card-body {
    padding: calc(var(--spacing) * 4);
  }
  .sensor-extended__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .sensor-extended__empty-message {
    margin-bottom: calc(var(--spacing) * 0);
    color: var(--color-gray-500);
  }
  .sensor-extended__btn--primary {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .sensor-extended__btn--warning {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-yellow-500);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-600);
      }
    }
  }
  .sensor-extended__btn--secondary {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .sensor-extended__col-full {
    width: 100%;
  }
  .sensor-extended__heading {
    margin-bottom: 0;
  }
  .bg-blue-600 {
    color: var(--color-white);
  }
  .sensor-extended__header-primary {
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .sensor-extended__badge {
    display: inline-block;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .sensor-extended__badge--success {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .sensor-extended__badge--warning {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .sensor-extended__badge--danger {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .sensor-extended__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .sensor-extended__wrapper-1 {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .sensor-extended__dt {
    width: 100%;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    @media (width >= 40rem) {
      width: calc(1/3 * 100%);
    }
  }
  .sensor-extended__dd {
    margin-bottom: calc(var(--spacing) * 2);
    width: 100%;
    @media (width >= 40rem) {
      width: calc(2/3 * 100%);
    }
  }
  .sensor-extended__dt-wide {
    width: 100%;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    @media (width >= 40rem) {
      width: calc(5/12 * 100%);
    }
  }
  .sensor-extended__dd-narrow {
    margin-bottom: calc(var(--spacing) * 2);
    width: 100%;
    @media (width >= 40rem) {
      width: calc(7/12 * 100%);
    }
  }
}
@layer components {
  .sensor-not-found__wrapper {
    padding: calc(var(--spacing) * 8);
  }
  .sensor-not-found__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .sensor-not-found__breadcrumb-sep {
    color: var(--color-gray-400);
  }
  .sensor-not-found__breadcrumb-text--secondary {
    color: var(--color-gray-600);
  }
  .sensor-not-found__breadcrumb-text--current {
    color: var(--color-gray-900);
  }
  .sensor-not-found__wrapper-1 {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 5);
  }
  .sensor-not-found__wrapper-2 {
    display: flex;
    justify-content: center;
  }
  .sensor-not-found__col {
    width: 100%;
    max-width: var(--container-3xl);
  }
  .sensor-not-found__card--danger {
    margin-bottom: calc(var(--spacing) * 4);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-red-500);
    background-color: var(--color-white);
  }
  .sensor-not-found__wrapper-3 {
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    color: var(--color-white);
  }
  .sensor-not-found__heading {
    margin-bottom: 0;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .sensor-not-found__wrapper-4 {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 5);
    text-align: center;
  }
  .sensor-not-found__icon-large {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .sensor-not-found__error-title {
    color: #dc3545;
    margin-bottom: 0.75rem;
  }
  .sensor-not-found__error-desc {
    color: #6b7280;
    font-size: 1.125rem;
    margin-bottom: 1rem;
  }
  .sensor-not-found__wrapper-5 {
    display: inline-block;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .sensor-not-found__wrapper-6 {
    margin-top: calc(var(--spacing) * 4);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
  }
  .sensor-not-found__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .sensor-not-found__card-body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .sensor-not-found__subheading {
    margin-bottom: 0;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .sensor-not-found__suggestion-list {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .sensor-not-found__text, .sensor-not-found__text-1, .sensor-not-found__text-2 {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
  }
  .sensor-not-found__icon--primary {
    flex-shrink: 0;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-blue-600);
  }
  .sensor-not-found__icon--info {
    flex-shrink: 0;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-cyan-500);
  }
  .sensor-not-found__icon--secondary {
    flex-shrink: 0;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-gray-600);
  }
  .sensor-not-found__hint-text {
    margin-bottom: 0;
    color: #6b7280;
    font-size: 0.875rem;
  }
  .sensor-not-found__link-btn--primary {
    margin-left: auto;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-500);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .sensor-not-found__link-btn--info {
    margin-left: auto;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-cyan-500);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-cyan-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-cyan-50);
      }
    }
  }
  .sensor-not-found__link-btn--disabled {
    margin-left: auto;
    cursor: not-allowed;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-400);
  }
  .sensor-not-found__wrapper-7 {
    margin-top: calc(var(--spacing) * 4);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
  }
  .sensor-not-found__wrapper-8 {
    padding: calc(var(--spacing) * 0);
  }
  .sensor-not-found__table-wrap {
    overflow-x: auto;
  }
  .sensor-not-found__table {
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    border-collapse: collapse;
  }
  .sensor-not-found__table th, .sensor-not-found__table td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
  }
  .sensor-not-found__table tbody tr:hover {
    background-color: var(--color-gray-50);
  }
  .sensor-not-found__thead {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
  }
  .sensor-not-found__thead th {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-600);
    text-transform: uppercase;
  }
  .sensor-not-found__view-btn {
    border-radius: 0.25rem;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .sensor-not-found__actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing) * 4);
  }
  .sensor-not-found__action-btn--primary {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .sensor-not-found__action-btn--secondary {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .sensor-not-found__btn-icon {
    margin-right: calc(var(--spacing) * 1);
  }
  .sensor-not-found__footer {
    margin-top: calc(var(--spacing) * 6);
    text-align: center;
  }
  .sensor-not-found__footer-text {
    color: #6b7280;
  }
  .sensor-not-found__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-not-found__item-1 {
    color: var(--color-gray-500);
  }
  .sensor-not-found__item-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .sensor-not-found__item-3 {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .astate-list__page {
    padding: calc(var(--spacing) * 8);
  }
  .astate-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .astate-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .astate-list__subtitle {
    color: var(--color-gray-600);
  }
  .astate-list__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .astate-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .astate-list__create-btn:hover {
    filter: brightness(0.9);
  }
  .astate-list__create-btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .astate-list__filters {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-left: 3px solid var(--module-color, #e5e7eb);
    background-color: var(--module-color-bg, white);
  }
  .astate-list__filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
  }
  .astate-list__filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .astate-list__filter-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .astate-list__filter-input {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .astate-list__filter-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .astate-list__filter-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #e5e7eb);
    color: #fff;
  }
  .astate-list__filter-btn:hover {
    filter: brightness(0.9);
  }
  .astate-list__filter-btn--secondary {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .astate-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .astate-list__count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .astate-list__card {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .astate-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .astate-list__thead {
    background-color: var(--color-gray-50);
  }
  .astate-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .astate-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .astate-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .astate-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .astate-list__td-order {
    cursor: move;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .astate-list__drag-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .astate-list__td-code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .astate-list__td-name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .astate-list__td-color {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .astate-list__td-actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .astate-list__action-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .astate-list__action-link {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .astate-list__action-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .astate-list__td-empty {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .color-badge {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    border-radius: 0.25rem;
    background-color: #ccc;
  }
  .astate-list__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .astate-list__wrapper-1 {
    margin-inline: auto;
  }
}
@layer components {
  .astate-detail {
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--spacing) * 8);
  }
  .astate-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .astate-detail__breadcrumb-link {
    color: var(--color-blue-600);
    text-decoration-line: none;
  }
  .astate-detail__breadcrumb-link:hover {
    text-decoration-line: underline;
  }
  .astate-detail__breadcrumb-sep {
    margin: 0 0.25rem;
  }
  .astate-detail__breadcrumb-current {
    color: #374151;
  }
  .astate-detail__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .astate-detail__title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    margin: 0;
  }
  .astate-detail__btn--back {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    text-decoration-line: none;
  }
  .astate-detail__btn--back:hover {
    background-color: var(--color-gray-200);
  }
  .astate-detail__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .astate-detail__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .astate-detail__card {
    margin-bottom: calc(var(--spacing) * 6);
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    border-radius: 0.75rem;
  }
  .astate-detail__section {
    border: none;
    padding: 1.5rem;
    margin: 0;
  }
  .astate-detail__section + .astate-detail__section {
    border-top: 1px solid #e5e7eb;
  }
  .astate-detail__section-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .astate-detail__section-icon {
    color: var(--color-gray-400);
    font-size: 0.875rem;
  }
  .astate-detail__fields {
    display: grid;
    gap: 1.25rem;
  }
  .astate-detail__fields--2col {
    grid-template-columns: repeat(2, 1fr);
  }
  .astate-detail__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .astate-detail__label-required {
    color: var(--color-red-500);
  }
  .astate-detail__value {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    margin: 0;
  }
  .astate-detail__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .astate-detail__input:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .astate-detail__card-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
  }
  .astate-detail__btn--confirm {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    padding: 0.5rem 1rem;
    background: #2563eb;
    border: none;
    border-radius: 0.375rem;
  }
  .astate-detail__btn--confirm:hover {
    background-color: var(--color-blue-700);
  }
  .astate-detail__btn--cancel {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    text-decoration: none;
    color: #374151;
  }
  .astate-detail__btn--cancel:hover {
    background-color: var(--color-gray-200);
  }
  .astate-detail__toggle-field {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .astate-detail__toggle-label {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .astate-detail__toggle-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .astate-detail__toggle-help {
    margin-top: calc(var(--spacing) * 1);
    margin-left: calc(var(--spacing) * 6);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
    margin-bottom: 0;
  }
  .astate-detail__checkbox {
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
    width: 1rem;
    height: 1rem;
  }
  .astate-detail__checkbox:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
  }
  @media (max-width: 768px) {
    .astate-detail__fields--2col {
      grid-template-columns: 1fr;
    }
    .astate-detail__header {
      flex-direction: column;
      gap: 1rem;
    }
  }
}
@layer components {
  .strategy-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .strategy-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .strategy-list__breadcrumb-label--muted {
    color: var(--color-gray-600);
  }
  .strategy-list__breadcrumb-label--current {
    color: var(--color-gray-900);
  }
  .strategy-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .strategy-list__subtitle {
    color: var(--color-gray-600);
  }
  .strategy-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .strategy-list__create-btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .strategy-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .strategy-list__count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .strategy-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .strategy-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .strategy-list__thead {
    background-color: var(--color-gray-50);
  }
  .strategy-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .strategy-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .strategy-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .strategy-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .strategy-list__td-code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .strategy-list__td-name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .strategy-list__td-event {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .strategy-list__td-priority {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .strategy-list__td-status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .strategy-list__td-actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .strategy-list__badge-priority {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
  }
  .strategy-list__badge--active {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .strategy-list__badge--inactive {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .strategy-list__action-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .strategy-list__action-link {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .strategy-list__action-link--simulate {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-purple-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-purple-50);
      }
    }
  }
  .strategy-list__action-link--clone {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-green-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
  }
  .strategy-list__action-link--danger {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .strategy-list__action-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .strategy-list__modal-overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
    z-index: 1300;
    display: none;
  }
  .strategy-list__modal-overlay.strategy-list__modal-overlay--visible {
    display: flex;
  }
  .strategy-list__modal {
    width: calc(var(--spacing) * 96);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
  }
  .strategy-list__modal-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .strategy-list__modal-field {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .strategy-list__modal-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .strategy-list__modal-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .strategy-list__modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .strategy-list__modal-cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
  }
  .strategy-list__modal-submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
  }
  .strategy-list__empty-td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .strategy-list__wrapper {
    margin-inline: auto;
  }
}
@layer components {
  .strategy-detail {
    padding: calc(var(--spacing) * 8);
    max-width: 1100px;
  }
  .strategy-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .strategy-detail__breadcrumb-link {
    color: var(--color-blue-600);
    text-decoration-line: none;
  }
  .strategy-detail__breadcrumb-link:hover {
    text-decoration-line: underline;
  }
  .strategy-detail__breadcrumb-sep {
    margin: 0 0.25rem;
  }
  .strategy-detail__breadcrumb-current {
    color: #374151;
  }
  .strategy-detail__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .strategy-detail__title {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    font-family: 'Space Grotesk', sans-serif;
    margin: 0;
  }
  .strategy-detail__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
    margin: 0;
  }
  .strategy-detail__btn--back {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    text-decoration-line: none;
  }
  .strategy-detail__btn--back:hover {
    background-color: var(--color-gray-200);
  }
  .strategy-detail__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .strategy-detail__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .strategy-detail__card {
    margin-bottom: calc(var(--spacing) * 6);
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    border-radius: 0.75rem;
  }
  .strategy-detail__section {
    border: none;
    padding: 1.5rem;
    margin: 0;
  }
  .strategy-detail__section-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .strategy-detail__section-icon {
    color: var(--color-gray-400);
    font-size: 0.875rem;
  }
  .strategy-detail__fields {
    display: grid;
    gap: 1.25rem;
  }
  .strategy-detail__fields--2col {
    grid-template-columns: repeat(2, 1fr);
  }
  .strategy-detail__field--fullwidth {
    grid-column: 1 / -1;
    margin-top: calc(var(--spacing) * 6);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-100);
    padding-top: calc(var(--spacing) * 4);
  }
  .strategy-detail__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .strategy-detail__label-required {
    color: var(--color-red-500);
  }
  .strategy-detail__hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .strategy-detail__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .strategy-detail__input:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  input.strategy-detail__input--disabled, select.strategy-detail__input--disabled {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    background-color: #f3f4f6 !important;
    color: #6b7280 !important;
    font-size: 0.875rem !important;
    cursor: not-allowed;
  }
  input.strategy-detail__input--readonly {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    background-color: #f9fafb !important;
    color: #6b7280 !important;
    font-size: 0.875rem !important;
    cursor: default;
  }
  .strategy-detail__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .strategy-detail__select:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .strategy-detail__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .strategy-detail__textarea:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .strategy-detail__card-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
  }
  .strategy-detail__btn--confirm {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    background: #2563eb;
    border: none;
    border-radius: 0.375rem;
  }
  .strategy-detail__btn--confirm:hover {
    background-color: var(--color-blue-700);
  }
  .strategy-detail__btn--cancel {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    text-decoration: none;
    color: #374151;
  }
  .strategy-detail__btn--cancel:hover {
    background-color: var(--color-gray-200);
  }
  .strategy-detail__tabs-nav {
    margin-bottom: calc(var(--spacing) * 6);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
  }
  .strategy-detail__tabs-list {
    display: flex;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .strategy-detail__tab-btn--active {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: var(--color-blue-500);
    padding-inline: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
  }
  .strategy-detail__tab-btn--inactive {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
  .strategy-detail__panel {
    display: none;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .strategy-detail__dsl-info {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .strategy-detail__dsl-description {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .strategy-detail__dsl-examples {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .strategy-detail__checkbox-label {
    display: flex;
    align-items: center;
  }
  .strategy-detail__checkbox {
    margin-right: calc(var(--spacing) * 2);
  }
  .strategy-detail__checkbox-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .strategy-detail__channels-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .strategy-detail__channel-item {
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding: calc(var(--spacing) * 4);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .strategy-detail__channel-checkbox {
    margin-right: calc(var(--spacing) * 3);
  }
  .strategy-detail__channel-icon {
    margin-right: calc(var(--spacing) * 3);
    color: var(--color-gray-400);
  }
  .strategy-detail__channel-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .strategy-detail__form-footer {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    justify-content: flex-end;
  }
  .strategy-detail__bottom-bar {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .strategy-detail__back-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-800);
      }
    }
  }
  .strategy-detail__back-icon {
    margin-right: calc(var(--spacing) * 2);
  }
  .strategy-detail__btn-validate {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .strategy-detail__validation-result {
    margin-top: calc(var(--spacing) * 4);
    display: none;
  }
  .strategy-detail__badge--family {
    margin-right: calc(var(--spacing) * 2);
    display: inline-block;
    border-radius: 0.25rem;
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .strategy-detail__badge--override {
    margin-left: calc(var(--spacing) * 1);
    display: inline-block;
    border-radius: 0.25rem;
    background-color: var(--color-amber-100);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-amber-800);
  }
  .strategy-detail__panel--hidden {
    display: none !important;
  }
  .strategy-detail__panel--visible {
    display: block !important;
  }
  .strategy-detail__sm-container {
    margin-top: calc(var(--spacing) * 2);
  }
  .strategy-detail__sm-scroll {
    overflow-x: auto;
  }
  .strategy-detail__sm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .strategy-detail__sm-thead-row {
    background-color: var(--color-gray-50);
  }
  .strategy-detail__sm-th {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .strategy-detail__sm-th--w60 {
    width: 60px;
  }
  .strategy-detail__sm-th--w50 {
    width: 50px;
  }
  .strategy-detail__sm-th--w40 {
    width: 40px;
  }
  .strategy-detail__sm-row {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .strategy-detail__sm-td {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .strategy-detail__sm-td--center {
    text-align: center;
  }
  .strategy-detail__sm-input {
    width: 100%;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .strategy-detail__sm-input:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .strategy-detail__sm-input--narrow {
    width: calc(var(--spacing) * 16);
  }
  .strategy-detail__sm-color {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 10);
    cursor: pointer;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
  }
  .strategy-detail__sm-check {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    cursor: pointer;
  }
  .strategy-detail__sm-transitions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1);
  }
  .strategy-detail__sm-transition-label {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .strategy-detail__sm-transition-check {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
    cursor: pointer;
  }
  .strategy-detail__sm-transition-name {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .strategy-detail__sm-btn-delete {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-500);
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
    background: none;
    border: none;
  }
  .strategy-detail__sm-footer {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .strategy-detail__sm-btn-add {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
    background: none;
    border: none;
  }
  .strategy-detail__sm-count {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .strategy-detail__sm-pills {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1);
  }
  .strategy-detail__sm-pill {
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
    background: none;
  }
  .strategy-detail__sm-pill:hover {
    border-color: var(--color-gray-400);
    color: var(--color-gray-700);
  }
  .strategy-detail__sm-pill--active {
    border-color: transparent;
    color: var(--color-white);
  }
  .strategy-detail__um-container {
    margin-top: calc(var(--spacing) * 2);
  }
  .strategy-detail__um-scroll {
    overflow-x: auto;
  }
  .strategy-detail__um-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .strategy-detail__um-thead-row {
    background-color: var(--color-gray-50);
  }
  .strategy-detail__um-th {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .strategy-detail__um-th--w80 {
    width: 80px;
  }
  .strategy-detail__um-th--w70 {
    width: 70px;
  }
  .strategy-detail__um-th--w40 {
    width: 40px;
  }
  .strategy-detail__um-row {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .strategy-detail__um-td {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    vertical-align: top;
  }
  .strategy-detail__um-td--center {
    text-align: center;
  }
  .strategy-detail__um-input {
    width: 100%;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .strategy-detail__um-input:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .strategy-detail__um-input--field {
    width: calc(var(--spacing) * 24);
  }
  .strategy-detail__um-input--value {
    width: calc(var(--spacing) * 20);
  }
  .strategy-detail__um-input--narrow {
    width: calc(var(--spacing) * 16);
  }
  .strategy-detail__um-select {
    width: 100%;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .strategy-detail__um-select:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .strategy-detail__um-select--op {
    width: calc(var(--spacing) * 16);
  }
  .strategy-detail__um-conditions {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .strategy-detail__um-condition-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .strategy-detail__um-btn-remove-cond {
    cursor: pointer;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-600);
      }
    }
    background: none;
    border: none;
    padding: 2px 4px;
  }
  .strategy-detail__um-btn-add-cond {
    margin-top: calc(var(--spacing) * 1);
    cursor: pointer;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
    background: none;
    border: none;
  }
  .strategy-detail__um-btn-delete {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-500);
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
    background: none;
    border: none;
  }
  .strategy-detail__um-footer {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .strategy-detail__um-btn-add {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
    background: none;
    border: none;
  }
  .strategy-detail__um-count {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .strategy-detail__esc-container {
    margin-top: calc(var(--spacing) * 2);
  }
  .strategy-detail__esc-scroll {
    overflow-x: auto;
  }
  .strategy-detail__esc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .strategy-detail__esc-thead-row {
    background-color: var(--color-gray-50);
  }
  .strategy-detail__esc-th {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .strategy-detail__esc-th--w130 {
    width: 130px;
  }
  .strategy-detail__esc-th--w160 {
    width: 160px;
  }
  .strategy-detail__esc-th--w40 {
    width: 40px;
  }
  .strategy-detail__esc-row {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .strategy-detail__esc-td {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .strategy-detail__esc-td--center {
    text-align: center;
  }
  .strategy-detail__esc-input {
    width: 100%;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .strategy-detail__esc-input:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .strategy-detail__esc-input--narrow {
    width: calc(var(--spacing) * 20);
  }
  .strategy-detail__esc-select {
    width: 100%;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .strategy-detail__esc-select:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .strategy-detail__esc-btn-delete {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-500);
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
    background: none;
    border: none;
  }
  .strategy-detail__esc-footer {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .strategy-detail__esc-btn-add {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
    background: none;
    border: none;
  }
  .strategy-detail__esc-count {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  @media (max-width: 768px) {
    .strategy-detail__fields--2col {
      grid-template-columns: 1fr;
    }
    .strategy-detail__header {
      flex-direction: column;
      gap: 1rem;
    }
  }
}
@layer components {
  .strategy-sim {
    padding: calc(var(--spacing) * 8);
    max-width: 1100px;
  }
  .strategy-sim__field {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .strategy-sim__breadcrumb-text {
    color: #6b7280;
  }
  .strategy-sim__breadcrumb-current {
    color: #374151;
  }
  .strategy-sim__inner {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .strategy-sim__header {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .strategy-sim__title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    margin: 0;
  }
  .strategy-sim__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
    margin: 0;
  }
  .strategy-sim__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .strategy-sim__card {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    border-radius: 0.75rem;
  }
  .strategy-sim__card-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin-top: 0;
  }
  .strategy-sim__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .strategy-sim__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    resize: vertical;
  }
  .strategy-sim__textarea:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .strategy-sim__field-hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .strategy-sim__submit {
    margin-top: calc(var(--spacing) * 4);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    background: #2563eb;
    border: none;
    border-radius: 0.375rem;
  }
  .strategy-sim__submit:hover {
    background-color: var(--color-blue-700);
  }
  .strategy-sim__submit-icon {
    font-size: 0.875rem;
  }
  .strategy-sim__condition-box {
    margin-top: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .strategy-sim__condition-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    margin-top: 0;
  }
  .strategy-sim__condition-code {
    display: block;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-800);
    word-break: break-all;
  }
  .strategy-sim__results {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .strategy-sim__result-banner {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
  }
  .strategy-sim__result-banner--success {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
  }
  .strategy-sim__result-banner--failure {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
  }
  .strategy-sim__result-banner-inner {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .strategy-sim__result-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
  }
  .strategy-sim__result-icon--success {
    color: var(--color-green-600);
  }
  .strategy-sim__result-icon--failure {
    color: var(--color-red-600);
  }
  .strategy-sim__result-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin: 0;
  }
  .strategy-sim__result-text--success {
    color: var(--color-green-800);
  }
  .strategy-sim__result-text--failure {
    color: var(--color-red-800);
  }
  .strategy-sim__result-subtext {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    margin-bottom: 0;
  }
  .strategy-sim__result-subtext--success {
    color: var(--color-green-700);
  }
  .strategy-sim__result-subtext--failure {
    color: var(--color-red-700);
  }
  .strategy-sim__section-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .strategy-sim__action-list {
    margin: calc(var(--spacing) * 0);
    list-style-type: none;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding: calc(var(--spacing) * 0);
  }
  .strategy-sim__action-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: 0.25rem;
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .strategy-sim__action-icon {
    color: var(--color-yellow-500);
    font-size: 0.875rem;
  }
  .strategy-sim__action-empty {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
    font-style: italic;
    list-style: none;
  }
  .strategy-sim__channels {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .strategy-sim__channel-badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .strategy-sim__channels-empty {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
    font-style: italic;
  }
  .strategy-sim__empty-state {
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
  }
  .strategy-sim__empty-state-icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 2);
    color: var(--color-gray-300);
    width: 3rem;
    height: 3rem;
  }
  .strategy-sim__back {
    margin-top: calc(var(--spacing) * 6);
  }
  .strategy-sim__back-link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
    text-decoration-line: none;
  }
  .strategy-sim__back-link:hover {
    color: var(--color-gray-800);
  }
  .strategy-sim__back-icon {
    font-size: 0.875rem;
  }
  @media (max-width: 768px) {
    .strategy-sim__grid {
      grid-template-columns: 1fr;
    }
  }
}
@layer components {
  .severity-list__page {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .severity-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .severity-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .severity-list__subtitle {
    color: var(--color-gray-600);
  }
  .severity-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .severity-list__create-btn:hover {
    filter: brightness(0.9);
  }
  .severity-list__create-btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .severity-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .severity-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .severity-list__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .severity-list__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .severity-list__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .severity-list__filters {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .severity-list__filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
  }
  .severity-list__filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .severity-list__filter-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .severity-list__filter-input {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .severity-list__filter-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .severity-list__filter-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .severity-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .severity-list__count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .severity-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .severity-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .severity-list__thead {
    background-color: var(--color-gray-50);
  }
  .severity-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .severity-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .severity-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .severity-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .severity-list__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .severity-list__td--code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .severity-list__td--score {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .severity-list__td--status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .severity-list__td--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .severity-list__badge--active {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .severity-list__badge--inactive {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .severity-list__action-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .severity-list__action-link {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .severity-list__action-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .severity-list__no-code {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .severity-list__action-link--danger {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
    border: none;
    background: none;
    cursor: pointer;
  }
  .severity-list__wrapper {
    margin-inline: auto;
  }
  .severity-list__modal--hidden {
    display: none;
  }
  .severity-list__modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .severity-list__modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .severity-list__modal-content {
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    position: relative;
    z-index: 51;
    max-width: 420px;
    width: 90%;
  }
  .severity-list__modal-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .severity-list__modal-text {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .severity-list__modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .severity-list__modal-btn--cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    cursor: pointer;
  }
  .severity-list__modal-btn--confirm {
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
    border: none;
    cursor: pointer;
  }
}
.severity-detail {
  max-width: 900px;
  margin: 0 auto;
  padding: calc(var(--spacing) * 8);
}
.severity-detail__breadcrumb {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
}
.severity-detail__breadcrumb-link {
  color: var(--color-blue-600);
  text-decoration-line: none;
}
.severity-detail__breadcrumb-link:hover {
  text-decoration-line: underline;
}
.severity-detail__breadcrumb-sep {
  margin: 0 0.25rem;
}
.severity-detail__breadcrumb-current {
  color: #374151;
}
.severity-detail__header {
  margin-bottom: calc(var(--spacing) * 6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.severity-detail__title {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  margin: 0;
}
.severity-detail__btn--back {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-700);
  text-decoration-line: none;
}
.severity-detail__btn--back:hover {
  background-color: var(--color-gray-200);
}
.severity-detail__flash--error {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-200);
  background-color: var(--color-red-50);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color-red-800);
}
.severity-detail__flash--success {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-200);
  background-color: var(--color-green-50);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color-green-800);
}
.severity-detail__card {
  margin-bottom: calc(var(--spacing) * 6);
  overflow: hidden;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  border-radius: 0.75rem;
}
.severity-detail__section {
  border: none;
  padding: 0;
  margin: 0;
}
.severity-detail__section-title {
  padding-inline: calc(var(--spacing) * 6);
  padding-top: calc(var(--spacing) * 6);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.severity-detail__section-icon {
  color: var(--color-gray-400);
  font-size: 0.875rem;
}
.severity-detail__fields {
  display: grid;
  gap: 1.25rem;
  padding: 1rem 1.5rem 1.5rem;
}
.severity-detail__fields--3col {
  grid-template-columns: repeat(3, 1fr);
}
.severity-detail__label {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.severity-detail__label-required {
  color: var(--color-red-500);
}
.severity-detail__value {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  margin: 0;
}
.severity-detail__input {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.severity-detail__input:focus {
  border-color: var(--color-blue-500);
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-blue-500);
  outline: none;
}
.severity-detail__card-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}
.severity-detail__btn--confirm {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-white);
  padding: 0.5rem 1rem;
  background: #2563eb;
  border: none;
  border-radius: 0.375rem;
}
.severity-detail__btn--confirm:hover {
  background-color: var(--color-blue-700);
}
.severity-detail__btn--cancel {
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  padding: 0.5rem 1rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  text-decoration: none;
  color: #374151;
}
.severity-detail__btn--cancel:hover {
  background-color: var(--color-gray-200);
}
@media (max-width: 768px) {
  .severity-detail__fields--3col {
    grid-template-columns: 1fr;
  }
  .severity-detail__header {
    flex-direction: column;
    gap: 1rem;
  }
}
@layer components {
  .pref-edit {
    padding: calc(var(--spacing) * 8);
  }
  .pref-edit__field {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .pref-edit__field--last {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .pref-edit__breadcrumb-text--section {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .pref-edit__breadcrumb-text--current {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .pref-edit__content {
    margin-top: calc(var(--spacing) * 6);
  }
  .pref-edit__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .pref-edit__breadcrumb-secondary {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .pref-edit__breadcrumb-secondary-link {
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .pref-edit__breadcrumb-secondary-sep {
    color: var(--color-gray-400);
  }
  .pref-edit__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .pref-edit__subtitle {
    color: var(--color-gray-600);
  }
  .pref-edit__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .pref-edit__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .pref-edit__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .pref-edit__input--disabled {
    width: 100%;
    cursor: not-allowed;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .pref-edit__form-footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 6);
  }
  .pref-edit__btn-cancel {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .pref-edit__btn-save {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .pref-edit__label-required {
    margin-left: calc(var(--spacing) * 0.5);
    color: var(--color-red-500);
  }
}
@layer components {
  .prefs-import {
    max-width: var(--container-2xl);
    padding: calc(var(--spacing) * 8);
  }
  .prefs-import__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .prefs-import__breadcrumb {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .prefs-import__breadcrumb-link {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .prefs-import__breadcrumb-separator {
    margin-inline: calc(var(--spacing) * 2);
  }
  .prefs-import__description {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .prefs-import__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .prefs-import__field {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .prefs-import__label {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .prefs-import__file-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .prefs-import__field-help {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .prefs-import__warning {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-200);
    background-color: var(--color-yellow-50);
    padding: calc(var(--spacing) * 4);
  }
  .prefs-import__warning-inner {
    display: flex;
  }
  .prefs-import__warning-icon-wrap {
    flex-shrink: 0;
  }
  .prefs-import__warning-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    color: var(--color-yellow-400);
  }
  .prefs-import__warning-body {
    margin-left: calc(var(--spacing) * 3);
  }
  .prefs-import__warning-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-yellow-800);
  }
  .prefs-import__warning-text {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-yellow-700);
  }
  .prefs-import__actions {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .prefs-import__btn--cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .prefs-import__btn--submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
}
@layer components {
  .prefs-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .prefs-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .prefs-list__subtitle {
    color: var(--color-gray-600);
  }
  .prefs-list__actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .prefs-list__action-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .prefs-list__action-btn--export {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .prefs-list__action-btn--import {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .prefs-list__action-btn--restore {
    background-color: var(--color-red-600);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .prefs-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .prefs-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .prefs-list__thead {
    background-color: var(--color-gray-50);
  }
  .prefs-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .prefs-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .prefs-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .prefs-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .prefs-list__cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .prefs-list__cell--key {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .prefs-list__cell--type {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .prefs-list__cell--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .prefs-list__row-actions {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .prefs-list__icon-btn--edit {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .prefs-list__icon-btn--module {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .prefs-list__empty-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .prefs-list__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .prefs-list__wrapper-1 {
    margin-inline: auto;
  }
  .prefs-list__modal {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .prefs-list__modal.prefs-list__modal--hidden {
    display: none;
  }
  .prefs-list__modal-overlay {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .prefs-list__modal-content {
    position: relative;
    z-index: 10;
    margin-inline: calc(var(--spacing) * 4);
    width: 100%;
    max-width: var(--container-md);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .prefs-list__modal-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .prefs-list__modal-text {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .prefs-list__modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .prefs-list__modal-btn--cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .prefs-list__modal-btn--confirm {
    border-radius: var(--radius-lg);
    background-color: var(--color-orange-500);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-orange-600);
      }
    }
  }
}
@layer components {
  .module-prefs {
    max-width: var(--container-6xl);
    padding: calc(var(--spacing) * 8);
  }
  .module-prefs__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .module-prefs__breadcrumb {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .module-prefs__breadcrumb-link {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .module-prefs__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 2);
  }
  .module-prefs__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .module-prefs__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .module-prefs__back-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .module-prefs__back-btn i {
    margin-right: calc(var(--spacing) * 2);
  }
  .module-prefs__table-wrapper {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .module-prefs__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .module-prefs__thead {
    background-color: var(--color-gray-50);
  }
  .module-prefs__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .module-prefs__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .module-prefs__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .module-prefs__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .module-prefs__cell--key {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .module-prefs__cell--value {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .module-prefs__cell--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .module-prefs__edit-link {
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .module-prefs__empty-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .module-prefs__wrapper {
    margin-inline: auto;
  }
}
@layer components {
  .rol-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .rol-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .rol-list__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .rol-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .rol-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .rol-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .rol-list__subtitle {
    color: var(--color-gray-600);
  }
  .rol-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .rol-list__create-btn:hover {
    filter: brightness(0.9);
  }
  .rol-list__filters {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .rol-list__filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
  }
  .rol-list__filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .rol-list__filter-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .rol-list__filter-input {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .rol-list__filter-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .rol-list__filter-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .rol-list__counter {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .rol-list__counter-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .rol-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .rol-list__table {
    width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    min-width: 1200px;
  }
  .rol-list__thead {
    background-color: var(--color-gray-50);
  }
  .rol-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .rol-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .rol-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .rol-list__row {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .rol-list__td-code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .rol-list__td-name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .rol-list__td-desc {
    max-width: var(--container-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .rol-list__td-permisos {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .rol-list__badge--count {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .rol-list__td-status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .rol-list__badge--active {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .rol-list__badge--inactive {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-red-800);
  }
  .rol-list__td-actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .rol-list__action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .rol-list__action-link {
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .rol-list__action-link--disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .rol-list__action-link--danger {
    cursor: pointer;
    color: var(--color-red-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
  }
  .rol-list__empty-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .rol-list__wrapper {
    margin-inline: auto;
  }
}
.rol-detail {
  max-width: 1000px;
  margin: 0 auto;
  padding: calc(var(--spacing) * 8);
}
.rol-detail__breadcrumb {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
}
.rol-detail__breadcrumb-link {
  color: var(--color-blue-600);
  text-decoration-line: none;
}
.rol-detail__breadcrumb-link:hover {
  text-decoration-line: underline;
}
.rol-detail__breadcrumb-sep {
  margin: 0 0.25rem;
}
.rol-detail__breadcrumb-current {
  color: #374151;
}
.rol-detail__header {
  margin-bottom: calc(var(--spacing) * 6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.rol-detail__title {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  margin: 0;
}
.rol-detail__btn--back {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-700);
  text-decoration-line: none;
}
.rol-detail__btn--back:hover {
  background-color: var(--color-gray-200);
}
.rol-detail__flash--error {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-200);
  background-color: var(--color-red-50);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color-red-800);
}
.rol-detail__flash--success {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-200);
  background-color: var(--color-green-50);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color-green-800);
}
.rol-detail__card {
  margin-bottom: calc(var(--spacing) * 6);
  overflow: hidden;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  border-radius: 0.75rem;
}
.rol-detail__section {
  border: none;
  padding: 1.5rem;
  margin: 0;
  border-bottom: 1px solid #e5e7eb;
}
.rol-detail__section:last-of-type {
  border-bottom: none;
}
.rol-detail__section-title {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rol-detail__section-icon {
  color: var(--color-gray-400);
  font-size: 0.875rem;
}
.rol-detail__fields {
  display: grid;
  gap: 1.25rem;
}
.rol-detail__fields--2col {
  grid-template-columns: repeat(2, 1fr);
}
.rol-detail__field--fullwidth {
  grid-column: 1 / -1;
}
.rol-detail__label {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.rol-detail__label-required {
  color: var(--color-red-500);
}
.rol-detail__input {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.rol-detail__input:focus {
  border-color: var(--color-blue-500);
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-blue-500);
  outline: none;
}
.rol-detail__input--disabled {
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
}
.rol-detail__textarea {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  box-sizing: border-box;
}
.rol-detail__textarea:focus {
  border-color: var(--color-blue-500);
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-blue-500);
  outline: none;
}
.rol-detail__card-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}
.rol-detail__btn--confirm {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-white);
  padding: 0.5rem 1rem;
  background: #2563eb;
  border: none;
  border-radius: 0.375rem;
}
.rol-detail__btn--confirm:hover {
  background-color: var(--color-blue-700);
}
.rol-detail__btn--cancel {
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  padding: 0.5rem 1rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  text-decoration: none;
  color: #374151;
}
.rol-detail__btn--cancel:hover {
  background-color: var(--color-gray-200);
}
@media (max-width: 768px) {
  .rol-detail__fields--2col {
    grid-template-columns: 1fr;
  }
  .rol-detail__header {
    flex-direction: column;
    gap: 1rem;
  }
}
@layer components {
  .atype-list {
    padding: calc(var(--spacing) * 8);
  }
  .atype-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .atype-list__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .atype-list__breadcrumb-current {
    color: #111827;
  }
  .atype-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .atype-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .atype-list__subtitle {
    color: var(--color-gray-600);
  }
  .atype-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .atype-list__create-btn:hover {
    filter: brightness(0.9);
  }
  .atype-list__create-btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .atype-list__filters {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-left: 3px solid var(--module-color, #e5e7eb);
    background-color: var(--module-color-bg, white);
  }
  .atype-list__filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
  }
  .atype-list__filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .atype-list__filter-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .atype-list__filter-input {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .atype-list__filter-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .atype-list__filter-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #e5e7eb);
    color: #fff;
  }
  .atype-list__filter-btn:hover {
    filter: brightness(0.9);
  }
  .atype-list__filter-btn--secondary {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .atype-list__counter {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .atype-list__counter-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .atype-list__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .atype-list__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .atype-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .atype-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .atype-list__thead {
    background-color: var(--color-gray-50);
  }
  .atype-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .atype-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .atype-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .atype-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .atype-list__td-code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .atype-list__td-name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .atype-list__td-priority {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .atype-list__td-status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .atype-list__badge--active {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .atype-list__badge--inactive {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .atype-list__td-actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .atype-list__action-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .atype-list__action-link {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .atype-list__action-link--danger {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
    border: none;
    background: none;
    cursor: pointer;
  }
  .atype-list__action-link--danger svg {
    color: currentColor;
  }
  .atype-list__action-link--success {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
    color: #16a34a !important;
    border: none;
    background: none;
    cursor: pointer;
  }
  .atype-list__action-link--success svg {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    color: inherit !important;
    stroke: currentColor !important;
  }
  .atype-list__no-code {
    color: var(--color-gray-400);
  }
  .atype-list__empty-cell {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    color: #6b7280;
  }
  .atype-list__empty-state {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .atype-list__wrapper {
    margin-inline: auto;
  }
  .atype-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .atype-list__pagination-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .atype-list__pagination-value {
    font-weight: 500;
  }
  .atype-list__pagination-nav {
    display: flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .atype-list__page-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    text-decoration: none;
  }
  .atype-list__page-btn--active {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .atype-list__modal--hidden {
    display: none;
  }
  .atype-list__modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .atype-list__modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .atype-list__modal-content {
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    position: relative;
    z-index: 51;
    max-width: 420px;
    width: 90%;
  }
  .atype-list__modal-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .atype-list__modal-text {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .atype-list__modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .atype-list__modal-btn--cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    cursor: pointer;
  }
  .atype-list__modal-btn--confirm {
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
    border: none;
    cursor: pointer;
  }
}
@layer components {
  .atype-detail {
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--spacing) * 8);
  }
  .atype-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .atype-detail__breadcrumb-link {
    color: var(--color-blue-600);
    text-decoration-line: none;
  }
  .atype-detail__breadcrumb-link:hover {
    text-decoration-line: underline;
  }
  .atype-detail__breadcrumb-sep {
    margin: 0 0.25rem;
  }
  .atype-detail__breadcrumb-current {
    color: #374151;
  }
  .atype-detail__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .atype-detail__title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    margin: 0;
  }
  .atype-detail__btn--back {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    text-decoration-line: none;
  }
  .atype-detail__btn--back:hover {
    background-color: var(--color-gray-200);
  }
  .atype-detail__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .atype-detail__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .atype-detail__card {
    margin-bottom: calc(var(--spacing) * 6);
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    border-radius: 0.75rem;
  }
  .atype-detail__section {
    border: none;
    padding: 1.5rem;
    margin: 0;
  }
  .atype-detail__section-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .atype-detail__section-icon {
    color: var(--color-gray-400);
    font-size: 0.875rem;
  }
  .atype-detail__fields {
    display: grid;
    gap: 1.25rem;
  }
  .atype-detail__fields--3col {
    grid-template-columns: repeat(3, 1fr);
  }
  .atype-detail__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .atype-detail__label-required {
    color: var(--color-red-500);
  }
  .atype-detail__value {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    margin: 0;
  }
  .atype-detail__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .atype-detail__input:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .atype-detail__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .atype-detail__select:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .atype-detail__card-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
  }
  .atype-detail__btn--confirm {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    padding: 0.5rem 1rem;
    background: #2563eb;
    border: none;
    border-radius: 0.375rem;
  }
  .atype-detail__btn--confirm:hover {
    background-color: var(--color-blue-700);
  }
  .atype-detail__btn--cancel {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    text-decoration: none;
    color: #374151;
  }
  .atype-detail__btn--cancel:hover {
    background-color: var(--color-gray-200);
  }
  @media (max-width: 768px) {
    .atype-detail__fields--3col {
      grid-template-columns: 1fr;
    }
    .atype-detail__header {
      flex-direction: column;
      gap: 1rem;
    }
  }
}
@layer components {
  .etype-list__page {
    padding: calc(var(--spacing) * 8);
  }
  .etype-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .etype-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .etype-list__subtitle {
    color: var(--color-gray-600);
  }
  .etype-list__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .etype-list__new-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .etype-list__new-btn:hover {
    filter: brightness(0.9);
  }
  .etype-list__new-btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .etype-list__filters {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .etype-list__filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
  }
  .etype-list__filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .etype-list__filter-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .etype-list__filter-input {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .etype-list__filter-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .etype-list__filter-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .etype-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .etype-list__count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .etype-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .etype-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .etype-list__thead {
    background-color: var(--color-gray-50);
  }
  .etype-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .etype-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .etype-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .etype-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .etype-list__td--code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .etype-list__td--name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .etype-list__td--icon {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .etype-list__icon-text {
    color: var(--color-gray-500);
  }
  .etype-list__td--color {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .etype-list__td--status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .etype-list__badge--active {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .etype-list__badge--inactive {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .etype-list__td--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .etype-list__action-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .etype-list__action-link {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .etype-list__action-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .etype-list__action-link--danger {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .etype-list__no-code {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .etype-list__empty-td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .color-badge {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    border-radius: 0.25rem;
    background-color: #ccc;
  }
  .etype-list__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .etype-list__wrapper-1 {
    margin-inline: auto;
  }
}
@layer components {
  .etype-detail {
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--spacing) * 8);
  }
  .etype-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .etype-detail__breadcrumb-link {
    color: var(--color-blue-600);
    text-decoration-line: none;
  }
  .etype-detail__breadcrumb-link:hover {
    text-decoration-line: underline;
  }
  .etype-detail__breadcrumb-sep {
    margin: 0 0.25rem;
  }
  .etype-detail__breadcrumb-current {
    color: #374151;
  }
  .etype-detail__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .etype-detail__title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    margin: 0;
  }
  .etype-detail__btn--back {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    text-decoration-line: none;
  }
  .etype-detail__btn--back:hover {
    background-color: var(--color-gray-200);
  }
  .etype-detail__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .etype-detail__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .etype-detail__card {
    margin-bottom: calc(var(--spacing) * 6);
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    border-radius: 0.75rem;
  }
  .etype-detail__section {
    border: none;
    padding: 1.5rem;
    margin: 0;
  }
  .etype-detail__section-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .etype-detail__section-icon {
    color: var(--color-gray-400);
    font-size: 0.875rem;
  }
  .etype-detail__fields {
    display: grid;
    gap: 1.25rem;
  }
  .etype-detail__fields--2col {
    grid-template-columns: repeat(2, 1fr);
  }
  .etype-detail__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .etype-detail__label-required {
    color: var(--color-red-500);
  }
  .etype-detail__value {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    margin: 0;
  }
  .etype-detail__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .etype-detail__input:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .etype-detail__card-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
  }
  .etype-detail__btn--confirm {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    padding: 0.5rem 1rem;
    background: #2563eb;
    border: none;
    border-radius: 0.375rem;
  }
  .etype-detail__btn--confirm:hover {
    background-color: var(--color-blue-700);
  }
  .etype-detail__btn--cancel {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    text-decoration: none;
    color: #374151;
  }
  .etype-detail__btn--cancel:hover {
    background-color: var(--color-gray-200);
  }
  @media (max-width: 768px) {
    .etype-detail__fields--2col {
      grid-template-columns: 1fr;
    }
    .etype-detail__header {
      flex-direction: column;
      gap: 1rem;
    }
  }
}
@layer components {
  .rol-form {
    padding: calc(var(--spacing) * 8);
  }
  .rol-form__container {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .rol-form__fields {
    margin-bottom: calc(var(--spacing) * 8);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .rol-form__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .rol-form__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .rol-form__input--disabled {
    cursor: not-allowed;
    background-color: var(--color-gray-100);
    color: var(--color-gray-500);
  }
  .rol-form__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .rol-form__permisos-section {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .rol-form__permisos-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .rol-form__actions {
    display: flex;
    gap: calc(var(--spacing) * 4);
  }
  .rol-form__submit-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .rol-form__cancel-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .perm-tree {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .perm-tree__module {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
  }
  .perm-tree__module-header {
    cursor: pointer;
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .perm-tree__module-label {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
  }
  .perm-tree__chevron {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .perm-tree__chevron--open {
    transform: rotate(90deg);
  }
  .perm-tree__module-name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }
  .perm-tree__module-body {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .perm-tree__entity {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    border-color: var(--color-blue-200);
    padding-left: calc(var(--spacing) * 4);
  }
  .perm-tree__entity-header {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .perm-tree__entity-label {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .perm-tree__entity-name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .perm-tree__actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 3);
    padding-left: calc(var(--spacing) * 6);
  }
  .perm-tree__action-label {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .perm-tree__action-name {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-600);
  }
  .perm-tree__action-checkbox, .perm-tree__entity-checkbox, .perm-tree__module-checkbox {
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
}
@layer components {
  .astate-list__page {
    padding: calc(var(--spacing) * 8);
  }
  .astate-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .astate-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .astate-list__subtitle {
    color: var(--color-gray-600);
  }
  .astate-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .astate-list__count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .astate-list__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .astate-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .astate-list__thead {
    background-color: var(--color-gray-50);
  }
  .astate-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .astate-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .astate-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .astate-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .astate-list__td-order {
    cursor: move;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .astate-list__drag-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .astate-list__td-code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .astate-list__td-name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .astate-list__td-color {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .astate-list__td-actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .astate-list__actions-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .astate-list__btn-edit {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .astate-list__btn-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .astate-list__td-empty {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .color-badge {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    border-radius: 0.25rem;
    background-color: #ccc;
  }
}
@layer components {
  .strategy-list {
    padding: calc(var(--spacing) * 8);
  }
  .strategy-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .strategy-list__breadcrumb-label--muted {
    color: var(--color-gray-600);
  }
  .strategy-list__breadcrumb-label--current {
    color: var(--color-gray-900);
  }
  .strategy-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .strategy-list__subtitle {
    color: var(--color-gray-600);
  }
  .strategy-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .strategy-list__create-btn:hover {
    filter: brightness(0.9);
  }
  .strategy-list__create-btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .strategy-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .strategy-list__count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .strategy-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .strategy-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .strategy-list__thead {
    background-color: var(--color-gray-50);
  }
  .strategy-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .strategy-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .strategy-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .strategy-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .strategy-list__td-code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .strategy-list__td-name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .strategy-list__td-event {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .strategy-list__td-priority {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .strategy-list__td-status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .strategy-list__td-actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .strategy-list__badge-priority {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
  }
  .strategy-list__badge-active {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .strategy-list__badge-inactive {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .strategy-list__actions {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .strategy-list__action-btn--edit {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .strategy-list__action-btn--simulate {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-purple-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-purple-50);
      }
    }
  }
  .strategy-list__action-btn--clone {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-green-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
  }
  .strategy-list__action-btn--deactivate {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .strategy-list__action-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .strategy-list__modal-overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
    z-index: 1300;
    display: none;
  }
  .strategy-list__modal-overlay.strategy-list__modal-overlay--visible {
    display: flex;
  }
  .strategy-list__modal {
    width: calc(var(--spacing) * 96);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
  }
  .strategy-list__modal-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .strategy-list__modal-field {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .strategy-list__modal-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .strategy-list__modal-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .strategy-list__modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .strategy-list__modal-cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
  }
  .strategy-list__modal-submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
  }
  .strategy-list__empty-td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
}
@layer components {
  .severity-list__page {
    padding: calc(var(--spacing) * 8);
  }
  .severity-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .severity-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .severity-list__subtitle {
    color: var(--color-gray-600);
  }
  .severity-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .severity-list__create-btn:hover {
    filter: brightness(0.9);
  }
  .severity-list__create-btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .severity-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .severity-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .severity-list__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .severity-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .severity-list__count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .severity-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .severity-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .severity-list__thead {
    background-color: var(--color-gray-50);
  }
  .severity-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .severity-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .severity-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .severity-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .severity-list__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .severity-list__td--code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .severity-list__td--score {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .severity-list__td--status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .severity-list__td--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .severity-list__badge--active {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .severity-list__badge--inactive {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .severity-list__actions-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .severity-list__edit-btn {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .severity-list__edit-btn-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .severity-list__no-code {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
}
@layer components {
  .prefs-list {
    padding: calc(var(--spacing) * 8);
  }
  .prefs-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .prefs-list__subtitle {
    color: var(--color-gray-600);
  }
  .prefs-list__actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .prefs-list__action-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .prefs-list__action-btn--export {
    background-color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .prefs-list__action-btn--import {
    background-color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .prefs-list__action-btn--restore {
    background-color: var(--color-red-600);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .prefs-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .prefs-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .prefs-list__thead {
    background-color: var(--color-gray-50);
  }
  .prefs-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .prefs-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .prefs-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .prefs-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .prefs-list__cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .prefs-list__cell--key {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .prefs-list__cell--type {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .prefs-list__cell--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .prefs-list__row-actions {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .prefs-list__icon-btn--edit {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .prefs-list__icon-btn--module {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .prefs-list__empty-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
}
@layer components {
  .rol-list {
    padding: calc(var(--spacing) * 8);
  }
  .rol-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .rol-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .rol-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .rol-list__subtitle {
    color: var(--color-gray-600);
  }
  .rol-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .rol-list__create-btn:hover {
    filter: brightness(0.9);
  }
  .rol-list__counter {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .rol-list__counter-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .rol-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .rol-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .rol-list__thead {
    background-color: var(--color-gray-50);
  }
  .rol-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .rol-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .rol-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .rol-list__row {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .rol-list__td-code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .rol-list__td-name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .rol-list__td-desc {
    max-width: var(--container-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .rol-list__td-permisos {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .rol-list__badge--count {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .rol-list__td-status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .rol-list__badge--active {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .rol-list__badge--inactive {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-red-800);
  }
  .rol-list__td-actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .rol-list__actions-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .rol-list__edit-link {
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .rol-list__deactivate-btn {
    cursor: pointer;
    color: var(--color-red-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
  }
  .rol-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .rol-list__empty-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
}
.atype-list {
  padding: calc(var(--spacing) * 8);
}
.atype-list__breadcrumb {
  margin-bottom: calc(var(--spacing) * 4);
}
.atype-list__breadcrumb-current {
  color: #111827;
}
.atype-list__header {
  margin-bottom: calc(var(--spacing) * 8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.atype-list__title {
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}
.atype-list__subtitle {
  color: var(--color-gray-600);
}
.atype-list__create-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--module-color, #2563eb);
}
.atype-list__create-btn:hover {
  filter: brightness(0.9);
}
.atype-list__create-btn-icon {
  margin-right: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.atype-list__counter {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
}
.atype-list__counter-value {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.atype-list__table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.atype-list__table {
  min-width: 100%;
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
}
.atype-list__thead {
  background-color: var(--color-gray-50);
}
.atype-list__th {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: left;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.atype-list__th--right {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: right;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.atype-list__tbody {
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
  background-color: var(--color-white);
}
.atype-list__row {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
}
.atype-list__td-code {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
  color: var(--color-gray-900);
}
.atype-list__td-name {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-900);
}
.atype-list__td-priority {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
}
.atype-list__td-status {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
}
.atype-list__badge--active {
  border-radius: calc(infinity * 1px);
  background-color: var(--color-green-100);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-green-800);
}
.atype-list__badge--inactive {
  border-radius: calc(infinity * 1px);
  background-color: var(--color-red-100);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-red-800);
}
.atype-list__td-actions {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  text-align: right;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
}
.atype-list__actions-wrapper {
  display: flex;
  justify-content: flex-end;
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }
}
.atype-list__edit-link {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-blue-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-50);
    }
  }
}
.atype-list__deactivate-btn {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-red-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-red-50);
    }
  }
}
.atype-list__no-code {
  color: var(--color-gray-400);
}
.atype-list__empty-cell {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  color: #6b7280;
}
.atype-list__empty-state {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@layer components {
  .etype-list__page {
    padding: calc(var(--spacing) * 8);
  }
  .etype-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .etype-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .etype-list__subtitle {
    color: var(--color-gray-600);
  }
  .etype-list__new-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .etype-list__new-btn:hover {
    filter: brightness(0.9);
  }
  .etype-list__new-btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .etype-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .etype-list__count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .etype-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .etype-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .etype-list__thead {
    background-color: var(--color-gray-50);
  }
  .etype-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .etype-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .etype-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .etype-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .etype-list__td--code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .etype-list__td--name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .etype-list__td--icon {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .etype-list__icon-text {
    color: var(--color-gray-500);
  }
  .etype-list__td--color {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .etype-list__td--status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .etype-list__badge--active {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .etype-list__badge--inactive {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .etype-list__td--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .etype-list__actions {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .etype-list__edit-btn {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .etype-list__edit-btn-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .etype-list__deactivate-btn {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .etype-list__deactivate-btn-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .etype-list__no-code {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .etype-list__empty-td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .color-badge {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    border-radius: 0.25rem;
    background-color: #ccc;
  }
}
@layer components;
.group-list {
  padding: calc(var(--spacing) * 8);
}
.group-list__breadcrumb-bar {
  margin-bottom: calc(var(--spacing) * 4);
}
.group-list__breadcrumb-current {
  color: var(--color-gray-900);
}
.group-list__header {
  margin-bottom: calc(var(--spacing) * 8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.group-list__title {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}
.group-list__subtitle {
  color: var(--color-gray-600);
}
.group-list__new-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--module-color, #2563eb);
}
.group-list__new-btn:hover {
  filter: brightness(0.9);
}
.group-list__filters {
  margin-bottom: calc(var(--spacing) * 6);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 4);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.group-list__filters-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--spacing) * 4);
}
.group-list__filter-field {
  min-width: calc(var(--spacing) * 50);
  flex: 1;
}
.group-list__filter-label {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.group-list__filter-input {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  &:focus {
    border-color: var(--color-blue-500);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
}
.group-list__filter-actions {
  display: flex;
  gap: calc(var(--spacing) * 2);
}
.group-list__filter-btn {
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-gray-700);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-200);
    }
  }
}
.group-list__table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.group-list__table {
  min-width: 100%;
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
}
.group-list__thead {
  background-color: var(--color-gray-50);
}
.group-list__th {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: left;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.group-list__th--right {
  text-align: right;
}
.group-list__tbody {
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
  background-color: var(--color-white);
}
.group-list__row {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
}
.group-list__cell {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
}
.group-list__cell--id {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}
.group-list__cell--text {
  color: var(--color-gray-700);
}
.group-list__cell--actions {
  text-align: right;
}
.group-list__status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-green-100);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-green-800);
}
.group-list__row-actions {
  display: flex;
  justify-content: flex-end;
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }
}
.group-list__action-btn {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-blue-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-50);
    }
  }
}
.group-list__empty-cell {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 8);
  text-align: center;
  color: var(--color-gray-500);
}
.group-list__empty-body {
  padding-block: calc(var(--spacing) * 8);
}
.group-list__empty-icon {
  margin-inline: auto;
}
.group-list__pagination {
  margin-top: calc(var(--spacing) * 6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.group-list__pagination-info {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
}
.group-list__pagination-count {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.group-list__pagination-nav {
  display: flex;
  align-items: center;
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }
}
.group-list__page-btn {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
}
.group-list__page-btn--current {
  background-color: var(--color-blue-600);
  color: var(--color-white);
}
.preferences-page {
  padding: calc(var(--spacing) * 8);
}
.preferences-page__header {
  margin-bottom: calc(var(--spacing) * 8);
}
.preferences-page__title {
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}
.preferences-page__subtitle {
  color: var(--color-gray-600);
}
.preferences-page__actions {
  margin-top: calc(var(--spacing) * 6);
}
.preferences-page__back-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-600);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700);
    }
  }
}
@layer components {
  .backup-list {
    padding: calc(var(--spacing) * 8);
  }
  .backup-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .backup-list__header-text {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .backup-list__subtitle {
    color: var(--color-gray-600);
  }
  .backup-list__header-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .backup-list__btn-completo {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .backup-list__btn-selectivo {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .backup-list__btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .backup-list__counter {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .backup-list__counter-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .backup-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .backup-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .backup-list__thead {
    background-color: var(--color-gray-50);
  }
  .backup-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .backup-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .backup-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .backup-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .backup-list__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .backup-list__td--id {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .backup-list__td--type {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .backup-list__td--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .backup-list__badge {
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .backup-list__badge--completo {
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
  }
  .backup-list__badge--selectivo {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .backup-list__badge--completado {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .backup-list__badge--pendiente {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .backup-list__badge--error {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .backup-list__row-actions {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .backup-list__action-btn {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .backup-list__action-btn--validate {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .backup-list__action-btn--restore {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-green-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
  }
  .backup-list__action-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .backup-list__pagination {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    justify-content: center;
  }
  .backup-list__pagination-nav {
    display: flex;
    gap: calc(var(--spacing) * 1);
  }
  .backup-list__page-link {
    border-radius: 0.25rem;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .backup-list__page-link--active {
    border-radius: 0.25rem;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    color: var(--color-white);
  }
  .backup-list__td--empty {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .backup-data-container {
    display: none;
  }
}
.license-status {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
  margin-inline: auto;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 6);
}
.license-status__header {
  margin-bottom: calc(var(--spacing) * 6);
}
.license-status__subtitle {
  color: var(--color-gray-600);
}
.license-status__card {
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.license-status__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 6);
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.license-status__details {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.license-status__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  padding-bottom: calc(var(--spacing) * 2);
}
.license-status__label {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}
.license-status__value {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.license-status__value--missing {
  color: var(--color-red-500);
}
.license-status__badge {
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.license-status__badge--active {
  background-color: var(--color-green-100);
  color: var(--color-green-800);
}
.license-status__badge--inactive {
  background-color: var(--color-red-100);
  color: var(--color-red-800);
}
.license-status__days-panel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.license-status__days-box {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 6);
  text-align: center;
}
.license-status__days-box--warning {
  border-color: var(--color-yellow-200);
  background-color: var(--color-yellow-50);
}
.license-status__days-box--expired {
  border-color: var(--color-red-200);
  background-color: var(--color-red-50);
}
.license-status__days-box--ok {
  border-color: var(--color-green-200);
  background-color: var(--color-green-50);
}
.license-status__days-number {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.license-status__days-number--warning {
  color: var(--color-yellow-600);
}
.license-status__days-number--expired {
  color: var(--color-red-600);
}
.license-status__days-number--ok {
  color: var(--color-green-600);
}
.license-status__days-label {
  margin-top: calc(var(--spacing) * 2);
  color: var(--color-gray-600);
}
.license-status__days-warning {
  margin-top: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.license-status__days-warning--soon {
  color: var(--color-yellow-700);
}
.license-status__days-warning--expired {
  color: var(--color-red-700);
}
.license-status__no-expiry {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
  padding: calc(var(--spacing) * 6);
  text-align: center;
}
.license-status__no-expiry-text {
  color: var(--color-gray-500);
}
.license-status__alert-bar {
  margin-top: calc(var(--spacing) * 6);
}
.license-status__alert-link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-amber-100);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-amber-700);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-amber-200);
    }
  }
}
.license-status__alert-icon {
  margin-right: calc(var(--spacing) * 2);
}
.task-list {
  padding: calc(var(--spacing) * 8);
}
.task-list__breadcrumb-muted {
  color: var(--color-gray-600);
}
.task-list__breadcrumb-current {
  color: var(--color-gray-900);
}
.task-list__header {
  margin-bottom: calc(var(--spacing) * 8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.task-list__subtitle {
  color: var(--color-gray-600);
}
.task-list__flash--success {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-400);
  background-color: var(--color-green-100);
  padding: calc(var(--spacing) * 4);
  color: var(--color-green-700);
}
.task-list__counter {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
}
.task-list__counter-value {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.task-list__table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.task-list__table {
  min-width: 100%;
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
}
.task-list__thead {
  background-color: var(--color-gray-50);
}
.task-list__th {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: left;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.task-list__th--right {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: right;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.task-list__tbody {
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
  background-color: var(--color-white);
}
.task-list__row {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
}
.task-list__cell--code {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  color: var(--color-gray-900);
}
.task-list__cell {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
  color: var(--color-gray-700);
}
.task-list__cell--actions {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  text-align: right;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
}
.task-list__form-inline {
  display: inline;
}
.task-list__freq-select {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  &:focus {
    border-color: var(--color-blue-500);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
}
.task-list__text--muted {
  color: var(--color-gray-400);
}
.task-list__status-badge {
  display: inline-flex;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.task-list__status-badge--ok {
  background-color: var(--color-green-100);
  color: var(--color-green-800);
}
.task-list__status-badge--error {
  background-color: var(--color-red-100);
  color: var(--color-red-800);
}
.task-list__status-badge--unknown {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}
.task-list__active-badge {
  display: inline-flex;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.task-list__active-badge--yes {
  background-color: var(--color-green-100);
  color: var(--color-green-800);
}
.task-list__active-badge--no {
  background-color: var(--color-red-100);
  color: var(--color-red-800);
}
.task-list__action-group {
  display: flex;
  justify-content: flex-end;
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }
}
.task-list__btn--execute {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-blue-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-50);
    }
  }
}
.task-list__btn--pause {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-yellow-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-yellow-50);
    }
  }
}
.task-list__empty-cell {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 8);
  text-align: center;
  color: var(--color-gray-500);
}
@layer components {
  .grupo-list__row--inactive {
    opacity: 0.5;
  }
}
.maestros-io {
  padding: calc(var(--spacing) * 8);
}
.maestros-io__header {
  margin-bottom: calc(var(--spacing) * 8);
}
.maestros-io__subtitle {
  color: var(--color-gray-600);
}
.maestros-io__breadcrumb-current {
  color: #111827;
}
.maestros-io__grid {
  margin-bottom: calc(var(--spacing) * 8);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 6);
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.maestros-io__card {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.maestros-io__card-header {
  margin-bottom: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;
}
.maestros-io__card-icon {
  margin-right: calc(var(--spacing) * 4);
  border-radius: calc(infinity * 1px);
  padding: calc(var(--spacing) * 3);
}
.maestros-io__card-icon--import {
  background-color: var(--color-blue-100);
}
.maestros-io__card-icon--export {
  background-color: var(--color-green-100);
}
.maestros-io__card-icon-svg {
  width: 1.5rem;
  height: 1.5rem;
}
.maestros-io__card-icon-svg--import {
  color: var(--color-blue-600);
}
.maestros-io__card-icon-svg--export {
  color: var(--color-green-600);
}
.maestros-io__card-title {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.maestros-io__card-description {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
}
.maestros-io__file-input {
  margin-bottom: calc(var(--spacing) * 3);
  width: 100%;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
  &::file-selector-button {
    margin-right: calc(var(--spacing) * 4);
  }
  &::file-selector-button {
    border-radius: var(--radius-lg);
  }
  &::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  &::file-selector-button {
    background-color: var(--color-blue-50);
  }
  &::file-selector-button {
    padding-inline: calc(var(--spacing) * 4);
  }
  &::file-selector-button {
    padding-block: calc(var(--spacing) * 2);
  }
  &::file-selector-button {
    color: var(--color-blue-700);
  }
  &:hover {
    @media (hover: hover) {
      &::file-selector-button {
        background-color: var(--color-blue-100);
      }
    }
  }
}
.maestros-io__actions {
  display: flex;
  gap: calc(var(--spacing) * 2);
}
.maestros-io__btn {
  flex: 1;
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.maestros-io__btn--preview {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-200);
    }
  }
}
.maestros-io__btn--import {
  background-color: var(--color-blue-600);
  color: var(--color-white);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700);
    }
  }
}
.maestros-io__btn--export {
  width: 100%;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-600);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-white);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700);
    }
  }
}
.maestros-io__select {
  margin-bottom: calc(var(--spacing) * 3);
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  &:focus {
    border-color: var(--color-blue-500);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
}
.maestros-io__preview-result {
  margin-top: calc(var(--spacing) * 3);
  display: none;
}
.maestros-io__notice {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-yellow-200);
  background-color: var(--color-yellow-50);
  padding: calc(var(--spacing) * 4);
}
.maestros-io__notice-content {
  display: flex;
  align-items: center;
}
.maestros-io__notice-icon {
  margin-right: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  color: var(--color-yellow-600);
}
.maestros-io__notice-text {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-yellow-800);
}
.maestros-io__wrapper {
  margin-bottom: calc(var(--spacing) * 4);
}
@layer components {
  .org-tree__page {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .org-tree__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .org-tree__breadcrumb-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .org-tree__breadcrumb-sep {
    color: var(--color-gray-400);
  }
  .org-tree__breadcrumb-current {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .org-tree__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .org-tree__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .org-tree__heading {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .org-tree__subheading {
    color: var(--color-gray-600);
  }
  .org-tree__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .org-tree__create-btn:hover {
    filter: brightness(0.9);
  }
  .org-tree__create-btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .org-tree__empty {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 6);
    text-align: center;
  }
  .org-tree__empty-icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    color: var(--color-blue-400);
  }
  .org-tree__empty-message {
    color: var(--color-blue-800);
  }
  .org-tree__empty-hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
  }
  .org-tree__container {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .org-tree__inner {
    padding: calc(var(--spacing) * 6);
  }
  .org-tree__view {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .org-tree__list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .org-tree__node-nivel1-row {
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .org-tree__toggle {
    margin-right: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 5);
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .org-tree__toggle-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .org-tree__toggle-icon--static {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .org-tree__badge--nivel1 {
    margin-right: calc(var(--spacing) * 3);
    border-radius: 0.25rem;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .org-tree__code {
    color: var(--color-gray-900);
  }
  .org-tree__name {
    margin-left: calc(var(--spacing) * 2);
    color: var(--color-gray-600);
  }
  .org-tree__inactive-badge {
    margin-left: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-600);
  }
  .org-tree__node-actions {
    margin-left: auto;
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .org-tree__add-child-btn {
    border-radius: 0.25rem;
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-green-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-200);
      }
    }
  }
  .org-tree__deactivate-btn {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .org-tree__deactivate-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .org-tree__children-nivel1 {
    margin-top: calc(var(--spacing) * 2);
    margin-left: calc(var(--spacing) * 8);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .org-tree__node-nivel2-row {
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .org-tree__badge--nivel2 {
    margin-right: calc(var(--spacing) * 3);
    border-radius: 0.25rem;
    background-color: var(--color-cyan-600);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .org-tree__add-group-btn {
    border-radius: 0.25rem;
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-green-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-200);
      }
    }
  }
  .org-tree__children-nivel2 {
    margin-top: calc(var(--spacing) * 2);
    margin-left: calc(var(--spacing) * 8);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .org-tree__node-grupo-row {
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .org-tree__drag-handle {
    margin-right: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 5);
    cursor: grab;
    text-align: center;
    color: var(--color-gray-300);
  }
  .org-tree__drag-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .org-tree__badge--grupo {
    margin-right: calc(var(--spacing) * 3);
    border-radius: 0.25rem;
    background-color: var(--color-amber-500);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .org-tree__station-count {
    margin-left: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-600);
  }
  .org-tree__assign-btn {
    border-radius: 0.25rem;
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-blue-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-200);
      }
    }
  }
  .org-tree__assign-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline;
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
  }
  .org-tree__node--inactive {
    opacity: 50%;
  }
  .org-tree__reactivate-btn {
    margin-left: calc(var(--spacing) * 2);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .org-tree__edit-btn {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-gray-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
}
.org-structure {
  margin-inline: auto;
  max-width: var(--container-7xl);
}
.org-structure__header {
  margin-bottom: calc(var(--spacing) * 8);
}
.org-structure__title {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}
.org-structure__subtitle {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
}
.org-structure__content {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.org-structure__placeholder {
  color: var(--color-gray-500);
}
@layer components {
  .group-stations {
    padding: calc(var(--spacing) * 8);
  }
  .group-stations__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .group-stations__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .group-stations__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .group-stations__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .group-stations__container {
    max-width: var(--container-4xl);
  }
  .group-stations__back-link {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .group-stations__btn--back {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .group-stations__icon-left {
    margin-right: calc(var(--spacing) * 2);
  }
  .group-stations__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .group-stations__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .group-stations__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .group-stations__subtitle-name {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .group-stations__empty {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 6);
  }
  .group-stations__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .group-stations__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .group-stations__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .group-stations__card-body {
    padding: calc(var(--spacing) * 6);
  }
  .group-stations__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .group-stations__thead {
    background-color: var(--color-gray-50);
  }
  .group-stations__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .group-stations__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .group-stations__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .group-stations__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .group-stations__checkbox {
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .group-stations__label {
    cursor: pointer;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .group-stations__cell-name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .group-stations__card-footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .group-stations__btn-cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .group-stations__btn-submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
  }
}
@layer components {
  .grupo-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .grupo-list__row--inactive {
    opacity: 0.5;
  }
  .grupo-list__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .group-detail {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .group-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .group-detail__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .group-detail__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .group-detail__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .group-detail__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .group-detail__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .group-detail__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .group-detail__header-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .group-detail__btn--back {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .group-detail__btn--confirm {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .group-detail__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .group-detail__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .group-detail__card-header {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .group-detail__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .group-detail__card-count {
    margin-left: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-gray-500);
  }
  .group-detail__section {
    padding: calc(var(--spacing) * 6);
  }
  .group-detail__fields {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .group-detail__fields--2col {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .group-detail__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .group-detail__label-required {
    color: var(--color-red-500);
  }
  .group-detail__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .group-detail__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .group-detail__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .group-detail__hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .group-detail__value {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .group-detail__checkbox-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .group-detail__badge--active {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .group-detail__badge--inactive {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .group-detail__badge--role {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .group-detail__table-wrap {
    overflow-x: auto;
  }
  .group-detail__table {
    width: 100%;
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .group-detail__table--compact {
    width: 100%;
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .group-detail__th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .group-detail__row:hover {
    background-color: var(--color-gray-50);
  }
  .group-detail__cell {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .group-detail__prog-card {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .group-detail__prog-header {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .group-detail__prog-delete {
    margin-left: auto;
    color: var(--color-red-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-600);
      }
    }
  }
  .group-detail__prog-form {
    margin-top: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .group-detail__prog-form-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .group-detail__prog-tramo-row {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .group-detail__prog-tramo-remove {
    color: var(--color-red-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-600);
      }
    }
  }
  .group-detail__prog-hora {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .group-detail__prog-dias {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-600);
  }
  .group-detail__prog-dias-check {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .group-detail__prog-dias-row {
    margin-top: calc(var(--spacing) * 1);
    display: flex;
    gap: calc(var(--spacing) * 4);
  }
  .group-detail__prog-dia-label {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .group-detail__prog-add-tramo {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .group-detail__prog-form-actions {
    margin-top: calc(var(--spacing) * 4);
  }
  .group-detail__select--sm {
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .group-detail__input--sm {
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .group-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .group-detail__btn--cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .group-detail__cell--drag {
    cursor: grab;
    width: 2.5rem;
    text-align: center;
  }
  .group-detail__drag-icon {
    color: #9ca3af;
  }
  .group-detail__na-text {
    color: #d1d5db;
  }
  .group-detail__hint--error {
    color: #dc2626;
  }
  .group-detail__checkbox-group {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
  }
  .group-detail__checkbox-label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .group-detail__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .group-detail__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
}
.group-list {
  padding: calc(var(--spacing) * 8);
}
.group-list__breadcrumb-bar {
  margin-bottom: calc(var(--spacing) * 4);
}
.group-list__breadcrumb-current {
  color: var(--color-gray-900);
}
.group-list__header {
  margin-bottom: calc(var(--spacing) * 8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.group-list__title {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}
.group-list__subtitle {
  color: var(--color-gray-600);
}
.group-list__new-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--module-color, #2563eb);
}
.group-list__new-btn:hover {
  filter: brightness(0.9);
}
.group-list__filters {
  margin-bottom: calc(var(--spacing) * 6);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 4);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.group-list__filters-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--spacing) * 4);
}
.group-list__filter-field {
  min-width: calc(var(--spacing) * 50);
  flex: 1;
}
.group-list__filter-label {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.group-list__filter-input {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  &:focus {
    border-color: var(--color-blue-500);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
}
.group-list__filter-actions {
  display: flex;
  gap: calc(var(--spacing) * 2);
}
.group-list__filter-btn {
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-gray-700);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-200);
    }
  }
}
.group-list__table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.group-list__table {
  min-width: 100%;
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
}
.group-list__thead {
  background-color: var(--color-gray-50);
}
.group-list__th {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: left;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.group-list__th--right {
  text-align: right;
}
.group-list__tbody {
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
  background-color: var(--color-white);
}
.group-list__row {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
}
.group-list__cell {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
}
.group-list__cell--id {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}
.group-list__cell--text {
  color: var(--color-gray-700);
}
.group-list__cell--actions {
  text-align: right;
}
.group-list__status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-green-100);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-green-800);
}
.group-list__row-actions {
  display: flex;
  justify-content: flex-end;
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }
}
.group-list__action-btn {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-blue-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-50);
    }
  }
}
.group-list__empty-cell {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 8);
  text-align: center;
  color: var(--color-gray-500);
}
.group-list__empty-body {
  padding-block: calc(var(--spacing) * 8);
}
.group-list__empty-icon {
  margin-inline: auto;
}
.group-list__pagination {
  margin-top: calc(var(--spacing) * 6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.group-list__pagination-info {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
}
.group-list__pagination-count {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.group-list__pagination-nav {
  display: flex;
  align-items: center;
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }
}
.group-list__page-btn {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
}
.group-list__page-btn--current {
  background-color: var(--color-blue-600);
  color: var(--color-white);
}
@layer components {
  .level1-detail {
    padding: calc(var(--spacing) * 8);
  }
  .level1-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .level1-detail__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .level1-detail__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .level1-detail__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .level1-detail__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .level1-detail__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .level1-detail__header-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .level1-detail__btn--back {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .level1-detail__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .level1-detail__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .level1-detail__card-header {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .level1-detail__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .level1-detail__section {
    padding: calc(var(--spacing) * 6);
  }
  .level1-detail__fields {
    margin-top: calc(var(--spacing) * 4);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .level1-detail__fields--2col {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .level1-detail__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .level1-detail__label-required {
    color: var(--color-red-500);
  }
  .level1-detail__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level1-detail__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level1-detail__select--half {
    max-width: 50%;
  }
  .level1-detail__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level1-detail__hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .level1-detail__areas-list {
    max-height: calc(var(--spacing) * 64);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    overflow-y: auto;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding: calc(var(--spacing) * 2);
  }
  .level1-detail__area-item {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .level1-detail__area-code {
    width: calc(var(--spacing) * 16);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .level1-detail__area-name {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-800);
  }
  .level1-detail__area-origin {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .level1-detail__areas-count {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .level1-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .level1-detail__btn--cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .level1-detail__btn--confirm {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .level1-detail__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .level1-detail__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .level1-detail__item-2 {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .level2-detail {
    padding: calc(var(--spacing) * 8);
  }
  .level2-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .level2-detail__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .level2-detail__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .level2-detail__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .level2-detail__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .level2-detail__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .level2-detail__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .level2-detail__header-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .level2-detail__btn--back {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .level2-detail__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .level2-detail__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .level2-detail__card-header {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .level2-detail__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .level2-detail__section {
    padding: calc(var(--spacing) * 6);
  }
  .level2-detail__fields {
    margin-top: calc(var(--spacing) * 4);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .level2-detail__fields--2col {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .level2-detail__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .level2-detail__label-required {
    color: var(--color-red-500);
  }
  .level2-detail__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level2-detail__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level2-detail__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level2-detail__hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .level2-detail__map {
    margin-bottom: calc(var(--spacing) * 2);
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    height: 300px;
  }
  .level2-detail__users-list {
    max-height: calc(var(--spacing) * 64);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    overflow-y: auto;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding: calc(var(--spacing) * 2);
  }
  .level2-detail__user-item {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .level2-detail__user-name {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-800);
  }
  .level2-detail__user-login {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .level2-detail__planos-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .level2-detail__plano-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .level2-detail__plano-thumb {
    display: flex;
    height: calc(var(--spacing) * 32);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--color-gray-100);
  }
  .level2-detail__plano-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .level2-detail__plano-placeholder {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .level2-detail__plano-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 3);
  }
  .level2-detail__plano-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
  }
  .level2-detail__plano-upload {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .level2-detail__plano-delete {
    margin-left: auto;
    cursor: pointer;
    color: var(--color-red-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-600);
      }
    }
  }
  .level2-detail__grupos-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .level2-detail__grupo-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .level2-detail__grupo-code {
    width: calc(var(--spacing) * 16);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .level2-detail__grupo-name {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-800);
  }
  .level2-detail__grupo-estaciones {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .level2-detail__badge--active {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .level2-detail__badge--inactive {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .level2-detail__lightbox-overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
  }
  .level2-detail__lightbox-card {
    position: relative;
    max-height: 90vh;
    max-width: var(--container-4xl);
    overflow: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .level2-detail__lightbox-close {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 3);
    cursor: pointer;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-500);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-800);
      }
    }
  }
  .level2-detail__lightbox-img {
    margin-inline: auto;
    display: block;
    max-height: 75vh;
    max-width: 100%;
  }
  .level2-detail__lightbox-name {
    margin-top: calc(var(--spacing) * 3);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .level2-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .level2-detail__btn--cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .level2-detail__btn--confirm {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .level2-detail__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .level2-detail__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .level2-detail__item-2 {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .org-detail {
    margin-inline: auto;
    max-width: var(--container-7xl);
  }
  .org-detail__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .org-detail__title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .org-detail__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .org-detail__actions {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .org-detail__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .org-detail__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .org-detail__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .org-detail__card-meta {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .org-detail__card-body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 6);
  }
  .org-detail__fields {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
  }
  @media (min-width: 768px) {
    .org-detail__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .org-detail__field--full {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .org-detail__field-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .org-detail__field-value {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .org-detail__badge {
    display: inline-flex;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .org-detail__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .org-detail__footer-meta {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .org-detail__footer-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
}
.preferences-page {
  padding: calc(var(--spacing) * 8);
}
.preferences-page__header {
  margin-bottom: calc(var(--spacing) * 8);
}
.preferences-page__title {
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}
.preferences-page__subtitle {
  color: var(--color-gray-600);
}
.preferences-page__actions {
  margin-top: calc(var(--spacing) * 6);
}
.preferences-page__back-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-600);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700);
    }
  }
}
.preferences-page__wrapper {
  margin-bottom: calc(var(--spacing) * 4);
}
.preferences-page__wrapper-1 {
  margin-inline: auto;
}
@layer components {
  .login-form {
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .login-form__header {
    --tw-gradient-position: to right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    --tw-gradient-to: var(--color-blue-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    padding-inline: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 6);
  }
  .login-form__title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .login-form__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-100);
  }
  .login-form__body {
    padding: calc(var(--spacing) * 8);
  }
  .login-form__error {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding: calc(var(--spacing) * 4);
  }
  .login-form__error-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-700);
  }
  .login-form__fields {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .login-form__label {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .login-form__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .login-form__submit {
    width: 100%;
    cursor: pointer;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .login-form__footer {
    margin-top: calc(var(--spacing) * 6);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
}
@layer components {
  .level1-detail {
    padding: calc(var(--spacing) * 8);
  }
  .level1-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .level1-detail__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .level1-detail__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .level1-detail__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .level1-detail__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .level1-detail__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .level1-detail__header-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .level1-detail__btn--back {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .level1-detail__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .level1-detail__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .level1-detail__card-header {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .level1-detail__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .level1-detail__section {
    padding: calc(var(--spacing) * 6);
  }
  .level1-detail__fields {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .level1-detail__fields--2col {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .level1-detail__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .level1-detail__label-required {
    color: var(--color-red-500);
  }
  .level1-detail__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level1-detail__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level1-detail__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level1-detail__hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .level1-detail__areas-list {
    max-height: calc(var(--spacing) * 64);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    overflow-y: auto;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding: calc(var(--spacing) * 2);
  }
  .level1-detail__area-item {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .level1-detail__area-code {
    width: calc(var(--spacing) * 16);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .level1-detail__area-name {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-800);
  }
  .level1-detail__area-origin {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .level1-detail__areas-count {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .level1-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .level1-detail__btn--cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .level1-detail__btn--confirm {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
}
@layer components {
  .level2-detail {
    padding: calc(var(--spacing) * 8);
  }
  .level2-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .level2-detail__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .level2-detail__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .level2-detail__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .level2-detail__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .level2-detail__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .level2-detail__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .level2-detail__header-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .level2-detail__btn--back {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .level2-detail__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .level2-detail__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .level2-detail__card-header {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .level2-detail__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }
  .level2-detail__section {
    padding: calc(var(--spacing) * 6);
  }
  .level2-detail__fields {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .level2-detail__fields--2col {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .level2-detail__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .level2-detail__label-required {
    color: var(--color-red-500);
  }
  .level2-detail__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level2-detail__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level2-detail__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .level2-detail__hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .level2-detail__map {
    margin-bottom: calc(var(--spacing) * 2);
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    height: 300px;
  }
  .level2-detail__users-list {
    max-height: calc(var(--spacing) * 64);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    overflow-y: auto;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding: calc(var(--spacing) * 2);
  }
  .level2-detail__user-item {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .level2-detail__user-name {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-800);
  }
  .level2-detail__user-login {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .level2-detail__planos-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .level2-detail__plano-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .level2-detail__plano-thumb {
    display: flex;
    height: calc(var(--spacing) * 32);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--color-gray-100);
  }
  .level2-detail__plano-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .level2-detail__plano-placeholder {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .level2-detail__plano-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 3);
  }
  .level2-detail__plano-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
  }
  .level2-detail__plano-upload {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .level2-detail__plano-delete {
    margin-left: auto;
    cursor: pointer;
    color: var(--color-red-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-600);
      }
    }
  }
  .level2-detail__grupos-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .level2-detail__grupo-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .level2-detail__grupo-code {
    width: calc(var(--spacing) * 16);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .level2-detail__grupo-name {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-800);
  }
  .level2-detail__grupo-estaciones {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .level2-detail__badge--active {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .level2-detail__badge--inactive {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .level2-detail__lightbox-overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
  }
  .level2-detail__lightbox-card {
    position: relative;
    max-height: 90vh;
    max-width: var(--container-4xl);
    overflow: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .level2-detail__lightbox-close {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 3);
    cursor: pointer;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-500);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-800);
      }
    }
  }
  .level2-detail__lightbox-img {
    margin-inline: auto;
    display: block;
    max-height: 75vh;
    max-width: 100%;
  }
  .level2-detail__lightbox-name {
    margin-top: calc(var(--spacing) * 3);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .level2-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .level2-detail__btn--cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .level2-detail__btn--confirm {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
}
@layer components {
  .org-detail {
    margin-inline: auto;
    max-width: var(--container-7xl);
  }
  .org-detail__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .org-detail__title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .org-detail__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .org-detail__actions {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .org-detail__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .org-detail__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .org-detail__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .org-detail__card-meta {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .org-detail__card-body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 6);
  }
  .org-detail__fields {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
  }
  @media (min-width: 768px) {
    .org-detail__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .org-detail__field--full {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .org-detail__field-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .org-detail__field-value {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .org-detail__badge {
    display: inline-flex;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .org-detail__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .org-detail__footer-meta {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .org-detail__footer-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .user-detail__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .backup-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .backup-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .backup-list__header-text {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .backup-list__subtitle {
    color: var(--color-gray-600);
  }
  .backup-list__header-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .backup-list__btn-completo {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .backup-list__btn-selectivo {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .backup-list__btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .backup-list__counter {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .backup-list__counter-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .backup-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .backup-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .backup-list__thead {
    background-color: var(--color-gray-50);
  }
  .backup-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .backup-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .backup-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .backup-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .backup-list__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .backup-list__td--id {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .backup-list__td--type {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .backup-list__td--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .backup-list__badge {
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .backup-list__badge--completo {
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
  }
  .backup-list__badge--selectivo {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .backup-list__badge--completado {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .backup-list__badge--pendiente {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .backup-list__badge--error {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .backup-list__action-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .backup-list__action-link {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .backup-list__action-link--danger {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .backup-list__action-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .backup-list__pagination {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    justify-content: center;
  }
  .backup-list__pagination-nav {
    display: flex;
    gap: calc(var(--spacing) * 1);
  }
  .backup-list__page-link {
    border-radius: 0.25rem;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .backup-list__page-link--active {
    border-radius: 0.25rem;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    color: var(--color-white);
  }
  .backup-list__td--empty {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .backup-data-container {
    display: none;
  }
  .backup-list__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .backup-list__wrapper-1 {
    margin-inline: auto;
  }
}
.backup-detail {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5rem;
}
.backup-detail__breadcrumb {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
}
.backup-detail__breadcrumb-link {
  color: var(--color-blue-600);
  text-decoration-line: none;
}
.backup-detail__breadcrumb-link:hover {
  text-decoration-line: underline;
}
.backup-detail__breadcrumb-sep {
  margin: 0 0.25rem;
}
.backup-detail__breadcrumb-current {
  color: #374151;
}
.backup-detail__header {
  margin-bottom: calc(var(--spacing) * 6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.backup-detail__btn--back {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-700);
  text-decoration-line: none;
}
.backup-detail__btn--back:hover {
  background-color: var(--color-gray-200);
}
.backup-detail__flash--error {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-200);
  background-color: var(--color-red-50);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color-red-800);
}
.backup-detail__flash--success {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-200);
  background-color: var(--color-green-50);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color-green-800);
}
.backup-detail__card {
  margin-bottom: calc(var(--spacing) * 6);
  overflow: hidden;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  border-radius: 0.75rem;
}
.backup-detail__section {
  border: none;
  padding: 1.5rem;
  margin: 0;
  border-bottom: 1px solid #e5e7eb;
}
.backup-detail__section:last-of-type {
  border-bottom: none;
}
.backup-detail__section-title {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.backup-detail__section-icon {
  color: var(--color-gray-400);
  font-size: 0.875rem;
}
.backup-detail__description {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
}
.backup-detail__fields {
  display: grid;
  gap: 1.25rem;
}
.backup-detail__label {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.backup-detail__checkbox-label {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.backup-detail__checkbox {
  border-radius: 0.25rem;
}
.backup-detail__checkbox-text {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-700);
}
.backup-detail__checkboxes {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  padding: calc(var(--spacing) * 4);
}
.backup-detail__input {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.backup-detail__input:focus {
  border-color: var(--color-blue-500);
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-blue-500);
  outline: none;
}
.backup-detail__select {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.backup-detail__select:focus {
  border-color: var(--color-blue-500);
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-blue-500);
  outline: none;
}
.backup-detail__warning {
  margin-top: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-yellow-200);
  background-color: var(--color-yellow-50);
  padding: calc(var(--spacing) * 4);
}
.backup-detail__warning-text {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-yellow-800);
}
.backup-detail__card-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}
.backup-detail__btn--confirm {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-white);
  padding: 0.5rem 1rem;
  background: #2563eb;
  border: none;
  border-radius: 0.375rem;
}
.backup-detail__btn--confirm:hover {
  background-color: var(--color-blue-700);
}
.backup-detail__btn--cancel {
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  padding: 0.5rem 1rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  text-decoration: none;
  color: #374151;
}
.backup-detail__btn--cancel:hover {
  background-color: var(--color-gray-200);
}
.alcance-id-hidden {
  display: none;
}
@media (max-width: 768px) {
  .backup-detail__header {
    flex-direction: column;
    gap: 1rem;
  }
}
.license-alert {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
  margin-inline: auto;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 6);
}
.license-alert__header {
  margin-bottom: calc(var(--spacing) * 6);
}
.license-alert__subtitle {
  color: var(--color-gray-600);
}
.license-alert__card-wrap {
  margin-inline: auto;
  max-width: var(--container-lg);
}
.license-alert__card {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 8);
  text-align: center;
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.license-alert__card--warning {
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-yellow-400);
  background-color: var(--color-yellow-50);
}
.license-alert__card--success {
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-green-400);
  background-color: var(--color-green-50);
}
.license-alert__icon-wrap {
  margin-bottom: calc(var(--spacing) * 4);
}
.license-alert__icon-wrap--warning {
  color: var(--color-yellow-500);
}
.license-alert__icon-wrap--success {
  color: var(--color-green-500);
}
.license-alert__icon {
  margin-inline: auto;
  height: calc(var(--spacing) * 16);
  width: calc(var(--spacing) * 16);
}
.license-alert__status-title {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.license-alert__status-title--warning {
  color: var(--color-yellow-800);
}
.license-alert__status-title--success {
  color: var(--color-green-800);
}
.license-alert__days {
  margin-top: calc(var(--spacing) * 4);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.license-alert__days--expired {
  color: var(--color-red-600);
}
.license-alert__days--warning {
  color: var(--color-yellow-600);
}
.license-alert__days--ok {
  color: var(--color-green-600);
}
.license-alert__actions {
  margin-top: calc(var(--spacing) * 6);
  text-align: center;
}
.license-alert__back-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  background-color: var(--color-gray-600);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-white);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-700);
    }
  }
}
.license-status {
  margin-inline: auto;
  max-width: var(--container-7xl);
  padding: calc(var(--spacing) * 8);
}
.license-status__header {
  margin-bottom: calc(var(--spacing) * 6);
}
.license-status__subtitle {
  color: var(--color-gray-600);
}
.license-status__card {
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.license-status__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 6);
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.license-status__details {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.license-status__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  padding-bottom: calc(var(--spacing) * 2);
}
.license-status__label {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}
.license-status__value {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.license-status__value--missing {
  color: var(--color-red-500);
}
.license-status__badge {
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.license-status__badge--active {
  background-color: var(--color-green-100);
  color: var(--color-green-800);
}
.license-status__badge--inactive {
  background-color: var(--color-red-100);
  color: var(--color-red-800);
}
.license-status__days-panel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.license-status__days-box {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 6);
  text-align: center;
}
.license-status__days-box--warning {
  border-color: var(--color-yellow-200);
  background-color: var(--color-yellow-50);
}
.license-status__days-box--expired {
  border-color: var(--color-red-200);
  background-color: var(--color-red-50);
}
.license-status__days-box--ok {
  border-color: var(--color-green-200);
  background-color: var(--color-green-50);
}
.license-status__days-number {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.license-status__days-number--warning {
  color: var(--color-yellow-600);
}
.license-status__days-number--expired {
  color: var(--color-red-600);
}
.license-status__days-number--ok {
  color: var(--color-green-600);
}
.license-status__days-label {
  margin-top: calc(var(--spacing) * 2);
  color: var(--color-gray-600);
}
.license-status__days-warning {
  margin-top: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.license-status__days-warning--soon {
  color: var(--color-yellow-700);
}
.license-status__days-warning--expired {
  color: var(--color-red-700);
}
.license-status__no-expiry {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
  padding: calc(var(--spacing) * 6);
  text-align: center;
}
.license-status__no-expiry-text {
  color: var(--color-gray-500);
}
.license-status__alert-bar {
  margin-top: calc(var(--spacing) * 6);
}
.license-status__alert-link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-amber-100);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-amber-700);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-amber-200);
    }
  }
}
.license-status__alert-icon {
  margin-right: calc(var(--spacing) * 2);
}
.task-list {
  margin-inline: auto;
  max-width: var(--container-7xl);
  padding: calc(var(--spacing) * 8);
}
.task-list__breadcrumb-muted {
  color: var(--color-gray-600);
}
.task-list__breadcrumb-current {
  color: var(--color-gray-900);
}
.task-list__header {
  margin-bottom: calc(var(--spacing) * 8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.task-list__subtitle {
  color: var(--color-gray-600);
}
.task-list__btn--create {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--module-color, #2563eb);
}
.task-list__btn--create:hover {
  filter: brightness(0.9);
}
.task-list__flash--success {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-400);
  background-color: var(--color-green-100);
  padding: calc(var(--spacing) * 4);
  color: var(--color-green-700);
}
.task-list__counter {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
}
.task-list__counter-value {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.task-list__table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.task-list__table {
  min-width: 100%;
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
}
.task-list__thead {
  background-color: var(--color-gray-50);
}
.task-list__th {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: left;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.task-list__th--right {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: right;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.task-list__tbody {
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
  background-color: var(--color-white);
}
.task-list__row {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
}
.task-list__cell--code {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  color: var(--color-gray-900);
}
.task-list__cell {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
  color: var(--color-gray-700);
}
.task-list__cell--actions {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  text-align: right;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
}
.task-list__form-inline {
  display: inline;
}
.task-list__freq-select {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  &:focus {
    border-color: var(--color-blue-500);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
}
.task-list__cron-expr {
  margin-top: calc(var(--spacing) * 1);
  display: block;
  border-radius: 0.25rem;
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-600);
}
.task-list__text--muted {
  color: var(--color-gray-400);
}
.task-list__status-badge {
  display: inline-flex;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.task-list__status-badge--ok {
  background-color: var(--color-green-100);
  color: var(--color-green-800);
}
.task-list__status-badge--error {
  background-color: var(--color-red-100);
  color: var(--color-red-800);
}
.task-list__status-badge--unknown {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}
.task-list__active-badge {
  display: inline-flex;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.task-list__active-badge--yes {
  background-color: var(--color-green-100);
  color: var(--color-green-800);
}
.task-list__active-badge--no {
  background-color: var(--color-red-100);
  color: var(--color-red-800);
}
.task-list__action-group {
  display: flex;
  justify-content: flex-end;
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }
}
.task-list__btn--execute {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-blue-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-50);
    }
  }
}
.task-list__btn--edit {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-gray-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-100);
    }
  }
}
.task-list__btn--pause {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-yellow-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-yellow-50);
    }
  }
}
.task-list__btn--resume {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-green-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-green-50);
    }
  }
}
.task-list__command-badge {
  border-radius: 0.25rem;
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-700);
}
.task-list__flash--error {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-400);
  background-color: var(--color-red-100);
  padding: calc(var(--spacing) * 4);
  color: var(--color-red-700);
}
.task-list__empty-cell {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 8);
  text-align: center;
  color: var(--color-gray-500);
}
.task-list__wrapper {
  margin-bottom: calc(var(--spacing) * 4);
}
.task-list__wrapper-1 {
  margin-inline: auto;
}
.task-form {
  padding: calc(var(--spacing) * 8);
}
.task-form__breadcrumb-muted {
  color: var(--color-gray-600);
}
.task-form__breadcrumb-current {
  color: var(--color-gray-900);
}
.task-form__header {
  margin-bottom: calc(var(--spacing) * 8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.task-form__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}
.task-form__btn--back {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-200);
    }
  }
}
.task-form__flash--error {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-400);
  background-color: var(--color-red-100);
  padding: calc(var(--spacing) * 4);
  color: var(--color-red-700);
}
.task-form__flash--success {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-400);
  background-color: var(--color-green-100);
  padding: calc(var(--spacing) * 4);
  color: var(--color-green-700);
}
.task-form__card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.task-form__section {
  margin: calc(var(--spacing) * 0);
  border-style: var(--tw-border-style);
  border-width: 0px;
  padding: calc(var(--spacing) * 0);
}
.task-form__section-title {
  margin-bottom: calc(var(--spacing) * 6);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-200);
  padding-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.task-form__fields {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.task-form__field {
  margin-bottom: calc(var(--spacing) * 0);
}
.task-form__label {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.task-form__label-required {
  margin-left: calc(var(--spacing) * 0.5);
  color: var(--color-red-500);
}
.task-form__input {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-900);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:focus {
    border-color: var(--color-blue-500);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
}
.task-form__select {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-900);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:focus {
    border-color: var(--color-blue-500);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
}
.task-form__textarea {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-900);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:focus {
    border-color: var(--color-blue-500);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
}
.task-form__help {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-500);
}
.task-form__radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 4);
}
.task-form__radio-label {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-700);
}
.task-form__radio-input {
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  border-color: var(--color-gray-300);
  color: var(--color-blue-600);
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
}
.task-form__cron-wrapper {
  margin-top: calc(var(--spacing) * 3);
}
.task-form__toggle {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.task-form__toggle-input {
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  border-radius: 0.25rem;
  border-color: var(--color-gray-300);
  color: var(--color-blue-600);
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
}
.task-form__toggle-label {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-700);
}
.task-form__actions {
  margin-top: calc(var(--spacing) * 6);
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--spacing) * 3);
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-200);
  padding-top: calc(var(--spacing) * 6);
}
.task-form__btn--confirm {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-600);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700);
    }
  }
}
.task-form__btn--cancel {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-200);
    }
  }
}
.task-form__strategy-options {
  margin-top: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
  padding: calc(var(--spacing) * 4);
}
.task-form__strategy-options-header {
  margin-bottom: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-200);
  padding-bottom: calc(var(--spacing) * 2);
}
.task-form__strategy-options-title {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.task-form__strategy-options-toggle {
  cursor: pointer;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-blue-600);
  text-decoration-line: underline;
  &:hover {
    @media (hover: hover) {
      color: var(--color-blue-800);
    }
  }
}
.task-form__strategy-options-error {
  margin-top: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 2);
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-300);
  background-color: var(--color-red-50);
  padding: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-red-700);
}
.task-form__strategy-option {
  margin-bottom: calc(var(--spacing) * 4);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-100);
  padding-bottom: calc(var(--spacing) * 3);
  &:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }
  &:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  &:last-child {
    padding-bottom: calc(var(--spacing) * 0);
  }
}
.task-form__strategy-option-key {
  margin-left: calc(var(--spacing) * 2);
  border-radius: 0.25rem;
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-500);
}
.task-form__strategy-option-info {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-600);
  font-style: italic;
}
.task-form__strategy-option-default {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-500);
}
.task-form__strategy-option-default code {
  border-radius: 0.25rem;
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 1);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-700);
}
.task-form__strategy-option-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
}
@layer components {
  .translation-add {
    padding: calc(var(--spacing) * 8);
  }
  .translation-add__nav {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .translation-add__back-link {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .translation-add__back-link a {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .translation-add__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .translation-add__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .translation-add__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .translation-add__card {
    max-width: var(--container-2xl);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .translation-add__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .translation-add__field {
    display: flex;
    flex-direction: column;
  }
  .translation-add__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .translation-add__input--readonly {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-600);
  }
  .translation-add__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .translation-add__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .translation-add__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .translation-add__btn--cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .translation-add__btn--submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .translation-add__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .translation-add__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .translation-add__item-2 {
    margin-right: calc(var(--spacing) * 2);
  }
}
.trans-search {
  padding: calc(var(--spacing) * 8);
}
.trans-search__breadcrumb-area {
  margin-bottom: calc(var(--spacing) * 4);
}
.trans-search__breadcrumb-text--muted {
  color: var(--color-gray-600);
}
.trans-search__breadcrumb-text--dark {
  color: var(--color-gray-900);
}
.trans-search__back-area {
  margin-bottom: calc(var(--spacing) * 6);
}
.trans-search__back-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-blue-600);
  &:hover {
    @media (hover: hover) {
      color: var(--color-blue-800);
    }
  }
}
.trans-search__back-icon {
  margin-right: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
}
.trans-search__header {
  margin-bottom: calc(var(--spacing) * 8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trans-search__subtitle {
  color: var(--color-gray-600);
}
.trans-search__form-card {
  margin-bottom: calc(var(--spacing) * 6);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.trans-search__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--spacing) * 4);
}
.trans-search__form-field {
  min-width: calc(var(--spacing) * 50);
  flex: 1;
}
.trans-search__form-label {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.trans-search__input-wrapper {
  position: relative;
}
.trans-search__input {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-block: calc(var(--spacing) * 2);
  padding-right: calc(var(--spacing) * 3);
  padding-left: calc(var(--spacing) * 10);
  &:focus {
    border-color: var(--color-blue-500);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
}
.trans-search__input-icon {
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  color: var(--color-gray-400);
}
.trans-search__submit-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-600);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-white);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700);
    }
  }
}
.trans-search__submit-icon {
  margin-right: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.trans-search__result-card {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.trans-search__result-heading {
  margin-bottom: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.trans-search__result-heading-icon {
  margin-right: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  color: var(--color-green-600);
}
.trans-search__details-grid {
  margin-bottom: calc(var(--spacing) * 6);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 4);
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.trans-search__details-term {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
}
.trans-search__details-value {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  color: var(--color-gray-900);
}
.trans-search__details-value--mono {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  color: var(--color-gray-900);
}
.trans-search__overrides-heading {
  margin-bottom: calc(var(--spacing) * 3);
  display: flex;
  align-items: center;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}
.trans-search__overrides-heading-icon {
  margin-right: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.trans-search__result-count {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
}
.trans-search__result-count-value {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.trans-search__table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.trans-search__table {
  min-width: 100%;
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
}
.trans-search__table-head {
  background-color: var(--color-gray-50);
}
.trans-search__table-th {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: left;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.trans-search__table-th--right {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: right;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.trans-search__table-body {
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
  background-color: var(--color-white);
}
.trans-search__table-row {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
}
.trans-search__td {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
  color: var(--color-gray-700);
}
.trans-search__td--text {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-700);
}
.trans-search__td--actions {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  text-align: right;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
}
.trans-search__td--empty {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 8);
  text-align: center;
  color: var(--color-gray-500);
}
.trans-search__lang-badge {
  border-radius: calc(infinity * 1px);
  background-color: var(--color-blue-100);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-800);
}
.trans-search__actions {
  display: flex;
  justify-content: flex-end;
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }
}
.trans-search__action-btn {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-blue-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-50);
    }
  }
}
.trans-search__footer-actions {
  margin-top: calc(var(--spacing) * 6);
  display: flex;
  gap: calc(var(--spacing) * 3);
}
.trans-search__add-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-600);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-white);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700);
    }
  }
}
.trans-search__add-icon {
  margin-right: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.trans-search__not-found {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-amber-200);
  background-color: var(--color-amber-50);
  padding: calc(var(--spacing) * 4);
}
.trans-search__not-found-inner {
  display: flex;
  align-items: center;
}
.trans-search__not-found-icon {
  margin-right: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
  flex-shrink: 0;
  color: var(--color-amber-600);
}
.trans-search__not-found-title {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-amber-800);
}
.trans-search__not-found-text {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-amber-700);
}
.trans-search__wrapper {
  margin-inline: auto;
}
@layer components {
  .translation-edit {
    padding: calc(var(--spacing) * 8);
  }
  .translation-edit__container {
    max-width: var(--container-2xl);
  }
  .translation-edit__back-link {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .translation-edit__back-link a {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .translation-edit__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .translation-edit__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .translation-edit__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .translation-edit__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .translation-edit__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .translation-edit__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .translation-edit__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .translation-edit__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .translation-edit__hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .translation-edit__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .translation-edit__btn--cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .translation-edit__btn--submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .translation-edit__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .translation-edit__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .translation-edit__item-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .translation-edit__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .translation-edit {
    padding: calc(var(--spacing) * 8);
  }
  .translation-edit__container {
    max-width: var(--container-2xl);
  }
  .translation-edit__back-link {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .translation-edit__back-link a {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .translation-edit__back-link i {
    margin-right: calc(var(--spacing) * 2);
  }
  .translation-edit__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .translation-edit__description {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .translation-edit__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .translation-edit__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .translation-edit__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .translation-edit__input--disabled {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-600);
  }
  .translation-edit__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .translation-edit__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .translation-edit__btn-cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .translation-edit__btn-cancel i {
    margin-right: calc(var(--spacing) * 2);
  }
  .translation-edit__btn-submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .translation-edit__btn-submit i {
    margin-right: calc(var(--spacing) * 2);
  }
  .translation-edit__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .translation-edit__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .trans-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .trans-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .trans-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .trans-list__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .trans-list__filter-bar {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .trans-list__filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
  }
  .trans-list__filter-search {
    min-width: calc(var(--spacing) * 50);
    flex: 1;
  }
  .trans-list__filter-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .trans-list__filter-input-wrapper {
    position: relative;
  }
  .trans-list__filter-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-block: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 3);
    padding-left: calc(var(--spacing) * 10);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .trans-list__filter-search-icon {
    position: absolute;
    top: calc(1/2 * 100%);
    left: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    color: var(--color-gray-400);
  }
  .trans-list__filter-language {
    width: calc(var(--spacing) * 40);
  }
  .trans-list__filter-domain {
    width: calc(var(--spacing) * 48);
  }
  .trans-list__filter-origin {
    width: calc(var(--spacing) * 40);
  }
  .trans-list__filter-select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .trans-list__filter-buttons {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .trans-list__btn-filter {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .trans-list__btn-clear {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .trans-list__btn-search-code {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .trans-list__btn-inline-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .trans-list__cell-origin {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .trans-list__badge--bd {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
  }
  .trans-list__badge--yaml {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
  }
  .trans-list__counter {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .trans-list__counter-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .trans-list__table-container {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .trans-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .trans-list__thead {
    background-color: var(--color-gray-50);
  }
  .trans-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .trans-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .trans-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .trans-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .trans-list__cell-code {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .trans-list__cell-desc {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .trans-list__cell-langs {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .trans-list__cell-actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .trans-list__cell-empty {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .trans-list__lang-badge {
    margin-right: calc(var(--spacing) * 1);
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
  }
  .trans-list__lang-none {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .trans-list__actions-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .trans-list__btn-add-lang {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .trans-list__action-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .trans-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .trans-list__pagination-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .trans-list__pagination-controls {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .trans-list__pagination-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .trans-list__pagination-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .trans-list__pagination-icon--right {
    margin-left: calc(var(--spacing) * 1);
    display: inline;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
}
@layer components {
  .role-change {
    padding: calc(var(--spacing) * 8);
  }
  .role-change__breadcrumb-text--muted {
    color: var(--color-gray-600);
  }
  .role-change__breadcrumb-text--dark {
    color: var(--color-gray-900);
  }
  .role-change__container {
    max-width: var(--container-2xl);
  }
  .role-change__back-link {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .role-change__back-link a {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .role-change__title {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .role-change__form {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .role-change__fields {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .role-change__user-summary {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-md);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .role-change__user-summary p {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .role-change__field {
    display: block;
  }
  .role-change__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .role-change__select {
    width: 100%;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .role-change__cascading-fields {
    display: none;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .role-change__actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .role-change__btn--cancel {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .role-change__btn--submit {
    border-radius: var(--radius-md);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .role-change__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .role-change__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .role-change__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .scope-define {
    padding: calc(var(--spacing) * 8);
  }
  .scope-define__container {
    max-width: var(--container-2xl);
  }
  .scope-define__back-link {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .scope-define__back-link a {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .scope-define__title {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .scope-define__info-box {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 4);
  }
  .scope-define__info-box-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
  }
  .scope-define__info-box-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-700);
  }
  .scope-define__form {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .scope-define__fields {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .scope-define__user-summary {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-md);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .scope-define__user-summary-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .scope-define__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .scope-define__select {
    width: 100%;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .scope-define__details {
    display: none;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .scope-define__actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .scope-define__btn-cancel {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .scope-define__btn-submit {
    border-radius: var(--radius-md);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .scope-define__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .scope-define__item-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .scope-define__item-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .scope-define__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .user-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .user-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .user-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .user-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .user-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .user-list__subtitle {
    color: var(--color-gray-600);
  }
  .user-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .user-list__create-btn:hover {
    filter: brightness(0.9);
  }
  .user-list__counter {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .user-list__counter-count {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .user-list__counter-filtered {
    color: var(--color-gray-400);
  }
  .user-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .user-list__table {
    width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    min-width: 1400px;
  }
  .user-list__thead {
    background-color: var(--color-gray-50);
  }
  .user-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .user-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .user-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .user-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .user-list__td-id {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-500);
  }
  .user-list__td-name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .user-list__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .user-list__td--muted {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-500);
  }
  .user-list__td-status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    white-space: nowrap;
  }
  .user-list__td-actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .user-list__badge {
    display: inline-flex;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .user-list__badge--active {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .user-list__badge--inactive {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .user-list__actions-wrapper {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .user-list__action-btn--edit {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .user-list__action-btn--deactivate {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .user-list__action-btn--reactivate {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-green-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
  }
  .user-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 4);
  }
  .user-list__pagination-link {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .user-list__pagination-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .user-list__stats {
    margin-top: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .user-list__stat-card {
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .user-list__stat-card--total {
    border-color: var(--color-blue-500);
  }
  .user-list__stat-card--active {
    border-color: var(--color-green-500);
  }
  .user-list__stat-card--inactive {
    border-color: var(--color-red-500);
  }
  .user-list__stat-value {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
  }
  .user-list__stat-label {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .user-list__wrapper {
    margin-inline: auto;
  }
}
.user-detail {
  max-width: 1000px;
  margin: 0 auto;
  padding: calc(var(--spacing) * 8);
}
.user-detail__breadcrumb {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
}
.user-detail__breadcrumb-link {
  color: var(--color-blue-600);
  text-decoration-line: none;
}
.user-detail__breadcrumb-link:hover {
  text-decoration-line: underline;
}
.user-detail__breadcrumb-sep {
  margin: 0 0.25rem;
}
.user-detail__breadcrumb-current {
  color: #374151;
}
.user-detail__header {
  margin-bottom: calc(var(--spacing) * 6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.user-detail__title {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  margin: 0;
}
.user-detail__btn--back {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-700);
  text-decoration-line: none;
}
.user-detail__btn--back:hover {
  background-color: var(--color-gray-200);
}
.user-detail__flash--error {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-200);
  background-color: var(--color-red-50);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color-red-800);
}
.user-detail__flash--success {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-200);
  background-color: var(--color-green-50);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color-green-800);
}
.user-detail__card {
  margin-bottom: calc(var(--spacing) * 6);
  overflow: hidden;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  border-radius: 0.75rem;
}
.user-detail__section {
  border: none;
  padding: 1.5rem;
  margin: 0;
  border-bottom: 1px solid #e5e7eb;
}
.user-detail__section:last-of-type {
  border-bottom: none;
}
.user-detail__section-title {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.user-detail__section-icon {
  color: var(--color-gray-400);
  font-size: 0.875rem;
}
.user-detail__fields {
  display: grid;
  gap: 1.25rem;
}
.user-detail__fields--2col {
  grid-template-columns: repeat(2, 1fr);
}
.user-detail__fields--3col {
  grid-template-columns: repeat(3, 1fr);
}
.user-detail__label {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.user-detail__label-required {
  color: var(--color-red-500);
}
.user-detail__input {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.user-detail__input:focus {
  border-color: var(--color-blue-500);
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-blue-500);
  outline: none;
}
.user-detail__input--disabled {
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
}
.user-detail__select {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.user-detail__select:focus {
  border-color: var(--color-blue-500);
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-blue-500);
  outline: none;
}
.user-detail__hint {
  margin-top: calc(var(--spacing) * 1);
  display: none;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-500);
}
.user-detail__cascade-fields {
  display: none;
}
.user-detail__cascade-fields--fullwidth {
  grid-column: 1 / -1;
}
.user-detail__card-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}
.user-detail__btn--confirm {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-white);
  padding: 0.5rem 1rem;
  background: #2563eb;
  border: none;
  border-radius: 0.375rem;
}
.user-detail__btn--confirm:hover {
  background-color: var(--color-blue-700);
}
.user-detail__btn--cancel {
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  padding: 0.5rem 1rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  text-decoration: none;
  color: #374151;
}
.user-detail__btn--cancel:hover {
  background-color: var(--color-gray-200);
}
@media (max-width: 768px) {
  .user-detail__fields--2col {
    grid-template-columns: 1fr;
  }
  .user-detail__fields--3col {
    grid-template-columns: 1fr;
  }
  .user-detail__header {
    flex-direction: column;
    gap: 1rem;
  }
}
@layer components {
  .aggression-create {
    padding: calc(var(--spacing) * 8);
  }
  .aggression-create__wrapper-1 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .aggression-create__subnav {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .aggression-create__subnav-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .aggression-create__subnav-separator {
    margin-inline: calc(var(--spacing) * 2);
    color: var(--color-gray-400);
  }
  .aggression-create__subnav-current {
    color: var(--color-gray-900);
  }
  .aggression-create__wrapper {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .aggression-create__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .aggression-create__subtitle {
    margin-bottom: calc(var(--spacing) * 6);
    color: var(--color-gray-600);
  }
  .aggression-create__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .aggression-create__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .aggression-create__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .aggression-create__field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .aggression-create__label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .aggression-create__input {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .aggression-create__actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 4);
  }
  .aggression-create__btn--cancel {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    text-decoration: none;
  }
  .aggression-create__btn--submit {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    border: none;
    cursor: pointer;
  }
}
@layer components {
  .aggression-detail {
    padding: calc(var(--spacing) * 8);
  }
  .aggression-detail__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .aggression-detail__breadcrumb-nav {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .aggression-detail__breadcrumb-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .aggression-detail__breadcrumb-separator {
    margin-inline: calc(var(--spacing) * 2);
    color: var(--color-gray-400);
  }
  .aggression-detail__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .aggression-detail__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .aggression-detail__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .aggression-detail__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .aggression-detail__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .aggression-detail__subtitle {
    color: var(--color-gray-600);
  }
  .aggression-detail__actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .aggression-detail__btn--edit {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    text-decoration: none;
  }
  .aggression-detail__btn--intervinientes {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-indigo-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-indigo-700);
      }
    }
    text-decoration: none;
  }
  .aggression-detail__btn--formulario {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-emerald-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-emerald-700);
      }
    }
    text-decoration: none;
  }
  .aggression-detail__btn--back {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    text-decoration: none;
  }
  .aggression-detail__card {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .aggression-detail__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .aggression-detail__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .aggression-detail__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    padding: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .aggression-detail__field-label {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .aggression-detail__field-value {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .aggression-detail__field-value--inline {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .aggression-detail__field--full {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .aggression-detail__gravity-select {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
}
@layer components {
  .aggression-edit {
    padding: calc(var(--spacing) * 8);
  }
  .aggression-edit__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .aggression-edit__breadcrumb-nav {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .aggression-edit__breadcrumb-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .aggression-edit__breadcrumb-separator {
    margin-inline: calc(var(--spacing) * 2);
    color: var(--color-gray-400);
  }
  .aggression-edit__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .aggression-edit__container {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .aggression-edit__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .aggression-edit__flash-success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .aggression-edit__flash-error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .aggression-edit__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .aggression-edit__field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .aggression-edit__label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .aggression-edit__select {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .aggression-edit__input {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .aggression-edit__textarea {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .aggression-edit__actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 4);
  }
  .aggression-edit__btn-cancel {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    text-decoration: none;
  }
  .aggression-edit__btn-form {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-emerald-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-emerald-700);
      }
    }
    text-decoration: none;
  }
  .aggression-edit__btn-submit {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    border: none;
    cursor: pointer;
  }
}
@layer components {
  .aggr-form__page {
    padding: calc(var(--spacing) * 8);
  }
  .aggr-form__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .aggr-form__nav {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .aggr-form__nav-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .aggr-form__nav-sep {
    margin-inline: calc(var(--spacing) * 2);
    color: var(--color-gray-400);
  }
  .aggr-form__nav-current {
    color: var(--color-gray-900);
  }
  .aggr-form__container {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .aggr-form__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .aggr-form__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .aggr-form__description {
    margin-bottom: calc(var(--spacing) * 1);
    color: var(--color-gray-600);
  }
  .aggr-form__version {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .aggr-form__badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .aggr-form__badge--locked {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .aggr-form__badge--editable {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .aggr-form__item {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .aggr-form__item-1 {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .aggr-form__item-2 {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .aggr-form__item-3 {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .aggr-form__item-4 {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .aggr-form__item-5 {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .aggr-form__item-6 {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .aggr-form__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .aggr-form__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .aggr-form__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .aggr-form__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .aggr-form__required {
    color: var(--color-red-500);
  }
  .aggr-form__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .aggr-form__check-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .aggr-form__check-input {
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .aggr-form__check-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .aggr-form__options {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .aggr-form__radio-input {
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .aggr-form__help {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .aggr-form__actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 4);
  }
  .aggr-form__btn--back {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    text-decoration: none;
  }
  .aggr-form__btn--draft {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    background-color: var(--color-amber-500);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-600);
      }
    }
    border: none;
    cursor: pointer;
  }
  .aggr-form__btn--complete {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    background-color: var(--color-green-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-700);
      }
    }
    border: none;
    cursor: pointer;
  }
  .aggr-form__readonly {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .aggr-form__readonly-item {
    padding-block: calc(var(--spacing) * 3);
  }
  .aggr-form__readonly-item--bordered {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
  }
  .aggr-form__readonly-term {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .aggr-form__readonly-value {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .aggr-form__section {
    margin-top: calc(var(--spacing) * 8);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 6);
  }
  .aggr-form__section--admin {
    margin-top: calc(var(--spacing) * 8);
    border-radius: var(--radius-lg);
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 6);
  }
  .aggr-form__section-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .aggr-form__section-text {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .aggr-form__attach-row {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
  }
  .aggr-form__attach-field {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .aggr-form__btn--attach {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    border: none;
    cursor: pointer;
  }
  .aggr-form__btn--finalize {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
    border: none;
    cursor: pointer;
  }
  .aggr-form__reopen-form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .aggr-form__btn--reopen {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    background-color: var(--color-amber-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-700);
      }
    }
    border: none;
    cursor: pointer;
  }
}
@layer components {
  .aggression-participants {
    padding: calc(var(--spacing) * 8);
  }
  .aggression-participants__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .aggression-participants__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .aggression-participants__flash-success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .aggression-participants__flash-error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .aggression-participants__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .aggression-participants__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .aggression-participants__subtitle {
    color: var(--color-gray-600);
  }
  .aggression-participants__back-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    text-decoration: none;
  }
  .aggression-participants__results-count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .aggression-participants__results-count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .aggression-participants__table-card {
    margin-bottom: calc(var(--spacing) * 8);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .aggression-participants__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .aggression-participants__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .aggression-participants__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .aggression-participants__thead {
    background-color: var(--color-gray-50);
  }
  .aggression-participants__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .aggression-participants__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .aggression-participants__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .aggression-participants__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .aggression-participants__td--notes {
    max-width: var(--container-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .aggression-participants__td--empty {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    color: #6b7280;
  }
  .aggression-participants__wrapper {
    margin-inline: auto;
  }
  .aggression-participants__form-card {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .aggression-participants__form-body {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding: calc(var(--spacing) * 6);
  }
  .aggression-participants__form-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .aggression-participants__label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .aggression-participants__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .aggression-participants__field-hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .aggression-participants__form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: calc(var(--spacing) * 2);
  }
  .aggression-participants__submit-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    border: none;
    cursor: pointer;
  }
}
@layer components {
  .close-alert-modal {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .close-alert-modal__content {
    margin-inline: calc(var(--spacing) * 4);
    max-height: 90vh;
    width: 100%;
    max-width: var(--container-lg);
    overflow-y: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .close-alert-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .close-alert-modal__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .close-alert-modal__close-btn {
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .close-alert-modal__body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .close-alert-modal__error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-700);
  }
  .close-alert-modal__fields {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .close-alert-modal__label {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .close-alert-modal__required {
    color: var(--color-red-500);
  }
  .close-alert-modal__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: transparent;
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .close-alert-modal__hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .close-alert-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .close-alert-modal__btn--cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .close-alert-modal__btn--confirm {
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .alert-list__modal-overlay {
    display: none;
  }
}
.trace-panel {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.trace-panel__header {
  margin-bottom: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trace-panel__title {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.trace-panel__link {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-blue-600);
  &:hover {
    @media (hover: hover) {
      color: var(--color-blue-800);
    }
  }
}
.trace-panel__list {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.trace-panel__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-100);
  padding-block: calc(var(--spacing) * 2);
  &:last-child {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
}
.trace-panel__timestamp {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-400);
}
.trace-panel__status-row {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.trace-panel__status-origin {
  color: var(--color-gray-500);
}
.trace-panel__status-arrow {
  margin-inline: calc(var(--spacing) * 1);
  color: var(--color-gray-300);
}
.trace-panel__status-dest {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}
.trace-panel__user {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-400);
}
.trace-panel__more {
  padding-top: calc(var(--spacing) * 2);
  text-align: center;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-400);
}
.trace-panel__empty {
  padding-block: calc(var(--spacing) * 4);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
}
@layer components {
  .alert-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
    overflow: hidden;
  }
  .alert-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .alert-list__title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    font-family: 'Space Grotesk', sans-serif;
  }
  .alert-list__subtitle {
    color: var(--color-gray-600);
  }
  .alert-list__btn--create {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #2563eb);
  }
  .alert-list__btn--create:hover {
    filter: brightness(0.9);
  }
  .alert-list__breadcrumb-current {
    color: #111827;
  }
  .alert-list__message {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-200);
    background-color: var(--color-yellow-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-yellow-800);
  }
  .alert-list__bulk-actions {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .alert-list__bulk-actions.hidden {
    display: none;
  }
  .alert-list__bulk-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .alert-list__bulk-btn-icon {
    margin-right: calc(var(--spacing) * 1.5);
    display: inline;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .alert-list__btn--danger {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
    border: none;
  }
  .alert-list__btn--danger:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .alert-list__th.alert-list__th--checkbox {
    padding-inline: calc(var(--spacing) * 0);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    width: 1%;
    min-width: 1.25rem;
    white-space: nowrap;
  }
  .alert-list__cell--checkbox {
    padding-inline: calc(var(--spacing) * 0);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    width: 1%;
    min-width: 1.25rem;
    white-space: nowrap;
  }
  .alert-list__th--checkbox input[type='checkbox'], .alert-list__cell--checkbox input[type='checkbox'] {
    display: inline-block;
    margin: 0;
  }
  .alert-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .alert-list__count-value {
    font-weight: 500;
  }
  .alert-list__table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .alert-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    table-layout: auto;
  }
  .alert-list__thead {
    background-color: var(--color-gray-50);
  }
  .alert-list__th {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .alert-list__th--id {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
    width: 4rem;
  }
  .alert-list__th--status {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
    width: 6rem;
  }
  .alert-list__th--observaciones {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
    width: 14rem;
  }
  .alert-list__th--actions {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
    width: 5rem;
  }
  .alert-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .alert-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .alert-list__cell--id {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .alert-list__cell {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .alert-list__cell--observaciones {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .alert-list__cell--status {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .alert-list__cell--actions {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .alert-list__badge--pending {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-yellow-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-yellow-800);
  }
  .alert-list__badge--in-progress {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .alert-list__badge--closed {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .alert-list__badge--cancelled {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-red-800);
  }
  .alert-list__badge--default {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
  }
  .alert-list__th--thumbnail {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
    width: 5rem;
  }
  .alert-list__cell--thumbnail {
    padding-left: 1rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    text-align: center;
    width: 5rem;
    position: relative;
    overflow: visible !important;
  }
  .alert-list__thumbnail-wrap {
    position: relative;
    display: inline-block;
  }
  .alert-list__thumbnail-link {
    display: inline-block;
  }
  .alert-list__thumbnail {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.2s ease;
  }
  .alert-list__thumbnail:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  .alert-list__thumbnail--hidden {
    display: none;
  }
  .alert-list__thumbnail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 40px;
    background: #f9fafb;
    border-radius: 4px;
    border: 1px dashed #d1d5db;
    color: #9ca3af;
    font-size: 1rem;
    margin: 0 auto;
  }
  .alert-list__thumbnail-placeholder--hidden {
    display: none;
  }
  .alert-list__thumbnail-preview {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 12px;
    width: 320px;
    height: 240px;
    background-size: cover;
    background-position: center;
    border: 2px solid #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease-in, visibility 0s linear 150ms;
  }
  .alert-list__thumbnail-wrap:hover .alert-list__thumbnail-preview {
    opacity: 1;
    visibility: visible;
    transition: opacity 150ms ease-in, visibility 0s linear 0s;
  }
  .alert-list {
    overflow: visible !important;
  }
  .alert-list__table-wrap {
    overflow: visible !important;
  }
  .alert-list__action-group {
    display: flex;
    justify-content: flex-start;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .alert-list__action-link {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .alert-list__empty {
    padding-inline: calc(var(--spacing) * 6);
    text-align: center;
    color: var(--color-gray-500);
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .alert-list__empty-state {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .alert-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .alert-list__pagination-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .alert-list__pagination-value {
    font-weight: 500;
  }
  .alert-list__pagination-nav {
    display: flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .alert-list__page-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .alert-list__page-btn--active {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .alert-list__header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .alert-list__btn--export {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--color-white);
    color: var(--color-gray-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    border: 1px solid #9ca3af;
    white-space: nowrap;
    gap: 0.375rem;
    flex-wrap: nowrap;
  }
  .alert-list__action-link--danger {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
    border: none;
    background: none;
    cursor: pointer;
  }
  .alert-list__action-link--disabled {
    cursor: not-allowed;
    opacity: 30%;
    pointer-events: none;
  }
  .alert-list__modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1300;
    display: none;
    justify-content: center;
    align-items: center;
  }
  .alert-list__modal-overlay.active {
    display: flex;
  }
  .alert-list__modal {
    overflow: hidden;
    background-color: var(--color-white);
    border-radius: 0.75rem;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  }
  .alert-list__modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .alert-list__modal-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin: 0;
  }
  .alert-list__modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #9ca3af;
  }
  .alert-list__modal-close:hover {
    color: #374151;
  }
  .alert-list__modal-body {
    padding: calc(var(--spacing) * 6);
  }
  .alert-list__modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .alert-list__btn--cancel {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
  }
  .alert-list__btn--cancel:hover {
    background-color: var(--color-gray-200);
  }
  .alert-list__btn--confirm-close {
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .alert-list__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .alert-list__wrapper-1 {
    margin-inline: auto;
  }
  .app-filter-bar__group--search {
    position: relative;
  }
  .app-filter-bar__group--search .app-filter-bar__input {
    padding-right: calc(var(--spacing) * 9);
  }
  .alert-list .periodo-filter {
    --periodo-filter-btn-size: 34px;
    --periodo-filter-btn-width: 38px;
  }
  .app-filter-bar__search-btn {
    position: absolute;
    top: calc(var(--spacing) * 0);
    right: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 0);
    display: flex;
    width: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    color: var(--color-gray-500);
  }
  .app-filter-bar__search-btn .fa-search {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .app-filter-bar__btn--extra {
    display: inline-flex;
    width: calc(var(--spacing) * 9);
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing) * 0);
    min-width: 2.1875rem;
    height: 2.1875rem;
  }
}
@layer components {
  .alerts-placeholder {
    padding: calc(var(--spacing) * 8);
  }
  .alerts-placeholder__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .alerts-placeholder__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .alerts-placeholder__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .alerts-placeholder__description {
    color: var(--color-gray-600);
  }
  .alerts-placeholder__features-card {
    margin-inline: auto;
    display: inline-flex;
    max-width: var(--container-md);
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    text-align: left;
  }
  .alerts-placeholder__features-title {
    margin-bottom: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .alerts-placeholder__feature-row {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .alerts-placeholder__feature-icon {
    margin-top: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    color: var(--color-green-600);
  }
  .alerts-placeholder__feature-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .alerts-placeholder__cta-wrapper {
    margin-top: calc(var(--spacing) * 6);
  }
  .alerts-placeholder__cta-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .alerts-placeholder__wrapper {
    margin-inline: auto;
  }
}
@layer components {
  .alert-detail {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .alert-detail__page-header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 6);
  }
  .alert-detail__page-copy {
    min-width: calc(var(--spacing) * 0);
  }
  .alert-detail__page-eyebrow {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.16em;
    letter-spacing: 0.16em;
    color: var(--color-blue-600);
    text-transform: uppercase;
  }
  .alert-detail__page-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .alert-detail__page-subtitle {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .alert-detail__page-subtitle-sep {
    margin-inline: calc(var(--spacing) * 2);
    color: var(--color-gray-300);
  }
  .alert-detail__page-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .alert-detail__btn--back {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .alert-detail__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-red-800);
  }
  .alert-detail__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-green-800);
  }
  .alert-detail__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .alert-detail__grid--detail {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .alert-detail__grid--create {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .alert-detail__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .alert-detail__card--wide {
    grid-column: 1 / -1;
  }
  .alert-detail__card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 5);
  }
  .alert-detail__card-header--summary {
    align-items: center;
  }
  .alert-detail__card-eyebrow {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
    color: var(--color-gray-400);
    text-transform: uppercase;
  }
  .alert-detail__card-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0;
  }
  .alert-detail__card-subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    margin-bottom: 0;
  }
  .alert-detail__card-id {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
    margin: 0.25rem 0 0;
  }
  .alert-detail__card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .alert-detail__card-body {
    padding: calc(var(--spacing) * 6);
  }
  .alert-detail__card-section {
    margin-top: calc(var(--spacing) * 6);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-100);
    padding-top: calc(var(--spacing) * 6);
  }
  .alert-detail__mini-title {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .alert-detail__data-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .alert-detail__data-list--two-columns {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
    }
    column-gap: calc(var(--spacing) * 6);
    row-gap: calc(var(--spacing) * 4);
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .alert-detail__data-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 6);
  }
  .alert-detail__label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .alert-detail__label-required {
    color: var(--color-red-500);
  }
  .alert-detail__value {
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
    margin: 0;
    line-height: 1.45;
  }
  .alert-detail__value-muted {
    color: var(--color-gray-400);
  }
  .alert-detail__body-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    white-space: pre-line;
    color: var(--color-gray-700);
  }
  .alert-detail__fields {
    display: grid;
    gap: calc(var(--spacing) * 4);
  }
  .alert-detail__fields--2col {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .alert-detail__fields--3col {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .alert-detail__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .alert-detail__input:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .alert-detail__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .alert-detail__select:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .alert-detail__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    box-sizing: border-box;
  }
  .alert-detail__textarea:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .alert-detail__hint {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .alert-detail__form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .alert-detail__badge--status {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .alert-detail__badge--notif-status {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .alert-detail__badge--origin {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red-800);
  }
  .alert-detail__badge--dest {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-blue-800);
  }
  .alert-detail__badge--default {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-700);
  }
  .alert-detail__badge--channel {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-indigo-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-indigo-700);
  }
  .alert-detail__badge--sent {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-emerald-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-emerald-800);
  }
  .alert-detail__badge--error {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red-800);
  }
  .alert-detail__badge--pending {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-amber-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-amber-800);
  }
  .alert-detail__badge--agresion-si {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .alert-detail__badge--agresion-si i {
    font-size: 0.625rem;
  }
  .alert-detail__badge--agresion-no {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-emerald-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-emerald-800);
  }
  .alert-detail__badge--station-inactive {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .alert-detail__badge--activa {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-emerald-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-emerald-800);
  }
  .alert-detail__badge--inactiva {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .alert-detail__btn--change-status {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .alert-detail__link--plano {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
  }
  .alert-detail__link--agresion {
    margin-left: calc(var(--spacing) * 2);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
  }
  .alert-detail__btn--edit-obs {
    display: inline-flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
    background: none;
    border: none;
    cursor: pointer;
  }
  .alert-detail__sensor-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .alert-detail__sensor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .alert-detail__sensor-copy {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-direction: column;
  }
  .alert-detail__sensor-name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .alert-detail__sensor-meta {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .alert-detail__grupo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .alert-detail__grupo-chip {
    display: inline-block;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-700);
  }
  .alert-detail__grupo-chip--active {
    display: inline-block;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-700);
  }
  .alert-detail__tabs-card {
    margin-top: calc(var(--spacing) * 6);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .alert-detail__tabs-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .alert-detail__tab {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border: none;
    background: transparent;
    cursor: pointer;
  }
  .alert-detail__tab:hover {
    background-color: var(--color-white);
    color: var(--color-gray-700);
  }
  .alert-detail__tab--active {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    color: var(--color-blue-600);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .alert-detail__tab-content {
    padding: calc(var(--spacing) * 6);
    min-height: 200px;
  }
  .alert-detail__panel-loader {
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-400);
  }
  .alert-detail__toolbar {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .alert-detail__toolbar-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .alert-detail__table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
  }
  .alert-detail__table {
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .alert-detail__thead {
    background-color: var(--color-gray-50);
  }
  .alert-detail__th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
  }
  .alert-detail__tbody {
    background-color: var(--color-white);
  }
  .alert-detail__row {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
  }
  .alert-detail__row:nth-child(even) {
    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
    }
  }
  .alert-detail__cell {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-gray-700);
  }
  .alert-detail__cell--id {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .alert-detail__card-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .alert-detail__card-item {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
  }
  .alert-detail__card-item-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .alert-detail__card-item-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .alert-detail__image-preview {
    width: 100%;
    height: 140px;
    overflow: hidden;
    position: relative;
    background-color: var(--color-gray-100);
  }
  .alert-detail__image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .alert-detail__image-preview--clickable {
    cursor: zoom-in;
  }
  .alert-detail__image-preview-zoom {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 0%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 0%, transparent);
    }
    color: var(--color-white);
    opacity: 0%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .alert-detail__image-preview:hover .alert-detail__image-preview-zoom {
    background-color: color-mix(in srgb, #000 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
    }
    opacity: 100%;
  }
  .alert-detail__image-placeholder {
    display: flex;
    height: 140px;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-100);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    color: var(--color-gray-400);
  }
  .alert-detail__modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1300;
    justify-content: center;
    align-items: center;
  }
  .alert-detail__modal {
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    max-width: 440px;
    width: 90%;
  }
  .alert-detail__modal--wide {
    max-width: 560px;
  }
  .alert-detail__modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .alert-detail__modal-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0;
  }
  .alert-detail__modal-close {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
    background: none;
    border: none;
    cursor: pointer;
  }
  .alert-detail__modal-body {
    padding: calc(var(--spacing) * 6);
  }
  .alert-detail__modal-text {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    margin-top: 0;
  }
  .alert-detail__modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .alert-detail__estado-options {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .alert-detail__estado-btn {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    cursor: pointer;
  }
  .alert-detail__estado-btn:hover {
    border-color: var(--color-blue-200);
  }
  .alert-detail__estado-dot {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    flex-shrink: 0;
  }
  .alert-detail__estado-terminal {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .alert-detail__motivo-container, .alert-detail__obs-container {
    display: none;
  }
  .alert-detail__motivo-container {
    margin-top: calc(var(--spacing) * 4);
  }
  .alert-detail__obs-container {
    margin-top: calc(var(--spacing) * 3);
  }
  .alert-detail__form-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .alert-detail__btn--cancel {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
    border: 0;
  }
  .alert-detail__btn--confirm {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    border: 0;
  }
  .alert-detail__sensor-ids {
    margin-left: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .alert-tabs__group-tabs {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
  }
  .alert-tabs__group-subnav {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
  }
  .alert-tabs__group-card {
    padding: calc(var(--spacing) * 4);
  }
  .alert-tabs__group-empty {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
  }
  .empty-state-icon {
    margin-bottom: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    color: var(--color-gray-300);
  }
  .empty-state-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .empty-state-text {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .alert-detail__lightbox {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 90%, transparent);
    }
    padding: calc(var(--spacing) * 6);
  }
  .alert-detail__lightbox-close {
    position: absolute;
    top: calc(var(--spacing) * 5);
    right: calc(var(--spacing) * 5);
    display: inline-flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
    }
    border: none;
    cursor: pointer;
  }
  .alert-detail__lightbox-figure {
    display: flex;
    max-height: 90vh;
    max-width: 90vw;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    margin: 0;
  }
  .alert-detail__lightbox-image {
    max-height: 82vh;
    max-width: 100%;
    border-radius: var(--radius-lg);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .alert-detail__lightbox-caption {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  @media (max-width: 1024px) {
    .alert-detail__card--wide {
      grid-column: auto;
    }
  }
  @media (max-width: 768px) {
    .alert-detail {
      padding: calc(var(--spacing) * 4);
    }
    .alert-detail__page-header {
      flex-direction: column;
      align-items: stretch;
    }
    .alert-detail__page-actions {
      width: 100%;
    }
    .alert-detail__page-actions .alert-detail__btn--back {
      justify-content: center;
    }
    .alert-detail__card-header, .alert-detail__card-header--summary {
      flex-direction: column;
      align-items: flex-start;
    }
    .alert-detail__card-actions {
      width: 100%;
      justify-content: flex-start;
    }
    .alert-detail__data-row {
      flex-direction: column;
      gap: calc(var(--spacing) * 1);
    }
    .alert-detail__value {
      text-align: left;
    }
    .alert-detail__sensor-item {
      flex-direction: column;
      align-items: flex-start;
    }
    .alert-detail__form-actions {
      flex-direction: column;
      align-items: stretch;
    }
    .alert-detail__btn--cancel, .alert-detail__btn--confirm {
      justify-content: center;
    }
    .alert-detail__tabs-nav {
      flex-direction: column;
      align-items: stretch;
    }
    .alert-detail__tab {
      justify-content: flex-start;
    }
    .alert-detail__card-grid {
      grid-template-columns: 1fr;
    }
  }
}
@layer components {
  .notif-trace {
    padding: calc(var(--spacing) * 8);
  }
  .notif-trace__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .notif-trace__header-text {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .notif-trace__subtitle {
    color: var(--color-gray-600);
  }
  .notif-trace__export-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .notif-trace__export-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .notif-trace__flash {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
  }
  .notif-trace__flash--error {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    color: var(--color-red-800);
  }
  .notif-trace__flash--success {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    color: var(--color-green-800);
  }
  .notif-trace__flash--info {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    color: var(--color-blue-800);
  }
  .notif-trace__flash--warning {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-200);
    background-color: var(--color-yellow-50);
    padding: calc(var(--spacing) * 4);
    color: var(--color-yellow-800);
  }
  .notif-trace__flash-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .notif-trace__counter {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .notif-trace__counter-count {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .notif-trace__badge {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .notif-trace__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .notif-trace__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .notif-trace__thead {
    background-color: var(--color-gray-50);
  }
  .notif-trace__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .notif-trace__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .notif-trace__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .notif-trace__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .notif-trace__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .notif-trace__td--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .notif-trace__td--badge {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .notif-trace__canal-badge {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
  }
  .notif-trace__estado-badge--enviado {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .notif-trace__estado-badge--fallido {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-red-800);
  }
  .notif-trace__estado-badge--reenvio {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-yellow-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-yellow-800);
  }
  .notif-trace__estado-badge--default {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .notif-trace__actions {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .notif-trace__btn-intentos {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .notif-trace__btn-errores {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .notif-trace__btn-reenviar {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-amber-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-50);
      }
    }
  }
  .notif-trace__btn-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .notif-trace__modal-loading {
    text-align: center;
    color: var(--color-gray-500);
  }
  .notif-trace__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .notif-trace__wrapper-1 {
    margin-inline: auto;
  }
  .notif-trace__wrapper-2 {
    background-color: var(--color-red-600);
    color: var(--color-white);
  }
}
@layer components {
  .alert-traceability__toolbar-group {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .alert-traceability__export-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .alert-trace {
    max-width: 1100px;
    margin: 0 auto;
    padding: calc(var(--spacing) * 8);
  }
  .alert-trace__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .alert-trace__breadcrumb-sep {
    margin: 0 0.25rem;
  }
  .alert-trace__breadcrumb-current {
    color: #374151;
  }
  .alert-trace__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .alert-trace__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
  }
  .alert-trace__actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .alert-trace__toolbar {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .alert-trace__order-btns {
    display: flex;
    gap: calc(var(--spacing) * 1);
  }
  .alert-trace__count {
    font-size: 0.8rem;
    color: #6b7280;
  }
  .alert-trace__info-box {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-800);
  }
  .alert-trace__tabs-container {
    margin-bottom: calc(var(--spacing) * 6);
    overflow: hidden;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
  }
  .alert-trace__tabs-nav {
    display: flex;
    overflow-x: auto;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
  }
  .alert-trace__dynamic-content {
    padding: 1.5rem;
    display: none;
  }
  .alert-trace__loading {
    text-align: center;
    color: #9ca3af;
    padding: 2rem 0;
  }
  .alert-trace__loading-text {
    margin-top: 0.5rem;
  }
  .alert-trace__timeline {
    padding: 1.5rem;
  }
  .alert-trace__state-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
  }
  .alert-trace__state-badge--origin {
    background-color: #fee2e2;
  }
  .alert-trace__state-badge--dest {
    background-color: #dbeafe;
  }
  .alert-trace__sensor-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background-color: #e0e7ff;
    border-radius: 9999px;
    font-size: 0.7rem;
    color: #4338ca;
  }
  .alert-trace__na-text {
    color: #d1d5db;
  }
  .alert-trace__detail {
    flex: 1;
    font-size: 0.8rem;
  }
  .alert-trace__detail-label {
    color: #374151;
  }
  .alert-trace__detail-value {
    color: #6b7280;
  }
  .alert-trace__empty {
    text-align: center;
    padding: 3rem 0;
    color: #9ca3af;
  }
  .alert-trace__timeline-row {
    display: flex;
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .alert-trace__timeline-row--bordered {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
  }
  .alert-trace__breadcrumb-link {
    color: #2563eb;
    text-decoration: none;
  }
  .alert-trace__breadcrumb-link:hover {
    text-decoration: underline;
  }
  .alert-trace__title-icon {
    color: #2563eb;
  }
  .alert-trace__action-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    text-decoration: none;
  }
  .alert-trace__action-btn:hover {
    background-color: var(--color-gray-200);
  }
  .alert-trace__order-btn {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: 0.8rem;
  }
  .alert-trace__order-btn--active {
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-50);
    color: var(--color-blue-600);
  }
  .alert-trace__tab {
    cursor: pointer;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    --tw-border-style: none;
    border-style: none;
    border-color: transparent;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-500);
    font-size: 0.8rem;
    margin-bottom: -2px;
  }
  .alert-trace__tab--active {
    border-color: var(--color-blue-600);
    color: var(--color-blue-600);
  }
  .alert-trace__loading-icon {
    font-size: 1.5rem;
  }
  .alert-trace__col-timestamp {
    min-width: 130px;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #6b7280;
  }
  .alert-trace__col-state {
    min-width: 200px;
    flex-shrink: 0;
    font-size: 0.8rem;
  }
  .alert-trace__col-user {
    min-width: 120px;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #374151;
  }
  .alert-trace__icon--muted {
    color: #9ca3af;
  }
  .alert-trace__arrow-icon {
    margin: 0 0.375rem;
    color: #9ca3af;
    font-size: 0.625rem;
  }
  .alert-trace__empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
  }
}
@layer components {
  .linked-alert {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .linked-alert__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .linked-alert__list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .linked-alert__row {
    display: flex;
    justify-content: space-between;
  }
  .linked-alert__label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .linked-alert__value {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .linked-alert__badge {
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .linked-alert__badge--closed {
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
  }
  .linked-alert__badge--pending {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .linked-alert__badge--active {
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
  }
  .linked-alert__actions {
    margin-top: calc(var(--spacing) * 4);
  }
  .linked-alert__link {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .linked-alert__orphan {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-200);
    background-color: var(--color-yellow-50);
    padding: calc(var(--spacing) * 4);
  }
  .linked-alert__orphan-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-yellow-700);
  }
  .linked-alert__empty {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
}
@layer components {
  .event-files {
    margin-top: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .event-files__header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .event-files__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .event-files__upload-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .event-files__upload-btn-icon {
    margin-right: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .event-files__form-panel {
    margin-bottom: calc(var(--spacing) * 6);
    display: none;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .event-files__form-fields {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .event-files__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .event-files__file-input {
    display: block;
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    &::file-selector-button {
      margin-right: calc(var(--spacing) * 4);
    }
    &::file-selector-button {
      border-radius: var(--radius-lg);
    }
    &::file-selector-button {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
    &::file-selector-button {
      background-color: var(--color-blue-50);
    }
    &::file-selector-button {
      padding-inline: calc(var(--spacing) * 4);
    }
    &::file-selector-button {
      padding-block: calc(var(--spacing) * 2);
    }
    &::file-selector-button {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &::file-selector-button {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    &::file-selector-button {
      color: var(--color-blue-700);
    }
    &:hover {
      @media (hover: hover) {
        &::file-selector-button {
          background-color: var(--color-blue-100);
        }
      }
    }
  }
  .event-files__text-input {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    border-color: var(--color-gray-300);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .event-files__form-actions {
    display: flex;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .event-files__submit-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .event-files__cancel-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .event-files__gallery {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .event-files__empty-msg {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .event-files__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .event-files__card-main {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .event-files__card-icon {
    flex-shrink: 0;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .event-files__card-info {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-direction: column;
  }
  .event-files__card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .event-files__card-size {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .event-files__card-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .event-files__card-actions {
    margin-left: calc(var(--spacing) * 4);
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .event-files__action-btn {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-gray-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .event-files__action-btn--danger {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-600);
      }
    }
  }
  .event-files__thumb-wrap {
    position: relative;
    display: flex;
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-100);
  }
  .event-files__thumb {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .event-files__thumb-zoom {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 0%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 0%, transparent);
    }
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-white);
    opacity: 0%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .event-files__thumb-wrap:hover .event-files__thumb-zoom {
    opacity: 100%;
  }
  .event-files__thumb-wrap--video {
    background-color: var(--color-gray-800);
  }
  .event-files__video-play {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .lightbox-overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lightbox-overlay__backdrop {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    background-color: color-mix(in srgb, #000 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
    }
  }
  .lightbox-overlay__container {
    position: relative;
    z-index: 10;
    display: flex;
    max-height: 90vh;
    max-width: 90vw;
    align-items: center;
    justify-content: center;
  }
  .lightbox-overlay__close {
    position: absolute;
    top: calc(var(--spacing) * -10);
    right: calc(var(--spacing) * 0);
    z-index: 20;
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .lightbox-overlay__media {
    max-height: 85vh;
    max-width: 90vw;
    border-radius: var(--radius-lg);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
@layer components {
  .evidence-breadcrumbs {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .evidence-breadcrumbs__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .evidence-breadcrumbs__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .evidence-breadcrumbs__breadcrumb-current {
    color: var(--color-gray-900);
  }
}
@layer components {
  .frame-compare {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .frame-compare__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .frame-compare__subtitle {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .frame-compare__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .frame-compare__label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .frame-compare__placeholder {
    display: flex;
    min-height: calc(var(--spacing) * 48);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
  }
  .frame-compare__loading {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .frame-compare__message {
    display: none;
  }
}
@layer components {
  .event-basics {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .event-basics__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .event-basics__list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .event-basics__row {
    display: flex;
    justify-content: space-between;
  }
  .event-basics__label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .event-basics__value {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .event-basics__gps-timestamp {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
}
@layer components {
  .evidence-header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .evidence-header__title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .evidence-header__subtitle {
    color: var(--color-gray-600);
  }
  .evidence-header__actions {
    display: flex;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .evidence-header__download-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .evidence-header__secondary-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
}
@layer components {
  .event-filters {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-left: 3px solid var(--module-color, #e5e7eb);
    background-color: var(--module-color-bg, white);
  }
  .event-filters__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
  }
  .event-filters__field {
    width: calc(var(--spacing) * 48);
    grid-column: span 2;
  }
  .event-filters__field--flex {
    min-width: calc(var(--spacing) * 50);
    flex: 1;
  }
  .event-filters__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .event-filters__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .event-filters__checkbox-group {
    display: flex;
    align-items: center;
  }
  .event-filters__checkbox-label {
    display: flex;
    cursor: pointer;
    align-items: center;
  }
  .event-filters__checkbox {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .event-filters__checkbox-text {
    margin-left: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .event-filters__actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .event-filters__btn--submit {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #e5e7eb);
    color: #fff;
  }
  .event-filters__btn--submit:hover {
    filter: brightness(0.9);
  }
  .event-filters__btn--clear {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
  .event-filters-ai {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-orange-200);
    background-color: var(--color-orange-50);
    padding: calc(var(--spacing) * 4);
  }
  .event-filters-ai__row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .event-filters-ai__label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-orange-800);
  }
  .event-filters-ai__slider {
    height: calc(var(--spacing) * 2);
    flex: 1;
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius-lg);
    background-color: var(--color-orange-200);
  }
  .event-filters-ai__value {
    width: calc(var(--spacing) * 12);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-orange-900);
  }
}
@layer components {
  .detection-gallery {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detection-gallery__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .detection-gallery__subtitle {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .detection-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .detection-gallery__loading {
    grid-column: 1 / -1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .detection-gallery__pagination {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    justify-content: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
}
@layer components {
  .event-header__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .event-header__breadcrumb-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .event-header__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 2);
    color: var(--color-gray-400);
  }
  .event-header__breadcrumb-current {
    color: var(--color-gray-600);
  }
  .event-header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .event-header__title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .event-header__subtitle {
    color: var(--color-gray-600);
  }
  .event-header__actions {
    display: flex;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .event-header__export-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .event-header__back-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
}
@layer components {
  .detection-image {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detection-image__header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .detection-image__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .detection-image__confidence {
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .detection-image__confidence--high {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .detection-image__confidence--medium {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .detection-image__confidence--low {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .detection-image__viewer {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
  }
  .detection-image__img {
    margin-inline: auto;
    height: auto;
    max-width: 100%;
    cursor: crosshair;
  }
  .detection-image__overlay {
    pointer-events: none;
    position: absolute;
    top: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    height: 100%;
    width: 100%;
  }
  .detection-image__caption {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .detection-image__unavailable {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-200);
    background-color: var(--color-yellow-50);
    padding: calc(var(--spacing) * 6);
    text-align: center;
  }
  .detection-image__unavailable-icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    color: var(--color-yellow-400);
  }
  .detection-image__unavailable-text {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-yellow-700);
  }
}
@layer components {
  .event-type-filters--ai {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-orange-200);
    background-color: var(--color-orange-50);
    padding: calc(var(--spacing) * 4);
  }
  .event-type-filters--ai__row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .event-type-filters--ai__label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-orange-800);
  }
  .event-type-filters--ai__slider {
    height: calc(var(--spacing) * 2);
    flex: 1;
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius-lg);
    background-color: var(--color-orange-200);
  }
  .event-type-filters--ai__value {
    width: calc(var(--spacing) * 12);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-orange-900);
  }
}
@layer components {
  .event-type-table {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .event-type-table__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .event-type-table__head {
    background-color: var(--color-gray-50);
  }
  .event-type-table__body {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .event-type-table__th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .event-type-table__th--checkbox {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
  }
  .event-type-table__checkbox {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-purple-600);
  }
  .event-type-table__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .event-type-table__td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .event-type-table__td--secondary {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .event-type-table__td--checkbox {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
  }
  .event-type-table__td--plain {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .event-type-table__empty {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
  }
  .event-type-table__empty-title {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .event-type-table__empty-subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .event-type-table__badge {
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .event-type-table__badge--confirmed {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .event-type-table__badge--discarded {
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
  }
  .event-type-table__badge--pending {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .event-type-table__badge--new {
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
  }
  .event-type-table__alerta--yes {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-red-600);
  }
  .event-type-table__alerta--no {
    color: var(--color-gray-400);
  }
  .event-type-table__na {
    color: var(--color-gray-400);
  }
  .event-type-table__action-link {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .event-type-table__confianza-wrap {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .event-type-table__confianza-track {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 16);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-200);
  }
  .event-type-table__confianza-bar {
    height: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .event-type-table__confianza-bar--high {
    background-color: var(--color-red-500);
  }
  .event-type-table__confianza-bar--medium {
    background-color: var(--color-yellow-500);
  }
  .event-type-table__confianza-bar--low {
    background-color: var(--color-green-500);
  }
  .event-type-table__confianza-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .event-type-table__confianza-text--high {
    color: var(--color-red-700);
  }
  .event-type-table__confianza-text--medium {
    color: var(--color-yellow-700);
  }
  .event-type-table__confianza-text--low {
    color: var(--color-green-700);
  }
}
@layer components {
  .event-metadata {
    margin-top: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .event-metadata__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .json-tree {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .json-tree__row {
    display: flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 1);
    border-radius: 0.25rem;
    padding-block: calc(var(--spacing) * 0.5);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .json-tree__toggle {
    display: inline-block;
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    cursor: pointer;
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
    -webkit-user-select: none;
    user-select: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
  .json-tree__leaf-spacer {
    display: inline-block;
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }
  .json-tree__key {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-indigo-700);
  }
  .json-tree__sep {
    color: var(--color-gray-400);
  }
  .json-tree__hint {
    margin-left: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .json-tree__string {
    color: var(--color-green-700);
  }
  .json-tree__number {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
  }
  .json-tree__bool {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .json-tree__bool--true {
    color: var(--color-emerald-600);
  }
  .json-tree__bool--false {
    color: var(--color-red-600);
  }
  .json-tree__null {
    color: var(--color-gray-400);
    font-style: italic;
  }
  .event-metadata__invalid-block {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-200);
    background-color: var(--color-yellow-50);
    padding: calc(var(--spacing) * 4);
  }
  .event-metadata__invalid-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-yellow-700);
  }
  .event-metadata__invalid-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .event-metadata__empty {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
}
@layer components {
  .payload-metadata {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .payload-metadata__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .payload-metadata__code-block {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .payload-metadata__code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: pre-wrap;
    color: var(--color-gray-800);
  }
}
@layer components {
  .upload-modal__overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .upload-modal__container {
    margin-inline: calc(var(--spacing) * 4);
    max-height: 90vh;
    width: 100%;
    max-width: var(--container-lg);
    overflow-y: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .upload-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .upload-modal__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .upload-modal__close-btn {
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .upload-modal__body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .upload-modal__fields {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .upload-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .upload-modal__close-icon {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
  }
  .upload-modal__field-group {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .upload-modal__label {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .upload-modal__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .upload-modal__btn-cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .upload-modal__btn-confirm {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
}
@layer components {
  .multimedia-panel {
    margin-top: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .multimedia-panel__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .multimedia-panel__status {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .multimedia-panel__preview {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
  }
  .multimedia-panel__thumb-wrap {
    height: calc(var(--spacing) * 32);
    width: calc(var(--spacing) * 48);
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-100);
  }
  .multimedia-panel__thumb {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .multimedia-panel__thumb-error {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .multimedia-panel__info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .multimedia-panel__meta {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .multimedia-panel__links {
    margin-top: calc(var(--spacing) * 1);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .multimedia-panel__link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-100);
      }
    }
  }
}
@layer components {
  .event-sensors {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .event-sensors__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .event-sensors__table-wrap {
    overflow-x: auto;
  }
  .event-sensors__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .event-sensors__th {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .event-sensors__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .event-sensors__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .event-sensors__td {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .event-sensors__link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .event-sensors__empty {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
}
@layer components {
  .event-variables {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .event-variables__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .event-variables__table-wrap {
    overflow-x: auto;
  }
  .event-variables__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .event-variables__th {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .event-variables__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .event-variables__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .event-variables__td {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .event-variables__td--meta {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .event-variables__empty {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
}
@layer components {
  .context-video {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .context-video__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .context-video__player-wrap {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-900);
  }
  .context-video__player {
    max-height: calc(var(--spacing) * 96);
    width: 100%;
  }
  .context-video__caption {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .context-video__unavailable {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 6);
    text-align: center;
  }
  .context-video__unavailable-icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    color: var(--color-blue-400);
  }
  .context-video__unavailable-text {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-700);
  }
}
@layer components {
  .detection-compare__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .detection-compare__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .detection-compare__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .detection-compare__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .detection-compare {
    padding: calc(var(--spacing) * 8);
  }
  .detection-compare__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .detection-compare__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .detection-compare__subtitle {
    color: var(--color-gray-600);
  }
  .detection-compare__back-link {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .detection-compare__empty {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 12);
    text-align: center;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detection-compare__empty-message {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .detection-compare__empty-hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .detection-compare__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .detection-compare__grid--cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .detection-compare__grid--cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .detection-compare__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detection-compare__image-area {
    position: relative;
    display: flex;
    height: calc(var(--spacing) * 48);
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-100);
  }
  .detection-compare__image-placeholder {
    text-align: center;
  }
  .detection-compare__icon--lg {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    color: var(--color-gray-400);
  }
  .detection-compare__image-key {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .detection-compare__no-image {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .detection-compare__confidence-badge {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .detection-compare__confidence-badge--high {
    background-color: var(--color-red-500);
    color: var(--color-white);
  }
  .detection-compare__confidence-badge--medium {
    background-color: var(--color-yellow-400);
    color: var(--color-gray-900);
  }
  .detection-compare__confidence-badge--low {
    background-color: var(--color-green-500);
    color: var(--color-white);
  }
  .detection-compare__body {
    padding: calc(var(--spacing) * 4);
  }
  .detection-compare__event-title {
    margin-bottom: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .detection-compare__event-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .detection-compare__details {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .detection-compare__detail-row {
    display: flex;
    justify-content: space-between;
  }
  .detection-compare__detail-label {
    color: var(--color-gray-500);
  }
  .detection-compare__detail-value {
    color: var(--color-gray-900);
  }
  .detection-compare__detail-value--small {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-900);
  }
  .detection-compare__status-badge {
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .detection-compare__status-badge--confirmed {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .detection-compare__status-badge--discarded {
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
  }
  .detection-compare__status-badge--pending {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .detection-compare__status-badge--new {
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
  }
  .detection-compare__coords-block {
    margin-top: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-100);
    padding-top: calc(var(--spacing) * 2);
  }
  .detection-compare__coords-label {
    margin-bottom: calc(var(--spacing) * 1);
    color: var(--color-gray-500);
  }
  .detection-compare__coords-value {
    border-radius: 0.25rem;
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
}
@layer components {
  #imagen-viewer {
    min-height: 400px;
  }
  .evidence-page {
    padding: calc(var(--spacing) * 8);
  }
  .evidence-container {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
}
@layer components {
  .event-detail {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .event-detail__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}
@layer components {
  .event-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .event-detail__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .event-detail__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .event-detail__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .event-detail {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .event-detail__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .event-detail__header-left {
    display: flex;
    flex-direction: column;
  }
  .event-detail__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .event-detail__subtitle {
    color: var(--color-gray-600);
  }
  .event-detail__back-link {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .event-detail__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .event-detail__section {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .event-detail__section--full {
    margin-top: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .event-detail__section-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .event-detail__data-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .event-detail__data-row {
    display: flex;
    justify-content: space-between;
  }
  .event-detail__data-term {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .event-detail__data-value {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .event-detail__badge {
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .event-detail__badge--red {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .event-detail__badge--gray {
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
  }
  .event-detail__badge--yellow {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .event-detail__confidence-value {
    margin-bottom: calc(var(--spacing) * 4);
    text-align: center;
  }
  .event-detail__confidence-number {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .event-detail__confidence-number--high {
    color: var(--color-red-600);
  }
  .event-detail__confidence-number--medium {
    color: var(--color-yellow-600);
  }
  .event-detail__confidence-number--low {
    color: var(--color-green-600);
  }
  .event-detail__confidence-track {
    height: calc(var(--spacing) * 4);
    width: 100%;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-200);
  }
  .event-detail__confidence-bar {
    height: calc(var(--spacing) * 4);
    border-radius: calc(infinity * 1px);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .event-detail__confidence-bar--high {
    background-color: var(--color-red-500);
  }
  .event-detail__confidence-bar--medium {
    background-color: var(--color-yellow-500);
  }
  .event-detail__confidence-bar--low {
    background-color: var(--color-green-500);
  }
  .event-detail__confidence-label {
    margin-top: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .event-detail__confidence-empty {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .event-detail__coordinates {
    margin-top: calc(var(--spacing) * 6);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .event-detail__coordinates-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .event-detail__coordinates-pre {
    overflow: auto;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .event-detail__media-loaded {
    position: relative;
    display: flex;
    min-height: calc(var(--spacing) * 50);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
  }
  .event-detail__media-loading-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .event-detail__media-ref {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .event-detail__media-empty {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 8);
    text-align: center;
  }
  .event-detail__media-icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    color: var(--color-gray-300);
  }
  .event-detail__media-empty-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .event-detail__video-loaded {
    display: flex;
    min-height: calc(var(--spacing) * 50);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
  }
  .event-detail__include {
    margin-top: calc(var(--spacing) * 6);
  }
  .event-detail__payload-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .event-detail__payload-pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: pre-wrap;
    color: var(--color-gray-800);
  }
}
@layer components;
@layer components {
  .event-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .event-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .event-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .event-list__subtitle {
    color: var(--color-gray-600);
  }
  .event-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .event-list__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .event-list__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .event-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .event-list__header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .event-list__btn--export {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--color-white);
    color: var(--color-gray-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    border: 1px solid #9ca3af;
    white-space: nowrap;
    gap: 0.375rem;
    flex-wrap: nowrap;
  }
  .event-list__filters {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .event-list__filter-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .event-list__filter-row {
    display: grid;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: 2fr 2fr 1fr;
  }
  .event-list__filter-row--bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .event-list__filter-group {
    min-width: calc(var(--spacing) * 0);
  }
  .event-list__filter-group--periodo {
    flex: 1;
  }
  .event-list__filter-group--checkbox {
    display: flex;
    align-items: center;
  }
  .event-list__filter-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .event-list__filter-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .event-list__checkbox {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .event-list__checkbox-label {
    display: flex;
    cursor: pointer;
    align-items: center;
  }
  .event-list__checkbox-label-text {
    margin-left: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .event-list__filter-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .event-list__filter-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .event-list__filter-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .event-list .app-filter-bar__group {
    min-width: 0;
  }
  .event-list .app-filter-bar__select {
    max-width: 14rem;
  }
  .event-list .event-list__tipo-evento-select {
    max-width: 18rem;
  }
  .event-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .event-list__count-value {
    font-weight: 500;
  }
  .event-list__count-filtered {
    color: var(--color-gray-400);
  }
  .event-list__table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .event-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .event-list__thead {
    background-color: var(--color-gray-50);
  }
  .event-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .event-list__th--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .event-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .event-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .event-list__cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .event-list__cell--variables {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .event-list__cell--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .event-list__th--thumbnail {
    text-align: left;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    width: 5rem;
    padding-left: 1rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .event-list__cell--thumbnail {
    text-align: left;
    width: 5rem;
    padding-left: 1rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    position: relative;
    overflow: visible !important;
  }
  .event-list__thumbnail-wrap {
    position: relative;
    display: inline-block;
  }
  .event-list__thumbnail-link {
    display: inline-block;
  }
  .event-list__thumbnail {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.2s ease;
  }
  .event-list__thumbnail:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  .event-list__thumbnail--hidden {
    display: none;
  }
  .event-list__thumbnail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 40px;
    background: #f9fafb;
    border-radius: 4px;
    border: 1px dashed #d1d5db;
    color: #9ca3af;
    font-size: 1rem;
  }
  .event-list__thumbnail-placeholder--hidden {
    display: none;
  }
  .event-list__thumbnail-preview {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 12px;
    width: 320px;
    height: 240px;
    background-size: cover;
    background-position: center;
    border: 2px solid #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease-in, visibility 0s linear 150ms;
  }
  .event-list__thumbnail-wrap:hover .event-list__thumbnail-preview {
    opacity: 1;
    visibility: visible;
    transition: opacity 150ms ease-in, visibility 0s linear 0s;
  }
  .event-list {
    overflow: visible !important;
  }
  .event-list__table-wrap {
    overflow: visible !important;
  }
  .event-list__sort-link {
    display: inline-flex;
    align-items: center;
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
  .event-list__sort-icon {
    margin-left: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .event-list__sort-icon--inactive {
    margin-left: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    opacity: 0%;
  }
  .event-list__sort-link:hover .event-list__sort-icon--inactive {
    opacity: 0.5;
  }
  .event-list__alert-link {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .event-list__na {
    color: var(--color-gray-400);
  }
  .event-list__details {
    cursor: pointer;
  }
  .event-list__details-summary {
    cursor: pointer;
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .event-list__details-pre {
    margin-top: calc(var(--spacing) * 2);
    max-height: calc(var(--spacing) * 40);
    overflow: auto;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .event-list__action-group {
    display: flex;
    justify-content: flex-start;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .event-list__action-link {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .event-list__action-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .event-list__empty {
    padding-inline: calc(var(--spacing) * 6);
    text-align: center;
    color: var(--color-gray-500);
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .event-list__empty-state {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .event-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .event-list__pagination-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .event-list__pagination-value {
    font-weight: 500;
  }
  .event-list__pagination-nav {
    display: flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .event-list__page-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .event-list__page-btn--active {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .event-list__auto-refresh {
    margin-top: calc(var(--spacing) * 4);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .event-list__auto-refresh-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
}
@layer components {
  .event-type-list {
    padding: calc(var(--spacing) * 8);
  }
  .event-type-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .event-type-list__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .event-type-list__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .event-type-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .event-type-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .event-type-list__subtitle {
    color: var(--color-gray-600);
  }
  .event-type-list__header-actions {
    display: flex;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .event-type-list__btn-compare {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .event-type-list__btn-compare:hover {
    background-color: var(--color-blue-700);
  }
  .event-type-list__btn-compare:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .event-type-list__btn-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .event-type-list .app-filter-bar__group {
    min-width: 0;
  }
  .event-type-list .app-filter-bar__select {
    max-width: 16rem;
  }
  .event-type-list__counter {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .event-type-list__counter-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .event-type-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .event-type-list__page-link {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .event-type-list__page-link--inactive {
    background-color: var(--color-white);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .event-type-list__page-link--active {
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
}
@layer components {
  .media-grid {
    padding: calc(var(--spacing) * 8);
  }
  .media-grid__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .media-grid__breadcrumb-link {
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .media-grid__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .media-grid__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .media-grid__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .media-grid__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .media-grid__subtitle {
    color: var(--color-gray-600);
  }
  .media-grid__header-actions {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .media-grid__back-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .media-grid__btn-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .media-grid__data {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .media-grid__empty {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 12);
    text-align: center;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .media-grid__cards {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .media-grid__card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .media-grid__thumbnail {
    display: flex;
    height: calc(var(--spacing) * 40);
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-100);
  }
  .media-grid__thumbnail-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .media-grid__thumbnail-placeholder {
    text-align: center;
    color: var(--color-gray-400);
  }
  .media-grid__thumbnail-placeholder-icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
  }
  .media-grid__thumbnail-placeholder-text {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .media-grid__thumbnail-error {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  .media-grid__thumbnail-error-icon {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    color: var(--color-red-400);
  }
  .media-grid__card-body {
    padding: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .media-grid__badge {
    margin-right: calc(var(--spacing) * 1);
    display: inline-block;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .media-grid__card-date {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .media-grid__card-link {
    position: absolute;
    inset: calc(var(--spacing) * 0);
  }
  .media-grid__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .media-grid__page-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .media-grid__page-btn--active {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .media-grid__wrapper {
    margin-inline: auto;
  }
}
@layer components {
  .evo-list {
    padding: calc(var(--spacing) * 8);
  }
  .evo-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .evo-list__breadcrumb-text--muted {
    color: var(--color-gray-600);
  }
  .evo-list__breadcrumb-text--current {
    color: var(--color-gray-900);
  }
  .evo-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .evo-list__title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .evo-list__subtitle {
    color: var(--color-gray-600);
  }
  .evo-list__btn-new {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .evo-list__btn-new-icon {
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .evo-list__filters {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .evo-list__filters-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
  }
  .evo-list__filter-field {
    min-width: calc(var(--spacing) * 50);
    flex: 1;
  }
  .evo-list__filter-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .evo-list__filter-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .evo-list__filter-select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .evo-list__filter-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .evo-list__btn-filter {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .evo-list__btn-filter-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .evo-list__btn-clear {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .evo-list__table-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .evo-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .evo-list__thead {
    background-color: var(--color-gray-50);
  }
  .evo-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .evo-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .evo-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .evo-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .evo-list__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .evo-list__td--id {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .evo-list__td--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .evo-list__td--empty {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .evo-list__badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .evo-list__row-actions {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .evo-list__action-btn {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .evo-list__action-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .evo-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .evo-list__pagination-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .evo-list__pagination-info-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .evo-list__pagination-controls {
    display: flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .evo-list__pagination-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .evo-list__pagination-current {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .evo-list__wrapper {
    margin-top: calc(var(--spacing) * 8);
  }
  .evo-list__wrapper-1 {
    margin-inline: auto;
  }
  .evo-list__btn-analytics {
    margin-top: calc(var(--spacing) * 4);
    display: inline-block;
  }
  .evo-list__btn-analytics--primary {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
}
@layer components {
  .variables-modal__overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .variables-modal__container {
    margin-inline: calc(var(--spacing) * 4);
    max-height: 90vh;
    width: 100%;
    max-width: var(--container-lg);
    overflow-y: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .variables-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .variables-modal__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .variables-modal__close-btn {
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .variables-modal__body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .variables-modal__fields {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .variables-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
}
@layer components {
  .temporal-selector__navigation {
    margin-top: calc(var(--spacing) * 2);
  }
}
@layer components {
  .breadcrumb__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .compare-header {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .compare-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .compare-header__subtitle {
    color: var(--color-gray-600);
  }
  .compare-header__actions {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .compare-header__back-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .compare-header__item {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .metrics-diff {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .metrics-diff__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .metrics-diff__table-wrap {
    overflow-x: auto;
  }
  .metrics-diff__table {
    width: 100%;
    table-layout: auto;
  }
  .metrics-diff__thead-row {
    background-color: var(--color-gray-50);
  }
  .metrics-diff__th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .metrics-diff__th--right {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .metrics-diff__th--option-a {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-700);
  }
  .metrics-diff__th--option-b {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-700);
  }
  .metrics-diff__empty-cell {
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-400);
  }
  .metrics-diff__wrapper {
    margin-inline: auto;
  }
}
@layer components {
  .compare-option {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .compare-option__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .compare-option__title--blue {
    color: var(--color-blue-700);
  }
  .compare-option__title--green {
    color: var(--color-green-700);
  }
  .compare-option__placeholder-text {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .compare-option__table-wrap {
    margin-top: calc(var(--spacing) * 4);
    overflow-x: auto;
  }
  .compare-option__table {
    width: 100%;
    table-layout: auto;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .compare-option__thead-row {
    background-color: var(--color-gray-50);
  }
  .compare-option__th {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    color: var(--color-gray-700);
  }
  .compare-option__th--right {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: right;
    color: var(--color-gray-700);
  }
  .compare-option__empty-cell {
    padding-block: calc(var(--spacing) * 4);
    text-align: center;
    color: var(--color-gray-400);
  }
  .compare-option__placeholder-icon {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    color: var(--color-gray-400);
  }
  .compare-option__empty-icon {
    margin-inline: auto;
  }
  .compare-option__placeholder {
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
  }
}
@layer components {
  .compare-type-selector {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .compare-type-selector__row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 6);
  }
  .compare-type-selector__label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .compare-type-selector__options {
    display: flex;
    gap: calc(var(--spacing) * 4);
  }
  .compare-type-selector__option {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .compare-type-selector__radio {
    color: var(--color-blue-600);
    appearance: none;
    border-radius: 9999px;
    width: 1rem;
    height: 1rem;
    border: 1px solid #6b7280;
    cursor: pointer;
  }
  .compare-type-selector__radio:checked {
    border-color: transparent;
    background-color: currentColor;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .compare-type-selector__option-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
}
@layer components {
  .compare-view-selector {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .compare-view-selector__row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .compare-view-selector__label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .compare-view-selector__buttons {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .compare-view-selector__btn--active {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .compare-view-selector__btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .compare-view-selector__item {
    margin-right: calc(var(--spacing) * 1);
  }
  .compare-view-selector__item-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .compare-view-selector__item-2 {
    margin-right: calc(var(--spacing) * 1);
  }
}
@layer components {
  .compare-selectors {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .compare-selectors__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .compare-selectors__label {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .compare-selectors__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .compare-selectors__swap-wrap {
    display: flex;
    justify-content: center;
  }
  .compare-selectors__swap-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .compare-selectors__date-range {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .compare-selectors__compare-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .compare-selectors__presets {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .compare-selectors__preset-select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .compare-selectors__date-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .compare-selectors__side-by-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
  }
  .compare-selectors__action {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .compare-selectors__input-1 {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .compare-selectors__input-2 {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .compare-selectors__input-3 {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .compare-selectors__input-4 {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .compare-selectors__item {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .overlay-view {
    margin-bottom: calc(var(--spacing) * 6);
    display: none;
  }
  .overlay-view__card {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .overlay-view__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .overlay-view__legend {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing) * 4);
  }
  .overlay-view__legend-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .overlay-view__legend-bar--a {
    display: inline-block;
    height: calc(var(--spacing) * 1);
    width: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    background-color: var(--color-blue-500);
  }
  .overlay-view__legend-bar--b {
    display: inline-block;
    height: calc(var(--spacing) * 1);
    width: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    background-color: var(--color-green-500);
  }
  .overlay-view__legend-label {
    color: var(--color-gray-600);
  }
  .overlay-view__placeholder {
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
  }
  .overlay-view__placeholder-icon {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    color: var(--color-gray-400);
  }
}
.comparison {
  padding: calc(var(--spacing) * 8);
}
.comparativa-dos {
  padding: calc(var(--spacing) * 8);
}
.comparison__breadcrumb-wrapper {
  margin-bottom: calc(var(--spacing) * 4);
}
.comparison__breadcrumb-current {
  color: var(--color-gray-900);
}
.comparison__header {
  margin-bottom: calc(var(--spacing) * 6);
}
.comparison__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comparison__subtitle {
  color: var(--color-gray-600);
}
.comparison__header-actions {
  display: flex;
  gap: calc(var(--spacing) * 3);
}
.comparison__btn-primary {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-600);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700);
    }
  }
}
.comparison__btn-secondary {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-600);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-700);
    }
  }
}
.comparison__btn--sm {
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.comparison__card--compact {
  margin-bottom: calc(var(--spacing) * 6);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 4);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.comparison__selector-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
.comparison__label {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}
.comparison__date-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 4);
  @media (width >= 48rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.comparison__field-label {
  margin-bottom: calc(var(--spacing) * 2);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}
.comparison__date-input {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
}
.comparison__date-input:focus {
  border-color: var(--color-blue-500);
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-blue-500);
  --tw-outline-style: none;
  outline-style: none;
}
.comparison__panels {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.comparison__card {
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.comparison__panel-header {
  margin-bottom: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comparison__panel-title {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.comparison__loading-text {
  margin-top: calc(var(--spacing) * 3);
  color: var(--color-gray-600);
}
.comparison__table-wrapper {
  overflow-x: auto;
}
.comparison__table {
  width: 100%;
  table-layout: auto;
}
.comparison__table-head-row {
  background-color: var(--color-gray-50);
}
.comparison__th {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  text-align: left;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}
.comparison__th--right {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  text-align: right;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}
.comparison__empty-cell {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 12);
  text-align: center;
}
.comparison__periods-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 6);
}
.comparison__period-title {
  margin-bottom: calc(var(--spacing) * 3);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.comparison__period-fields {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.comparison__period-label {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-700);
}
@layer components {
  .chart-container {
    min-height: 400px;
    background: #f9fafb;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #2563eb;
  }
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal.hidden {
    display: none;
  }
  .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .modal-content {
    position: relative;
    background: white;
    border-radius: 0.5rem;
    max-width: 48rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
  }
  .modal-close {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
  }
  .modal-close:hover {
    color: #111827;
  }
  .modal-body {
    padding: 1.5rem;
  }
  .modal-footer {
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
  }
  .comparison__input {
    width: calc(var(--spacing) * 96);
  }
  .comparison__input-1 {
    width: 100%;
  }
  .comparison__input-2 {
    width: 100%;
  }
  .comparison__input-3 {
    width: 100%;
  }
  .comparison__input-4 {
    width: 100%;
  }
  .comparison__input-5 {
    width: 100%;
  }
  .comparison__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .comparison__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .comparison__item-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .comparison__item-3 {
    margin-right: calc(var(--spacing) * 2);
  }
  .comparison__wrapper {
    margin-inline: auto;
  }
  .comparison__wrapper-1 {
    display: none;
  }
}
.compare-side-by-side {
  margin-bottom: calc(var(--spacing) * 6);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 6);
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@layer components {
  .chart-container {
    min-height: 400px;
    background: #f9fafb;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .chart-container-sm {
    min-height: 250px;
    background: #f9fafb;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .placeholder-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
@layer components {
  .chart-table__responsive {
    overflow-x: auto;
  }
  .chart-table__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .chart-table__table thead {
    background-color: var(--color-gray-50);
  }
  .chart-table__table th {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .chart-table__table td {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
  }
  .chart-table__table tbody tr:nth-child(even) {
    background-color: var(--color-gray-50);
  }
  .chart-table__empty-cell {
    padding-block: calc(var(--spacing) * 4);
    text-align: center;
    color: var(--color-gray-400);
  }
  .chart-table__row-count {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
}
@layer components {
  .dashboard-create__wrapper {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
  }
  .dashboard-create__wrapper-1 {
    display: flex;
    justify-content: center;
  }
  .dashboard-create__col {
    width: 100%;
    max-width: var(--container-2xl);
  }
  .dashboard-create__wrapper-2 {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dashboard-create__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .dashboard-create__heading {
    margin-bottom: 0;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .dashboard-create__card-body {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .dashboard-create__field {
    margin-bottom: 0.75rem;
  }
  .dashboard-create__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .dashboard-create__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    outline: none;
  }
  .dashboard-create__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    outline: none;
  }
  .dashboard-create__wrapper-3 {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    justify-content: space-between;
  }
  .dashboard-create__cancel-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .dashboard-create__submit-btn {
    cursor: pointer;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
}
@layer components {
  .dashboard-admin {
    padding: calc(var(--spacing) * 4);
  }
  .dashboard-admin__header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .dashboard-admin__title {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .dashboard-admin__title small {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-gray-500);
  }
  .dashboard-admin__layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: calc(var(--spacing) * 6);
  }
  .dashboard-admin__panel-left, .dashboard-admin__panel-right {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
  }
  .dashboard-admin__panel-header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .dashboard-admin__panel-header h2 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .dashboard-admin__fieldset {
    margin-bottom: calc(var(--spacing) * 3);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
  }
  .dashboard-admin__fieldset-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .dashboard-admin__drag-handle {
    cursor: grab;
    color: var(--color-gray-400);
  }
  .dashboard-admin__fieldset-rol {
    margin-left: auto;
    font-size: 0.8rem;
  }
  .dashboard-admin__rol-select {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: 0.3rem;
    padding-block: 0.15rem;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .dashboard-admin__widgets-sortable {
    min-height: 2rem;
    padding: calc(var(--spacing) * 2);
  }
  .dashboard-admin__widget {
    margin-bottom: calc(var(--spacing) * 1);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: 0.4rem;
  }
  .dashboard-admin__widget--loading {
    opacity: 50%;
  }
  .dashboard-admin__widget-tipo {
    border-radius: 0.25rem;
    background-color: var(--color-blue-100);
    padding-inline: 0.4rem;
    padding-block: 0.1rem;
    font-size: 0.7rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
  }
  .dashboard-admin__widget-titulo {
    flex: 1;
    font-size: 0.85rem;
  }
  .dashboard-admin__btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 0.3rem;
    border-radius: var(--radius-md);
    --tw-border-style: none;
    border-style: none;
    padding-inline: 0.8rem;
    padding-block: 0.4rem;
    font-size: 0.8rem;
    text-decoration-line: none;
  }
  .dashboard-admin__btn--primary {
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .dashboard-admin__btn--secondary {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
  }
  .dashboard-admin__btn--icon {
    cursor: pointer;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding: 0.2rem;
    color: var(--color-gray-500);
  }
  .dashboard-admin__btn--icon:hover {
    color: var(--color-red-500);
  }
  .dashboard-admin__empty {
    padding: calc(var(--spacing) * 4);
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-gray-400);
  }
  .dashboard-admin__loading {
    padding: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .dashboard-admin__catalogo-item {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    cursor: grab;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-gray-300);
    padding: calc(var(--spacing) * 2);
  }
  .dashboard-admin__catalogo-item:hover {
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-50);
  }
  .dashboard-admin__catalogo-tipo {
    border-radius: 0.25rem;
    background-color: var(--color-blue-100);
    padding-inline: 0.4rem;
    padding-block: 0.1rem;
    font-size: 0.7rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
  }
  .dashboard-admin__catalogo-nombre {
    font-size: 0.85rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .dashboard-admin__catalogo-desc {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .dashboard-admin__config-overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .dashboard-admin__config-modal {
    max-height: 80vh;
    max-width: 500px;
    min-width: 400px;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 10px 40px var(--tw-shadow-color, rgba(0,0,0,0.2));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dashboard-admin__config-title {
    margin: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .dashboard-admin__config-field {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .dashboard-admin__config-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: 0.8rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-600);
  }
  .dashboard-admin__config-input, .dashboard-admin__config-select {
    width: 100%;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding: 0.4rem;
    font-size: 0.85rem;
  }
  .dashboard-admin__config-checkbox {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .dashboard-admin__config-actions {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .dashboard-admin__config-cancel {
    cursor: pointer;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-100);
    padding-inline: 0.8rem;
    padding-block: 0.4rem;
    font-size: 0.8rem;
  }
  .dashboard-admin__config-submit {
    cursor: pointer;
    border-radius: var(--radius-md);
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-blue-600);
    padding-inline: 0.8rem;
    padding-block: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-white);
  }
}
@layer components {
  .dashboard-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .dashboard-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .dashboard-list__subtitle {
    color: var(--color-gray-600);
  }
  .dashboard-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .dashboard-list__count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .dashboard-list__filter-input {
    width: 16rem;
    min-width: 16rem;
    max-width: 20rem;
  }
  .dashboard-list__empty-state {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 12);
    text-align: center;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dashboard-list__empty-icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    color: var(--color-gray-300);
  }
  .dashboard-list__empty-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .dashboard-list__empty-desc {
    margin-bottom: calc(var(--spacing) * 4);
    color: var(--color-gray-600);
  }
  .dashboard-list__empty-note {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .dashboard-list__info-box {
    margin-top: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 4);
  }
  .dashboard-list__info-row {
    display: flex;
    align-items: flex-start;
  }
  .dashboard-list__info-icon {
    margin-top: calc(var(--spacing) * 0.5);
    margin-right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    color: var(--color-blue-600);
  }
  .dashboard-list__info-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-800);
  }
  .dashboard-list__info-title {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .dashboard-list__info-list {
    margin-top: calc(var(--spacing) * 1);
    list-style-position: inside;
    list-style-type: disc;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .dashboard-list__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .dashboard-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dashboard-list__table {
    width: 100%;
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .dashboard-list__thead {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
  }
  .dashboard-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .dashboard-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .dashboard-list__row {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .dashboard-list__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    color: var(--color-gray-900);
  }
  .dashboard-list__badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .dashboard-list__badge--active {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .dashboard-list__badge--inactive {
    background-color: var(--color-gray-100);
    color: var(--color-gray-600);
  }
  .dashboard-list__badge--role {
    border-radius: 0.25rem;
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: 0.15rem;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
  }
  .dashboard-list__td--actions {
    white-space: nowrap;
  }
  .dashboard-list__action-btn {
    display: inline-block;
    cursor: pointer;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: 0.3rem;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--color-gray-500);
    text-decoration-line: none;
  }
  .dashboard-list__action-btn:hover {
    color: var(--color-blue-600);
  }
}
@layer components {
  .kpi-cards__grid {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .kpi-cards__card {
    display: block;
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .kpi-cards__card--blue {
    border-color: var(--color-blue-500);
  }
  .kpi-cards__card--green {
    border-color: var(--color-green-500);
  }
  .kpi-cards__card--purple {
    border-color: var(--color-purple-500);
  }
  .kpi-cards__card--red {
    border-color: var(--color-red-500);
  }
  .kpi-cards__card--yellow {
    border-color: var(--color-yellow-500);
  }
  .kpi-cards__card-header {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .kpi-cards__card-label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .kpi-cards__card-value-wrap {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .kpi-cards__card-value {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
  }
  .kpi-cards__card-unit {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-gray-500);
  }
  .kpi-cards__card-desc {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .kpi-cards__card-badge-wrap {
    margin-top: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-100);
    padding-top: calc(var(--spacing) * 3);
  }
  .kpi-cards__badge {
    display: inline-block;
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .kpi-cards__badge--blue {
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
  }
  .kpi-cards__badge--green {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .kpi-cards__badge--purple {
    background-color: var(--color-purple-100);
    color: var(--color-purple-800);
  }
  .kpi-cards__badge--red {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .kpi-cards__badge--yellow {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .kpi-cards__item {
    color: var(--color-green-500);
  }
  .kpi-cards__item-1 {
    color: var(--color-red-500);
  }
  .kpi-cards__item-2 {
    color: var(--color-gray-400);
  }
  .kpi-cards__wrapper {
    margin-inline: auto;
  }
}
@layer components {
  .kpi-value-number p {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
  }
  .kpi-value-number span {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-gray-500);
  }
  .kpi-value-update__item {
    color: var(--color-green-500);
  }
  .kpi-value-update__item-1 {
    color: var(--color-red-500);
  }
  .kpi-value-update__item-2 {
    color: var(--color-gray-400);
  }
}
@layer components {
  .kpi-dashboard__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .kpi-dashboard__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .kpi-dashboard__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .kpi-dashboard__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .kpi-dashboard__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .kpi-dashboard__description {
    color: var(--color-gray-600);
  }
  .kpi-dashboard__personalize-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .kpi-dashboard__personalize-btn i {
    margin-right: calc(var(--spacing) * 2);
  }
  .kpi-dashboard__filters {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .kpi-dashboard__filters-form {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .kpi-dashboard__field-label {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .kpi-dashboard__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .kpi-dashboard__submit-wrapper {
    display: flex;
    align-items: flex-end;
  }
  .kpi-dashboard__submit-btn {
    width: 100%;
  }
  .kpi-dashboard__submit-btn i {
    margin-right: calc(var(--spacing) * 2);
  }
  .kpi-dashboard__fab {
    position: fixed;
    right: calc(var(--spacing) * 6);
    bottom: calc(var(--spacing) * 6);
  }
  .kpi-dashboard__auto-refresh-btn i {
    margin-right: calc(var(--spacing) * 2);
  }
  .kpi-dashboard__auto-refresh-btn {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
@layer components {
  .stats-tab__loading-text {
    margin-top: calc(var(--spacing) * 3);
    color: var(--color-gray-600);
  }
  .stats-tab__filter {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .stats-tab__filter-form {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .stats-tab__filter-label {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .stats-tab__filter-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .stats-tab__filter-action {
    display: flex;
    align-items: flex-end;
  }
  .stats-tab__btn-primary {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .stats-tab__filter-btn {
    width: 100%;
  }
  .stats-tab__filter-btn-icon {
    margin-right: calc(var(--spacing) * 2);
  }
  .stats-tab__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .stats-tab__icon--media {
    background-color: var(--color-blue-100);
    color: var(--color-blue-600);
  }
  .stats-tab__icon--maximo {
    background-color: var(--color-green-100);
    color: var(--color-green-600);
  }
  .stats-tab__icon--minimo {
    background-color: var(--color-red-100);
    color: var(--color-red-600);
  }
  .stats-tab__icon--desviacion {
    background-color: var(--color-purple-100);
    color: var(--color-purple-600);
  }
  .stats-tab__icon--muestras {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-600);
  }
  .stats-tab__icon--rango {
    background-color: var(--color-indigo-100);
    color: var(--color-indigo-600);
  }
}
@layer components {
  .historico-tab__loading-text {
    margin-top: calc(var(--spacing) * 3);
    color: var(--color-gray-600);
  }
  .historico-tab__filter {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .historico-tab__filter-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .historico-tab__filter-label {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .historico-tab__filter-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .historico-tab__filter-actions {
    display: flex;
    align-items: flex-end;
  }
  .historico-tab__filter-submit {
    width: 100%;
  }
  .historico-tab__table-wrapper {
    overflow-x: auto;
  }
  .historico-tab__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
  }
  .historico-tab__thead {
    background-color: var(--color-gray-50);
  }
  .historico-tab__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .historico-tab__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .historico-tab__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .historico-tab__pagination {
    margin-top: calc(var(--spacing) * 4);
  }
  .historico-tab__btn-primary {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .loading-spinner__item {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .metadata-tab__info-grid {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .metadata-tab__range-box {
    margin-bottom: calc(var(--spacing) * 8);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 4);
  }
  .metadata-tab__range-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-900);
  }
  .metadata-tab__range-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
  }
  .metadata-tab__range-value {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-700);
  }
  .metadata-tab__sensors-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .metadata-tab__table-wrapper {
    overflow-x: auto;
  }
  .metadata-tab__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
  }
  .metadata-tab__thead {
    background-color: var(--color-gray-50);
  }
  .metadata-tab__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .metadata-tab__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .metadata-tab__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .metadata-tab__tr {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .metadata-tab__td {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    white-space: nowrap;
  }
  .metadata-tab__td--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }
  .metadata-tab__sensor-name-cell {
    display: flex;
    align-items: center;
  }
  .metadata-tab__sensor-icon {
    margin-right: calc(var(--spacing) * 3);
    color: var(--color-blue-500);
  }
  .metadata-tab__sensor-name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .metadata-tab__sensor-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .metadata-tab__sensor-station {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .metadata-tab__sensor-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-900);
      }
    }
  }
  .metadata-content__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .metadata-content__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .metadata-content__item-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .metadata-content__item-3 {
    margin-right: calc(var(--spacing) * 2);
  }
  .metadata-content__item-4 {
    margin-right: calc(var(--spacing) * 1);
  }
  .metadata-content__item-5 {
    margin-right: calc(var(--spacing) * 1);
  }
  .metadata-content__text {
    margin-left: calc(var(--spacing) * 2);
  }
}
@layer components {
  .variable-detail {
    padding: calc(var(--spacing) * 8);
  }
  .variable-detail__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .variable-detail__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .variable-detail__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .variable-detail__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .variable-detail__subtitle {
    color: var(--color-gray-600);
  }
  .variable-detail__actions {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .variable-detail__open-tab-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .variable-detail__back-form {
    display: inline;
  }
  .variable-detail__back-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .variable-detail__card {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .variable-detail__tab-border {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
  }
  .variable-detail__tab-nav {
    margin-bottom: -1px;
    display: flex;
  }
  .variable-detail__tab-content {
    padding: calc(var(--spacing) * 6);
  }
  .variable-detail__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .variable-detail__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .variable-detail__item-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .variable-detail__item-3 {
    margin-right: calc(var(--spacing) * 2);
  }
  .variable-detail__item-4 {
    margin-right: calc(var(--spacing) * 2);
  }
  .variable-detail__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .variable-detail__wrapper-1 {
    display: none;
  }
  .variable-detail__wrapper-2 {
    display: none;
  }
}
@layer components {
  .evolution-panel {
    margin-inline: auto;
    max-width: var(--container-7xl);
  }
  .evolution-panel__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .evolution-panel__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .evolution-panel__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .evolution-panel__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .evolution-panel__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .evolution-panel__kpi-grid {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
  }
  @media (min-width: 768px) {
    .evolution-panel__kpi-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .evolution-panel__kpi-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .evolution-panel__kpi-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .evolution-panel__kpi-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .evolution-panel__kpi-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .evolution-panel__kpi-value {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .evolution-panel__kpi-icon--danger {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding: calc(var(--spacing) * 3);
  }
  .evolution-panel__kpi-icon--warning {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-amber-100);
    padding: calc(var(--spacing) * 3);
  }
  .evolution-panel__kpi-icon--success {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-emerald-100);
    padding: calc(var(--spacing) * 3);
  }
  .evolution-panel__kpi-icon--info {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding: calc(var(--spacing) * 3);
  }
  .evolution-panel__kpi-icon--danger .evolution-panel__kpi-icon-svg {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    color: var(--color-blue-600);
  }
  .evolution-panel__kpi-icon--warning .evolution-panel__kpi-icon-svg {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    color: var(--color-blue-600);
  }
  .evolution-panel__kpi-icon--success .evolution-panel__kpi-icon-svg {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    color: var(--color-blue-600);
  }
  .evolution-panel__kpi-icon--info .evolution-panel__kpi-icon-svg {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    color: var(--color-blue-600);
  }
  .evolution-panel__chart-grid {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
  }
  @media (min-width: 1024px) {
    .evolution-panel__chart-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .evolution-panel__chart-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .evolution-panel__chart-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .evolution-panel__chart-placeholder {
    display: flex;
    height: calc(var(--spacing) * 64);
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background-color: var(--color-gray-50);
  }
  .evolution-panel__placeholder-text {
    color: var(--color-gray-500);
  }
  .evolution-panel__list-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .evolution-panel__list-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .evolution-panel__list-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .evolution-panel__list-body > * + * {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
  }
  .evolution-panel__list-item {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .evolution-panel__list-item:hover {
    background-color: var(--color-gray-50);
  }
  .evolution-panel__item-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .evolution-panel__item-time {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
}
@layer components {
  .analytics-home {
    padding: calc(var(--spacing) * 8);
  }
  .station-analytics {
    padding: calc(var(--spacing) * 8);
  }
  .kpi-dashboard__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .kpi-dashboard__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .kpi-dashboard__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .kpi-dashboard__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .kpi-dashboard__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .kpi-dashboard__description {
    color: var(--color-gray-600);
  }
  .kpi-dashboard__personalize-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .kpi-dashboard__personalize-btn i {
    margin-right: calc(var(--spacing) * 2);
  }
  .kpi-dashboard__filters {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .kpi-dashboard__filters-form {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .kpi-dashboard__field-label {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .kpi-dashboard__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .kpi-dashboard__submit-wrapper {
    display: flex;
    align-items: flex-end;
  }
  .kpi-dashboard__submit-btn {
    width: 100%;
  }
  .kpi-dashboard__submit-btn i {
    margin-right: calc(var(--spacing) * 2);
  }
  .kpi-dashboard__fab {
    position: fixed;
    right: calc(var(--spacing) * 6);
    bottom: calc(var(--spacing) * 6);
  }
  .kpi-dashboard__auto-refresh-btn i {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .detecciones-panel {
    margin-inline: auto;
    max-width: var(--container-7xl);
  }
  .detecciones-panel__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .detecciones-panel__breadcrumb-link {
    color: var(--color-blue-600);
    text-decoration-line: none;
  }
  .detecciones-panel__breadcrumb-link:hover {
    text-decoration-line: underline;
  }
  .detecciones-panel__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .detecciones-panel__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .detecciones-panel__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .detecciones-panel__header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
  }
  .detecciones-panel__title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    font-family: 'Space Grotesk', sans-serif;
  }
  .detecciones-panel__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .detecciones-panel__actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .detecciones-panel__action-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-600);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .detecciones-panel__action-btn:hover {
    background-color: var(--color-blue-50);
  }
  .detecciones-panel__action-btn--secondary {
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
  }
  .detecciones-panel__action-btn--secondary:hover {
    background-color: var(--color-gray-100);
  }
  .detecciones-panel__kpi-grid {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
  }
  @media (min-width: 768px) {
    .detecciones-panel__kpi-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .detecciones-panel__kpi-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detecciones-panel__kpi-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .detecciones-panel__kpi-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .detecciones-panel__kpi-value {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .detecciones-panel__kpi-value--small {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .detecciones-panel__kpi-icon--danger {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding: calc(var(--spacing) * 3);
  }
  .detecciones-panel__kpi-icon--warning {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-amber-100);
    padding: calc(var(--spacing) * 3);
  }
  .detecciones-panel__kpi-icon--success {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding: calc(var(--spacing) * 3);
  }
  .detecciones-panel__kpi-icon--info {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding: calc(var(--spacing) * 3);
  }
  .detecciones-panel__kpi-icon--danger .detecciones-panel__kpi-icon-svg {
    color: var(--color-red-600);
  }
  .detecciones-panel__kpi-icon--warning .detecciones-panel__kpi-icon-svg {
    color: var(--color-yellow-600);
  }
  .detecciones-panel__kpi-icon--success .detecciones-panel__kpi-icon-svg {
    color: var(--color-green-600);
  }
  .detecciones-panel__kpi-icon--info .detecciones-panel__kpi-icon-svg {
    color: var(--color-blue-600);
  }
  .detecciones-panel__chart-card {
    margin-bottom: calc(var(--spacing) * 8);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detecciones-panel__chart-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .detecciones-panel__chart-wrapper {
    position: relative;
  }
  .detecciones-panel__list-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detecciones-panel__list-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .detecciones-panel__list-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .detecciones-panel__list-body {
    overflow-x: auto;
  }
  .detecciones-panel__table-wrap {
    overflow-x: auto;
    background-color: var(--color-white);
  }
  .detecciones-panel__table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .detecciones-panel__thead {
    background-color: var(--color-gray-50);
  }
  .detecciones-panel__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .detecciones-panel__tbody {
    background-color: var(--color-white);
  }
  .detecciones-panel__tbody > tr + tr {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
  }
  .detecciones-panel__row:hover {
    background-color: var(--color-gray-50);
  }
  .detecciones-panel__cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .detecciones-panel__cell--id {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .detecciones-panel__row--peak {
    background-color: var(--color-amber-50);
  }
  .detecciones-panel__row--peak:hover {
    background-color: var(--color-amber-100);
  }
  .detecciones-panel__empty {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .detecciones-panel__empty-state {
    padding-block: calc(var(--spacing) * 4);
  }
  .detecciones-panel__pagination {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .detecciones-panel__pagination-info {
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .detecciones-panel__pagination-value {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .detecciones-panel__filters {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detecciones-panel__filter-group {
    display: flex;
    min-width: calc(var(--spacing) * 40);
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .detecciones-panel__filter-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-gray-700);
    text-transform: uppercase;
  }
  .detecciones-panel__filter-input {
    min-height: calc(var(--spacing) * 9);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .detecciones-panel__filter-input[multiple] {
    min-height: calc(var(--spacing) * 18);
  }
  .detecciones-panel__filter-input:disabled {
    background-color: var(--color-gray-100);
    color: var(--color-gray-400);
  }
  .detecciones-panel__filter-checkboxes {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .detecciones-panel__filter-checkbox {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .detecciones-panel__filter-dates {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .detecciones-panel__filter-date-sep {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .detecciones-panel__filter-quick {
    margin-top: calc(var(--spacing) * 1);
    display: flex;
    gap: calc(var(--spacing) * 1);
  }
  .detecciones-panel__filter-quick-btn {
    cursor: pointer;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .detecciones-panel__filter-quick-btn:hover {
    background-color: var(--color-gray-100);
  }
  .detecciones-panel__filter-quick-btn--active {
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .detecciones-panel__filter-actions {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .detecciones-panel__filter-checkboxes--vertical {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .detecciones-panel__filter-hint {
    color: var(--color-gray-400);
    font-style: italic;
    font-size: 0.8125rem;
  }
  .detecciones-panel__chart-controls {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 8);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 3);
  }
  .detecciones-panel__chart-control-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .detecciones-panel__chart-radios {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .detecciones-panel__kpi-grid--4 {
    margin-top: calc(var(--spacing) * 8);
  }
  @media (min-width: 768px) {
    .detecciones-panel__kpi-grid--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}
@layer components {
  .station-analytics {
    margin-inline: auto;
    max-width: var(--container-7xl);
  }
  .station-analytics__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .station-analytics__title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .station-analytics__header-info {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .station-analytics__status-cards {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    gap: calc(var(--spacing) * 4);
  }
  .station-analytics__status-card {
    flex: 1;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .station-analytics__status-card--online {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-left-color: var(--color-green-600);
  }
  .station-analytics__status-card--warning {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-left-color: var(--color-amber-500);
  }
  .station-analytics__status-card--alarm {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-left-color: var(--color-red-500);
  }
  .station-analytics__status-card-title {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .station-analytics__status-card-value {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .station-analytics__tabs-nav {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
  }
  .station-analytics__tab {
    cursor: pointer;
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-left-style: var(--tw-border-style);
    border-left-width: 0px;
    border-bottom-color: transparent;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .station-analytics__tab:hover {
    color: var(--color-gray-700);
  }
  .station-analytics__tab--active {
    border-bottom-color: var(--color-blue-600);
    color: var(--color-blue-600);
  }
  .station-analytics__tab-icon {
    margin-right: calc(var(--spacing) * 2);
  }
  .station-analytics__tab-panel {
    min-height: calc(var(--spacing) * 80);
  }
  .station-analytics__action-bar {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .station-analytics__action-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .station-analytics__action-btn:hover {
    background-color: var(--color-gray-50);
  }
  .station-analytics__action-btn--primary {
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .station-analytics__action-btn--primary:hover {
    background-color: var(--color-blue-700);
  }
  .station-analytics__kpi-grid {
    margin-bottom: calc(var(--spacing) * 6);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
  }
  .station-analytics__kpi-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
  }
  .station-analytics__kpi-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .station-analytics__kpi-value {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .station-analytics__health-table {
    width: 100%;
    border-collapse: collapse;
  }
  .station-analytics__health-table th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .station-analytics__health-table td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .station-analytics__badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .station-analytics__badge--ok {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .station-analytics__badge--warn {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .station-analytics__badge--critical {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .station-analytics__badge--online {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .station-analytics__badge--offline {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .station-analytics__rt-chart-section {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
  }
  .station-analytics__rt-chart-header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .station-analytics__rt-chart-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .chart-legend-dot {
    display: inline-block;
  }
  .chart-legend-color-0 {
    background-color: var(--color-blue-500);
  }
  .chart-legend-color-1 {
    background-color: var(--color-red-500);
  }
  .chart-legend-color-2 {
    background-color: var(--color-emerald-500);
  }
  .chart-legend-color-3 {
    background-color: var(--color-amber-500);
  }
  .chart-legend-color-4 {
    background-color: var(--color-violet-500);
  }
  .chart-legend-color-5 {
    background-color: var(--color-pink-500);
  }
  .station-analytics__status-card--interactive {
    position: relative;
    cursor: pointer;
  }
  .station-analytics__sensor-popup {
    position: absolute;
    top: 100%;
    left: calc(var(--spacing) * 0);
    z-index: 50;
    margin-top: calc(var(--spacing) * 1);
    min-width: calc(var(--spacing) * 70);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .station-analytics__sensor-popup-title {
    margin-bottom: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
  }
  .station-analytics__sensor-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .station-analytics__sensor-dot {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
  }
  .station-analytics__sensor-name {
    flex: 1;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .station-analytics__sensor-state {
    color: var(--color-gray-400);
  }
  .station-analytics__station-select {
    min-width: calc(var(--spacing) * 60);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .station-analytics__kpi-value--sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .station-analytics__rt-chart-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .station-analytics__rt-chart-canvas-wrap {
    position: relative;
    height: calc(var(--spacing) * 72);
  }
  .station-analytics__refresh-hint {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .station-analytics__health-section {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
  }
  .station-analytics__health-header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .station-analytics__health-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    font-family: 'Space Grotesk', sans-serif;
  }
}
@layer components {
  .evolution-station {
    margin-inline: auto;
    max-width: var(--container-7xl);
  }
  .evolution-station__breadcrumb-text {
    color: var(--color-gray-600);
  }
  .evolution-station__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .evolution-station__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .evolution-station__header-info {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .evolution-station__title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .evolution-station__header-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .evolution-station__export-btn {
    border-radius: 0.25rem;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .evolution-station__controls {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .evolution-station__controls-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .evolution-station__control-label {
    margin-right: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .evolution-station__period-select {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .evolution-station__variable-label {
    margin-right: calc(var(--spacing) * 3);
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .evolution-station__variable-name {
    margin-left: calc(var(--spacing) * 1);
  }
  .evolution-station__chart-panel {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .evolution-station__chart-header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .evolution-station__chart-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .evolution-station__chart-granularity {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .evolution-station__legend {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 4);
  }
  .evolution-station__legend-item {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .evolution-station__table-panel {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .evolution-station__table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .evolution-station__table-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .evolution-station__toggle-btn {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .evolution-station__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .evolution-station__table-head {
    background-color: var(--color-gray-50);
  }
  .evolution-station__table-th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .evolution-station__table-body {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
}
.monitor-station__section {
  margin-bottom: calc(var(--spacing) * 4);
}
.monitor-station__chart-header {
  display: flex;
}
@layer components {
  #chart-tiempo-real {
    height: 400px;
  }
  .analytics-home__item {
    margin-right: calc(var(--spacing) * 1);
  }
  .analytics-home__item-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .analytics-home__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .monitor-panel-embebido__header {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .monitor-panel-embebido__title {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .monitor-panel-embebido__badge {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
  }
  .monitor-panel-embebido__badge--online {
    background-color: var(--color-green-500);
  }
  .monitor-panel-embebido__badge--offline {
    background-color: var(--color-red-500);
  }
  .monitor-panel-embebido__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2);
  }
  .monitor-panel-embebido__stat-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .monitor-panel-embebido__actions {
    margin-top: calc(var(--spacing) * 2);
  }
  .monitor-panel-embebido__link {
    display: inline-block;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
}
@layer components {
  .monitor-station {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .monitor-station__title {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .monitor-station__section {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .monitor-station__kpi-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .monitor-station__kpi-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .monitor-station__kpi-body {
    padding: calc(var(--spacing) * 4);
  }
  .monitor-station__kpi-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .monitor-station__badge {
    display: inline-flex;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .monitor-station__badge--success {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .monitor-station__badge--danger {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .monitor-station__badge--warning {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .monitor-station__chart-card, .monitor-station__health-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .monitor-station__chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .monitor-station__chart-title, .monitor-station__card-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: 0;
  }
  .monitor-station__chart-body, .monitor-station__card-body {
    padding: calc(var(--spacing) * 6);
  }
  .monitor-station__card-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .monitor-station__wrapper {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .monitor-station__toolbar-btn {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .monitor-station__toolbar-btn--primary {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-500);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .monitor-station__toolbar-btn--warning {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-500);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-yellow-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-50);
      }
    }
  }
  .monitor-station__table {
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    border-collapse: collapse;
  }
  .monitor-station__table th, .monitor-station__table td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
  }
  .monitor-station__table-head {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
  }
  .monitor-station__table-head th {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-600);
    text-transform: uppercase;
  }
  .monitor-station__table tbody tr:hover {
    background-color: var(--color-gray-50);
  }
  #chart-tiempo-real {
    height: 400px;
  }
}
@layer components {
  .detecciones-panel {
    margin-inline: auto;
    max-width: var(--container-7xl);
  }
  .detecciones-panel__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .detecciones-panel__breadcrumb-link {
    color: var(--color-blue-600);
    text-decoration-line: none;
  }
  .detecciones-panel__breadcrumb-link:hover {
    text-decoration-line: underline;
  }
  .detecciones-panel__breadcrumb-sep {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .detecciones-panel__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .detecciones-panel__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .detecciones-panel__header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
  }
  .detecciones-panel__title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    font-family: 'Space Grotesk', sans-serif;
  }
  .detecciones-panel__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .detecciones-panel__actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .detecciones-panel__action-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-600);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .detecciones-panel__action-btn:hover {
    background-color: var(--color-blue-50);
  }
  .detecciones-panel__action-btn--secondary {
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
  }
  .detecciones-panel__action-btn--secondary:hover {
    background-color: var(--color-gray-100);
  }
  .detecciones-panel__kpi-grid {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
  }
  @media (min-width: 768px) {
    .detecciones-panel__kpi-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .detecciones-panel__kpi-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detecciones-panel__kpi-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .detecciones-panel__kpi-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .detecciones-panel__kpi-value {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .detecciones-panel__kpi-value--small {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .detecciones-panel__kpi-icon--danger {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding: calc(var(--spacing) * 3);
  }
  .detecciones-panel__kpi-icon--warning {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-amber-100);
    padding: calc(var(--spacing) * 3);
  }
  .detecciones-panel__kpi-icon--success {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding: calc(var(--spacing) * 3);
  }
  .detecciones-panel__kpi-icon--info {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding: calc(var(--spacing) * 3);
  }
  .detecciones-panel__kpi-icon--danger .detecciones-panel__kpi-icon-svg {
    color: var(--color-red-600);
  }
  .detecciones-panel__kpi-icon--warning .detecciones-panel__kpi-icon-svg {
    color: var(--color-yellow-600);
  }
  .detecciones-panel__kpi-icon--success .detecciones-panel__kpi-icon-svg {
    color: var(--color-green-600);
  }
  .detecciones-panel__kpi-icon--info .detecciones-panel__kpi-icon-svg {
    color: var(--color-blue-600);
  }
  .detecciones-panel__chart-card {
    margin-bottom: calc(var(--spacing) * 8);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detecciones-panel__chart-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .detecciones-panel__chart-wrapper {
    position: relative;
  }
  .detecciones-panel__list-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detecciones-panel__list-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .detecciones-panel__list-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .detecciones-panel__list-body {
    overflow-x: auto;
  }
  .detecciones-panel__table-wrap {
    overflow-x: auto;
    background-color: var(--color-white);
  }
  .detecciones-panel__table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .detecciones-panel__thead {
    background-color: var(--color-gray-50);
  }
  .detecciones-panel__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .detecciones-panel__tbody {
    background-color: var(--color-white);
  }
  .detecciones-panel__tbody > tr + tr {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
  }
  .detecciones-panel__row:hover {
    background-color: var(--color-gray-50);
  }
  .detecciones-panel__cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .detecciones-panel__cell--id {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .detecciones-panel__row--peak {
    background-color: var(--color-amber-50);
  }
  .detecciones-panel__row--peak:hover {
    background-color: var(--color-amber-100);
  }
  .detecciones-panel__empty {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .detecciones-panel__empty-state {
    padding-block: calc(var(--spacing) * 4);
  }
  .detecciones-panel__pagination {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .detecciones-panel__pagination-info {
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .detecciones-panel__pagination-value {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .detecciones-panel__filters {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .detecciones-panel__filter-group {
    display: flex;
    min-width: calc(var(--spacing) * 40);
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .detecciones-panel__filter-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-gray-700);
    text-transform: uppercase;
  }
  .detecciones-panel__filter-input {
    min-height: calc(var(--spacing) * 9);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .detecciones-panel__filter-input[multiple] {
    min-height: calc(var(--spacing) * 18);
  }
  .detecciones-panel__filter-input:disabled {
    background-color: var(--color-gray-100);
    color: var(--color-gray-400);
  }
  .detecciones-panel__filter-checkboxes {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .detecciones-panel__filter-checkbox {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .detecciones-panel__filter-dates {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .detecciones-panel__filter-date-sep {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .detecciones-panel__filter-quick {
    margin-top: calc(var(--spacing) * 1);
    display: flex;
    gap: calc(var(--spacing) * 1);
  }
  .detecciones-panel__filter-quick-btn {
    cursor: pointer;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .detecciones-panel__filter-quick-btn:hover {
    background-color: var(--color-gray-100);
  }
  .detecciones-panel__filter-quick-btn--active {
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .detecciones-panel__filter-actions {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .detecciones-panel__filter-checkboxes--vertical {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .detecciones-panel__filter-hint {
    color: var(--color-gray-400);
    font-style: italic;
    font-size: 0.8125rem;
  }
  .detecciones-panel__chart-controls {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 8);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 3);
  }
  .detecciones-panel__chart-control-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .detecciones-panel__chart-radios {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .detecciones-panel__kpi-grid--4 {
    margin-top: calc(var(--spacing) * 8);
  }
  @media (min-width: 768px) {
    .detecciones-panel__kpi-grid--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}
@layer components {
  .detecciones-trend {
    margin-top: calc(var(--spacing) * 3);
  }
  .detecciones-trend__data-section {
    margin-top: calc(var(--spacing) * 3);
  }
}
@layer components {
  .station-analytics {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .station-analytics__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .station-analytics__title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .station-analytics__header-info {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .station-analytics__status-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 1rem;
  }
  .station-analytics__status-card {
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }
  .station-analytics__status-card--online {
    border-left: 4px solid #16a34a;
  }
  .station-analytics__status-card--ultimo-dato {
    border-left: 4px solid #00bcd4;
  }
  .station-analytics__status-card--alertas {
    border-left: 4px solid #ff9800;
  }
  .station-analytics__status-card--warning {
    border-left: 4px solid #ef4444;
  }
  .station-analytics__status-card--sensores {
    border-left: 4px solid #4caf50;
  }
  .station-analytics__status-card--alarm {
    border-left: 4px solid #ef4444;
  }
  .station-analytics__status-card-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #7b8a9a;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }
  .station-analytics__status-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e2d3d;
    margin-top: 0.25rem;
  }
  .station-analytics__tabs-nav {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
  }
  .station-analytics__tab {
    cursor: pointer;
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-left-style: var(--tw-border-style);
    border-left-width: 0px;
    border-bottom-color: transparent;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .station-analytics__tab:hover {
    color: var(--color-gray-700);
  }
  .station-analytics__tab--active {
    border-bottom-color: var(--color-blue-600);
    color: var(--color-blue-600);
  }
  .station-analytics__tab-icon {
    margin-right: calc(var(--spacing) * 2);
  }
  .station-analytics__tab-panel {
    min-height: calc(var(--spacing) * 80);
  }
  .station-analytics__action-bar {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .station-analytics__action-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .station-analytics__action-btn:hover {
    background-color: var(--color-gray-50);
  }
  .station-analytics__action-btn--primary {
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .station-analytics__action-btn--primary:hover {
    background-color: var(--color-blue-700);
  }
  .station-analytics__kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 1.5rem;
  }
  .station-analytics__kpi-card {
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }
  .station-analytics__kpi-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #7b8a9a;
    text-transform: uppercase;
  }
  .station-analytics__kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e2d3d;
    margin-top: 0.25rem;
  }
  .station-analytics__health-table {
    width: 100%;
    border-collapse: collapse;
  }
  .station-analytics__health-table th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .station-analytics__health-table td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .station-analytics__badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .station-analytics__badge--ok {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .station-analytics__badge--warn {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }
  .station-analytics__badge--critical {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .station-analytics__badge--online {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .station-analytics__badge--offline {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .station-analytics__rt-chart-section {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
  }
  .station-analytics__rt-chart-header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .station-analytics__rt-chart-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .chart-legend-dot {
    display: inline-block;
  }
  .chart-legend-color-0 {
    background-color: var(--color-blue-500);
  }
  .chart-legend-color-1 {
    background-color: var(--color-red-500);
  }
  .chart-legend-color-2 {
    background-color: var(--color-emerald-500);
  }
  .chart-legend-color-3 {
    background-color: var(--color-amber-500);
  }
  .chart-legend-color-4 {
    background-color: var(--color-violet-500);
  }
  .chart-legend-color-5 {
    background-color: var(--color-pink-500);
  }
  .station-analytics__status-card--interactive {
    position: relative;
    cursor: pointer;
  }
  .station-analytics__sensor-popup {
    position: absolute;
    top: 100%;
    left: calc(var(--spacing) * 0);
    z-index: 50;
    margin-top: calc(var(--spacing) * 1);
    min-width: calc(var(--spacing) * 70);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .station-analytics__sensor-popup-title {
    margin-bottom: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
  }
  .station-analytics__sensor-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .station-analytics__sensor-dot {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
  }
  .station-analytics__sensor-name {
    flex: 1;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .station-analytics__sensor-state {
    color: var(--color-gray-400);
  }
  .station-analytics__station-select {
    min-width: calc(var(--spacing) * 60);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .station-analytics__kpi-value--sm {
    font-size: 0.875rem;
    font-weight: 600;
  }
  .station-analytics__rt-chart-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .station-analytics__rt-chart-canvas-wrap {
    position: relative;
    height: calc(var(--spacing) * 72);
  }
  .station-analytics__refresh-hint {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .station-analytics__health-section {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
  }
  .station-analytics__health-header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .station-analytics__health-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    font-family: 'Space Grotesk', sans-serif;
  }
}
@layer components {
  #evo-filter-bar .app-filter-bar__fields {
    flex-wrap: wrap;
  }
  #evo-filter-bar {
    --evo-station-sensors-width: 16.75rem;
  }
  #evo-filter-bar .app-filter-bar__actions {
    align-self: flex-start;
  }
  #evo-filter-bar .app-filter-bar__group--full-row {
    flex-basis: 100%;
    order: 10;
  }
  #evo-filter-bar #evo-estacion {
    width: var(--evo-station-sensors-width);
  }
  #evo-filter-bar .evo-tab__l2-row .evo-multiselect {
    width: var(--evo-station-sensors-width);
  }
  .evo-tab__l2-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .evo-tab__chart-type-toggle {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .evo-tab__config-group {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .evo-tab__config-group .app-filter-bar__select {
    flex: 1;
    min-width: 120px;
  }
  .evo-tab__btn--icon {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .evo-tab__btn--icon:disabled {
    cursor: not-allowed;
    opacity: 40%;
  }
  .evo-tab__comparison-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 6px 12px;
    margin-bottom: 12px;
    font-size: 0.8125rem;
    color: #1e40af;
  }
  .evo-tab__compare-btn--active {
    border-color: var(--color-blue-400);
    background-color: var(--color-blue-100);
    color: var(--color-blue-700);
  }
  .evo-tab__compare-btn--active:hover {
    background-color: var(--color-blue-200);
  }
  .evo-tab__modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .evo-tab__modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
  }
  .evo-tab__modal-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 0;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  }
  .evo-tab__modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e9ef;
  }
  .evo-tab__modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .evo-tab__modal-body {
    padding: 20px;
  }
  .evo-tab__modal-field {
    margin-bottom: 16px;
  }
  .evo-tab__modal-field label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
  }
  .evo-tab__modal-field .evo-tab__select {
    width: 100%;
  }
  .evo-tab__modal-hint {
    font-size: 0.8125rem;
    min-height: 1.5rem;
  }
  .evo-tab__modal-hint--info {
    color: #1e40af;
    background: #eff6ff;
    border-radius: 6px;
    padding: 8px 12px;
  }
  .evo-tab__modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e5e9ef;
  }
  .evo-tab__fieldset {
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
  }
  .evo-tab__legend {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #3a4a5c;
    padding: 0 6px;
  }
  .evo-tab__legend-hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: #7b8a9a;
    margin-left: 8px;
  }
  .evo-tab__fieldset--table {
    margin-top: 20px;
  }
  .evo-tab__row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .evo-tab__row--wrap {
    flex-wrap: wrap;
  }
  .evo-tab__row--wide {
    justify-content: space-between;
  }
  .evo-tab__select {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .evo-tab__select--sm {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .evo-tab__btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .evo-tab__btn:hover {
    background-color: var(--color-gray-50);
  }
  .evo-tab__btn--primary {
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .evo-tab__btn--primary:hover {
    background-color: var(--color-blue-700);
  }
  .evo-tab__btn--danger {
    border-color: var(--color-red-300);
    color: var(--color-red-600);
  }
  .evo-tab__btn--danger:hover {
    background-color: var(--color-red-50);
  }
  .evo-tab__periodo-btn {
    cursor: pointer;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .evo-tab__periodo-btn:hover {
    background-color: var(--color-gray-50);
  }
  .evo-tab__periodo-btn--active {
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .evo-tab__custom-dates-inline {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    flex-shrink: 0;
    justify-content: flex-start;
    margin-left: 0;
  }
  .evo-tab__date-input {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    height: 2.1875rem;
  }
  .evo-tab__separator {
    color: #9ca3af;
  }
  .evo-tab__hint {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .evo-tab__text--muted {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .evo-tab__periodo-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  #panel-variables {
    flex: 1 1 20rem;
    min-width: 12rem;
    width: auto;
    max-width: 100%;
  }
  #panel-variables .evo-multiselect {
    width: 100%;
    min-width: 0;
    max-width: min(100%, var(--nimrod-ms-preferred-width, 26rem));
    flex: 1 1 auto;
  }
  #panel-variables .evo-multiselect__trigger {
    width: 100%;
    min-width: 0;
  }
  .evo-tab__variable-select {
    width: 100%;
    min-width: 0;
  }
  .evo-tab__variable-select:disabled {
    background-color: var(--color-gray-100);
    color: var(--color-gray-400);
  }
  .evo-tab__chart-actions {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .evo-tab__chart-header {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .evo-tab__chart-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    font-family: 'Space Grotesk', sans-serif;
  }
  .evo-tab__refresh-time {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .evo-tab__chart-area {
    position: relative;
    min-height: 18rem;
  }
  .evo-tab__chart-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 1.125rem;
  }
  .evo-tab__action-row {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .evo-tab__table-header {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .evo-tab__table-filters {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .evo-tab__filter-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .evo-tab__clear-btn {
    cursor: pointer;
    color: var(--color-gray-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-500);
      }
    }
  }
  .evo-tab__table-wrap {
    overflow-x: auto;
  }
  .evo-tab__table {
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .evo-tab__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-100);
    }
  }
  .evo-tab__table-footer {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .evo-tab__table-export-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
  }
  .evo-tab__table-export-btn:hover, .evo-tab__table-export-btn:focus-visible {
    background-color: var(--color-gray-50);
  }
  .evo-tab__table-export-btn > i {
    width: 1rem;
    height: 1rem;
    line-height: 1;
    flex: 0 0 auto;
  }
  .evo-tab__pagination {
    display: flex;
    gap: calc(var(--spacing) * 1);
  }
  .evo-tab__item {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .incident-create {
    padding: calc(var(--spacing) * 8);
  }
  .incident-create__container {
    margin-inline: auto;
    max-width: var(--container-3xl);
  }
  .incident-create__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .incident-create__subnav {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .incident-create__subnav-link {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
  .incident-create__subnav-separator {
    margin-inline: calc(var(--spacing) * 2);
  }
  .incident-create__subnav-current {
    color: var(--color-gray-900);
  }
  .incident-create__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .incident-create__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .incident-create__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .incident-create__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .incident-create__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .incident-create__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .incident-create__btn--cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .incident-create__btn--submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .incident-create__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .support-dashboard {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .support-dashboard__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .support-dashboard__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .support-dashboard__kpi-grid {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .support-dashboard__kpi-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .support-dashboard__kpi-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .support-dashboard__kpi-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .support-dashboard__kpi-value {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .support-dashboard__kpi-icon {
    border-radius: calc(infinity * 1px);
    padding: calc(var(--spacing) * 3);
  }
  .support-dashboard__kpi-icon--red {
    background-color: var(--color-red-100);
  }
  .support-dashboard__kpi-icon--yellow {
    background-color: var(--color-yellow-100);
  }
  .support-dashboard__kpi-icon--green {
    background-color: var(--color-green-100);
  }
  .support-dashboard__kpi-icon--blue {
    background-color: var(--color-blue-100);
  }
  .support-dashboard__kpi-svg--red {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    color: var(--color-red-600);
  }
  .support-dashboard__kpi-svg--yellow {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    color: var(--color-yellow-600);
  }
  .support-dashboard__kpi-svg--green {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    color: var(--color-green-600);
  }
  .support-dashboard__kpi-svg--blue {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    color: var(--color-blue-600);
  }
  .support-dashboard__charts-grid {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .support-dashboard__chart-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .support-dashboard__chart-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .support-dashboard__chart-placeholder {
    display: flex;
    height: calc(var(--spacing) * 64);
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background-color: var(--color-gray-50);
  }
  .support-dashboard__chart-placeholder-text {
    color: var(--color-gray-500);
  }
  .support-dashboard__activity-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .support-dashboard__activity-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .support-dashboard__activity-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .support-dashboard__activity-list {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .support-dashboard__activity-item {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .support-dashboard__activity-item-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-900);
  }
  .support-dashboard__activity-item-time {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .support-dashboard__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
.support-list {
  margin-inline: auto;
  max-width: var(--container-7xl);
  padding: calc(var(--spacing) * 8);
}
.support-list__breadcrumb-current {
  color: var(--color-gray-900);
}
.support-list__header {
  margin-bottom: calc(var(--spacing) * 8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.support-list__title {
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}
.support-list__subtitle {
  color: var(--color-gray-600);
}
.support-list__new-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-600);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700);
    }
  }
}
.support-list__new-btn-icon {
  margin-right: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.support-list__flash--success {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-200);
  background-color: var(--color-green-50);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color-green-800);
}
.support-list__flash--error {
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-200);
  background-color: var(--color-red-50);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color-red-800);
}
.support-list__filter-bar {
  margin-bottom: calc(var(--spacing) * 6);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 4);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-left: 3px solid var(--module-color, #e5e7eb);
  background-color: var(--module-color-bg, white);
}
.support-list__filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--spacing) * 4);
}
.support-list__filter-field {
  min-width: calc(var(--spacing) * 50);
  flex: 1;
}
.support-list__filter-label {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.support-list__filter-select {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  &:focus {
    border-color: var(--color-blue-500);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
}
.support-list__filter-actions {
  display: flex;
  gap: calc(var(--spacing) * 2);
}
.support-list__filter-btn {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: transparent;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--module-color, #e5e7eb);
  color: #fff;
}
.support-list__filter-btn:hover {
  filter: brightness(0.9);
}
.support-list__filter-clear {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: transparent;
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-gray-700);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-200);
    }
  }
}
.support-list__count {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
}
.support-list__count-value {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.support-list__table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.support-list__table {
  min-width: 100%;
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
}
.support-list__thead {
  background-color: var(--color-gray-50);
}
.support-list__th {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: left;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.support-list__th--right {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: right;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
}
.support-list__tbody {
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
  background-color: var(--color-white);
}
.support-list__row {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
}
.support-list__td {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
  color: var(--color-gray-900);
}
.support-list__td--muted {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
  color: var(--color-gray-500);
}
.support-list__td--status {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  white-space: nowrap;
}
.support-list__td--actions {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  text-align: right;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
}
.support-list__td--assigned {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  white-space: nowrap;
}
.support-list__assigned-name {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}
.support-list__assigned-none {
  color: var(--color-gray-400);
}
.support-list__status-badge {
  display: inline-flex;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.support-list__status-badge--open {
  background-color: var(--color-yellow-100);
  color: var(--color-yellow-800);
}
.support-list__status-badge--in-progress {
  background-color: var(--color-blue-100);
  color: var(--color-blue-800);
}
.support-list__status-badge--resolved {
  background-color: var(--color-green-100);
  color: var(--color-green-800);
}
.support-list__status-badge--closed {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}
.support-list__actions-group {
  display: flex;
  justify-content: flex-end;
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }
}
.support-list__action-btn--edit {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-gray-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-100);
    }
  }
}
.support-list__action-btn--assign {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-blue-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-50);
    }
  }
  cursor: pointer;
  border: none;
  background: none;
}
.support-list__action-btn--reassign {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-indigo-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-indigo-50);
    }
  }
  cursor: pointer;
  border: none;
  background: none;
}
.support-list__action-btn--resolve {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-green-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-green-50);
    }
  }
}
.support-list__action-btn--reopen {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-amber-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-amber-50);
    }
  }
}
.support-list__action-btn--close {
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
  color: var(--color-gray-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-100);
    }
  }
}
.support-list__empty-cell {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 8);
  text-align: center;
  color: var(--color-gray-500);
}
.support-list__empty-note {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-400);
}
.support-list__wrapper {
  margin-bottom: calc(var(--spacing) * 4);
}
.support-list__wrapper-1 {
  margin-inline: auto;
}
.support-list__modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  justify-content: center;
  align-items: center;
}
.support-list__modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.support-list__modal-content {
  border-radius: var(--radius-xl);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  position: relative;
  z-index: 51;
  max-width: 460px;
  width: 90%;
}
.support-list__modal-title {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.support-list__modal-text {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
}
.support-list__modal-field {
  margin-bottom: calc(var(--spacing) * 6);
}
.support-list__modal-label {
  margin-bottom: calc(var(--spacing) * 2);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.support-list__modal-select {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  &:focus {
    border-color: var(--color-blue-500);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-blue-500);
  }
}
.support-list__modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--spacing) * 3);
}
.support-list__modal-btn--cancel {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
  cursor: pointer;
}
.support-list__modal-btn--confirm {
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-600);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700);
    }
  }
  border: none;
  cursor: pointer;
}
@layer components {
  .label-export {
    padding: calc(var(--spacing) * 8);
  }
  .label-export__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .label-export__header-text {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .label-export__subtitle {
    color: var(--color-gray-600);
  }
  .label-export__kpi-grid {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .label-export__kpi-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .label-export__kpi-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .label-export__kpi-value {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .label-export__kpi-value--blue {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-blue-600);
  }
  .label-export__kpi-value--green {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-green-600);
  }
  .label-export__results-count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .label-export__results-count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .label-export__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .label-export__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .label-export__table-head {
    background-color: var(--color-gray-50);
  }
  .label-export__table-th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .label-export__table-body {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .label-export__table-row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .label-export__table-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .label-export__table-cell--muted {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-600);
  }
  .label-export__table-cell--label {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .label-export__badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .label-export__badge--positivo {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .label-export__badge--negativo {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .label-export__badge-extra {
    margin-left: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .label-export__empty-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .label-export__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .label-export__wrapper-1 {
    margin-inline: auto;
  }
}
@layer components {
  .labeling-panel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .labeling-panel__header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .labeling-panel__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .labeling-panel__export-link {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-green-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-green-800);
      }
    }
  }
  .labeling-panel__status-banner {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 3);
  }
  .labeling-panel__status-banner--positive {
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
  }
  .labeling-panel__status-banner--negative {
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
  }
  .labeling-panel__status-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .labeling-panel__status-label--positive {
    color: var(--color-green-800);
  }
  .labeling-panel__status-label--negative {
    color: var(--color-red-800);
  }
  .labeling-panel__status-detail {
    margin-left: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .labeling-panel__status-revision {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .labeling-panel__actions-grid {
    margin-bottom: calc(var(--spacing) * 4);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .labeling-panel__action-card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding: calc(var(--spacing) * 4);
  }
  .labeling-panel__action-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .labeling-panel__select {
    margin-bottom: calc(var(--spacing) * 2);
    width: 100%;
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .labeling-panel__btn-confirm {
    width: 100%;
    border-radius: 0.25rem;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .labeling-panel__btn-false-positive {
    width: 100%;
    border-radius: 0.25rem;
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .labeling-panel__canvas-section {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding: calc(var(--spacing) * 4);
  }
  .labeling-panel__canvas-hint {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .labeling-panel__canvas-wrapper {
    position: relative;
    display: inline-block;
    cursor: crosshair;
  }
  .labeling-panel__canvas {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
  }
  .labeling-panel__btn-save-area {
    margin-top: calc(var(--spacing) * 2);
    border-radius: 0.25rem;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .labeling-panel__review-section {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .labeling-panel__review-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .labeling-panel__btn-approve {
    border-radius: 0.25rem;
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-green-800);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-200);
      }
    }
  }
  .labeling-panel__btn-reject {
    border-radius: 0.25rem;
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-800);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-200);
      }
    }
  }
  .labeling-panel__btn-modify {
    border-radius: 0.25rem;
    background-color: var(--color-yellow-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-yellow-800);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-200);
      }
    }
  }
  .etiquetado-panel__item {
    margin-right: calc(var(--spacing) * 1);
  }
}
@layer components {
  .evidence-viewer {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .evidence-viewer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .evidence-viewer__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .evidence-viewer__title-icon {
    margin-right: calc(var(--spacing) * 2);
    color: var(--color-purple-600);
  }
  .evidence-viewer__actions {
    display: flex;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .evidence-viewer__btn--download {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .evidence-viewer__btn--fullscreen {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .evidence-viewer__btn-icon {
    margin-right: calc(var(--spacing) * 1);
  }
  .evidence-viewer__body {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding: calc(var(--spacing) * 6);
  }
  .evidence-viewer__section-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .evidence-viewer__image-area {
    position: relative;
    display: flex;
    min-height: calc(var(--spacing) * 50);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
  }
  .evidence-viewer__loading-msg {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .evidence-viewer__loading-icon {
    margin-right: calc(var(--spacing) * 1);
  }
  .evidence-viewer__video-area {
    display: flex;
    min-height: calc(var(--spacing) * 37.5);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
  }
  .evidence-viewer__gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .evidence-viewer__gallery-placeholder {
    grid-column: 1 / -1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .evidence-viewer__zoom-info {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 3);
  }
  .evidence-viewer__zoom-text {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-blue-700);
  }
  .evidence-viewer__zoom-icon {
    margin-right: calc(var(--spacing) * 1);
  }
}
@layer components {
  .validation-panel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .validation-panel__header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .validation-panel__title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .validation-panel__stats-link {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .validation-panel__actions {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 3);
  }
  .validation-panel__btn--false-positive {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-red-800);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-200);
      }
    }
  }
  .validation-panel__btn--confirm {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-200);
      }
    }
  }
  .validation-panel__reason {
    margin-bottom: calc(var(--spacing) * 4);
    display: none;
  }
  .validation-panel__reason-label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .validation-panel__reason-textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .validation-panel__reason-actions {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .validation-panel__btn--submit {
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .validation-panel__btn--cancel {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .validation-panel__result {
    margin-top: calc(var(--spacing) * 3);
    display: none;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .validation-panel__bulk {
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .validation-panel__bulk-description {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .validation-panel__bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 3);
  }
  .validation-panel__btn--bulk-false-positive {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .validation-panel__btn--bulk-confirm {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .validation-panel__item {
    margin-right: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
  }
  .validation-panel__item-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .validation-panel__item-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .validation-panel__item-3 {
    margin-right: calc(var(--spacing) * 2);
  }
  .validation-panel__item-4 {
    margin-right: calc(var(--spacing) * 2);
  }
  .validation-panel__item-5 {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .validation-stats {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .validation-stats__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .validation-stats__breadcrumb-section {
    color: var(--color-gray-600);
  }
  .validation-stats__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .validation-stats__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .validation-stats__kpi-grid {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .validation-stats__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .validation-stats__card--detail {
    margin-top: calc(var(--spacing) * 6);
  }
  .validation-stats__card-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .validation-stats__card-value {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .validation-stats__card-value--neutral {
    color: var(--color-gray-900);
  }
  .validation-stats__card-value--danger {
    color: var(--color-red-600);
  }
  .validation-stats__card-value--warning {
    color: var(--color-yellow-600);
  }
  .validation-stats__card-value--success {
    color: var(--color-green-600);
  }
  .validation-stats__card-sublabel {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .validation-stats__section-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .validation-stats__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .validation-stats__thead {
    background-color: var(--color-gray-50);
  }
  .validation-stats__th--left {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .validation-stats__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .validation-stats__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .validation-stats__tr {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .validation-stats__td--key {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .validation-stats__td--value {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-600);
  }
  .validation-stats__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .report-form {
    padding: calc(var(--spacing) * 8);
  }
  .report-form__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .report-form__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .report-form__container {
    margin-inline: auto;
    max-width: var(--container-4xl);
  }
  .report-form__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .report-form__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .report-form__body {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .report-form__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .report-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
  }
}
@layer components {
  .report-list__page {
    padding: calc(var(--spacing) * 8);
  }
  .report-list__breadcrumb-text {
    color: var(--color-gray-900);
  }
  .report-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .report-list__header-title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .report-list__header-description {
    color: var(--color-gray-600);
  }
  .report-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .report-list__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .report-list__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .report-list__thead {
    background-color: var(--color-gray-50);
  }
  .report-list__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .report-list__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .report-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .report-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .report-list__td-id {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .report-list__td-name {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .report-list__td-status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .report-list__status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-green-800);
  }
  .report-list__td-date {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .report-list__td-actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .report-list__actions-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .report-list__action-btn {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .report-list__empty-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .report-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .report-list__pagination-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .report-list__pagination-info-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .report-list__pagination-controls {
    display: flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .report-list__pagination-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .report-list__pagination-current {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .report-list__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .report-list__wrapper-1 {
    margin-inline: auto;
  }
  .informes-landing {
    margin-inline: auto;
    max-width: var(--container-6xl);
    padding: calc(var(--spacing) * 8);
  }
  .informes-landing__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .informes-landing__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .informes-landing__subtitle {
    color: var(--color-gray-600);
  }
  .informes-landing__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .informes-landing__card {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: inherit;
    text-decoration-line: none;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-amber-600);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .informes-landing__card-icon {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    background-color: var(--color-amber-50);
    color: var(--color-amber-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .informes-landing__card-body {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .informes-landing__card-title {
    margin-bottom: calc(var(--spacing) * 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .informes-landing__card-desc {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .informes-landing__card-arrow {
    flex-shrink: 0;
    color: var(--color-gray-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .informes-landing__card:hover .informes-landing__card-arrow {
    color: var(--color-amber-700);
  }
  .informes-landing__section {
    margin-top: calc(var(--spacing) * 10);
  }
  .informes-landing__section-title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .informes-landing__section-subtitle {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
}
@layer components {
  .informes-predefinidos__card {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .informes-predefinidos__loading {
    margin-block: calc(var(--spacing) * 4);
    display: none;
    text-align: center;
  }
  .informes-predefinidos__loading-text {
    margin-top: calc(var(--spacing) * 2);
  }
  .hidden {
    display: none;
  }
  .informes-predefinidos__btn-favorito {
    display: none;
  }
  .informes-predefinidos__results {
    display: none;
  }
  .informes-predefinidos__text {
    background-color: var(--color-blue-500);
  }
  .informes-predefinidos__wrapper {
    display: none;
  }
  .informes-predefinidos__wrapper-1 {
    display: flex;
    align-items: flex-end;
  }
  .informes-predefinidos__wrapper-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.informe-viewer {
  max-width: 1200px;
}
.informe-viewer__header {
  margin-bottom: calc(var(--spacing) * 5);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
}
.informe-viewer__title {
  margin-inline: calc(var(--spacing) * 0);
  margin-top: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 1);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-800);
}
.informe-viewer__subtitle {
  margin: calc(var(--spacing) * 0);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-slate-500);
}
.informe-viewer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}
.informe-viewer__actions .btn {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-slate-200);
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 3.5);
  padding-block: calc(var(--spacing) * 2);
  font-size: 0.8125rem;
  color: var(--color-slate-800);
  text-decoration-line: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.informe-viewer__actions .btn:hover {
  background-color: var(--color-slate-50);
}
.informe-viewer__actions .btn--primary {
  border-color: var(--color-sky-500);
  background-color: var(--color-sky-500);
  color: var(--color-white);
}
.informe-viewer__filters {
  margin-bottom: calc(var(--spacing) * 5);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-slate-200);
  background-color: var(--color-slate-50);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
}
.informe-viewer__filters-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--spacing) * 3);
}
.informe-viewer__filters-form label {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-slate-500);
}
.informe-viewer__filters-form input {
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-slate-200);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: 0.8125rem;
}
.informe-viewer__filters-form .btn--primary {
  cursor: pointer;
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-sky-500);
  background-color: var(--color-sky-500);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: 0.8125rem;
  color: var(--color-white);
}
.informe-viewer__fieldset {
  margin-inline: calc(var(--spacing) * 0);
  margin-top: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 5);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-slate-200);
  background-color: var(--color-white);
  padding-inline: 1.125rem;
  padding-top: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 5);
}
.informe-viewer__fieldset-title {
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 0);
  font-size: 0.9375rem;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-800);
}
.informe-viewer__widgets {
  margin-top: calc(var(--spacing) * 2);
  display: grid;
  gap: calc(var(--spacing) * 3.5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.informe-viewer__widget--listado {
  grid-column: 1 / -1;
}
.informe-viewer__widget--grafica {
  grid-column: span 2 / span 2;
}
.informe-viewer__widget--mapa {
  grid-column: 1 / -1;
}
.informe-viewer__widget-raw {
  margin: calc(var(--spacing) * 0);
  max-height: 260px;
  overflow: auto;
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 2);
  font-size: 0.6875rem;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.informe-viewer__empty, .informe-viewer__empty-inline {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  --tw-border-style: dashed;
  border-style: dashed;
  border-color: var(--color-slate-200);
  background-color: var(--color-slate-50);
  padding: calc(var(--spacing) * 6);
  text-align: center;
  color: var(--color-slate-500);
  font-style: italic;
}
.informe-viewer__empty-inline {
  margin: calc(var(--spacing) * 0);
  padding: calc(var(--spacing) * 3);
}
@media print {
  body * {
    visibility: hidden;
  }
  .informe-viewer, .informe-viewer * {
    visibility: visible;
  }
  .informe-viewer {
    position: absolute;
    top: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    margin: calc(var(--spacing) * 0);
    width: 100%;
    max-width: none;
    padding: calc(var(--spacing) * 0);
  }
  .informe-viewer__actions, .informe-viewer__filters, .informe-viewer__breadcrumb {
    display: none !important;
  }
  .app-header, .app-sidebar, .app-sidebar-overlay, #app-sidebar-overlay, .app-layout__wrapper > .app-sidebar, nav, header, footer {
    display: none !important;
  }
  .app-layout__wrapper, .app-main, .app-main__container {
    margin: calc(var(--spacing) * 0) !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: calc(var(--spacing) * 0) !important;
  }
  .unified-dashboard__widget-container, .informe-viewer__widget, .informe-viewer__fieldset {
    break-inside: avoid;
  }
  .informe-viewer__fieldset {
    margin-bottom: calc(var(--spacing) * 4);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-neutral-500);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .informe-viewer__fieldset-title {
    margin-bottom: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  body {
    background-color: var(--color-white);
    color: var(--color-black);
  }
  a[href]:after {
    --tw-content: none !important;
    content: none !important;
  }
}
@layer components {
  .map-popup {
    padding: calc(var(--spacing) * 1);
  }
  .map-popup__title {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .map-popup__meta {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .map-popup__badge {
    border-radius: 0.25rem;
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .map-popup__sensors {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .map-popup__reading {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-600);
  }
  .map-popup__reading--none {
    color: var(--color-gray-400);
    font-style: italic;
  }
  .map-popup__actions {
    margin-top: calc(var(--spacing) * 1);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 2);
  }
  .map-popup__link {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .map-popup__loading {
    padding-block: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .map-popup__error {
    padding-block: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red-500);
  }
}
@layer components;
@layer components {
  .nimrod-marker-circle {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  .nimrod-leyenda-color-dot {
    display: inline-block;
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
    border-radius: calc(infinity * 1px);
    border: 1px solid #cccccc;
  }
  .map-legend {
    display: none;
  }
}
@layer components {
  #nimrod-filtros-mapa .app-filter-bar__fields {
    gap: 0.375rem;
  }
  #nimrod-filtros-mapa .app-filter-bar__group {
    position: relative;
    min-width: 0;
  }
  #nimrod-filtros-mapa .app-filter-bar__group .app-filter-bar__select {
    max-width: 100%;
  }
  #nimrod-filtros-mapa .map-filters__group--elastic {
    flex: 1 1 9.25rem;
    width: auto;
    min-width: 5.5rem;
    max-width: 9.75rem;
  }
  #nimrod-filtros-mapa .map-filters__group--elastic .app-filter-bar__select {
    width: 100%;
    min-width: 0;
  }
  #nimrod-filtros-mapa .map-filters__group--tipo {
    max-width: 9.25rem;
  }
  #nimrod-filtros-mapa .map-filters__group--variable {
    max-width: 8.5rem;
  }
  #nimrod-filtros-mapa #nimrod-filtro-estado {
    width: 8.25rem;
  }
  #nimrod-filtros-mapa #nimrod-filtro-mapa-base {
    width: 8.5rem;
  }
  #nimrod-filtros-mapa #nimrod-filtro-visualizacion {
    width: 7.75rem;
  }
  #nimrod-filtros-mapa .map-filters__group--temporal {
    overflow: visible;
  }
  #nimrod-filtros-mapa .map-filters__historico-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1301;
    min-width: 260px;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  #nimrod-filtros-mapa .map-filters__historico-label {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
  }
  #nimrod-filtros-mapa .map-filters__historico-input {
    width: 100%;
  }
  .map-filters {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-left: 3px solid var(--module-color, #e5e7eb);
    background-color: var(--module-color-bg, white);
  }
  .map-filters__header {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .map-filters__title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }
  .map-filters__actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .map-filters__filter-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--module-color, #e5e7eb);
    color: #fff;
  }
  .map-filters__filter-btn:hover {
    filter: brightness(0.9);
  }
  .map-filters__filter-btn--secondary {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .map-filters__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 3);
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .map-filters__date-container {
    grid-column: span 2 / span 2;
    display: none;
    @media (width >= 40rem) {
      grid-column: span 1 / span 1;
    }
  }
  .map-filters__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .map-filters__filter-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .map-filters__status {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
}
@layer components {
  #nimrod-filtros-status {
    display: none;
  }
  .nimrod-alert-marker-circle {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--marker-color, #3388ff);
  }
}
@layer components {
  .camera-modal__overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }
  .camera-modal__container {
    margin-inline: calc(var(--spacing) * 4);
    width: 100%;
    max-width: var(--container-2xl);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .camera-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding: calc(var(--spacing) * 4);
  }
  .camera-modal__title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .camera-modal__close-btn {
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .camera-modal__body {
    padding: calc(var(--spacing) * 4);
  }
  .camera-modal__video-container {
    display: flex;
    aspect-ratio: var(--aspect-video);
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background-color: var(--color-black);
  }
  .camera-modal__video-placeholder {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .camera-modal__video-url {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    word-break: break-all;
    color: var(--color-gray-400);
  }
}
@layer components;
@layer components {
  .map-type-selector {
    position: relative;
    display: inline-block;
  }
  .map-type-selector__select {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .map-type-selector__verify-btn {
    margin-left: calc(var(--spacing) * 2);
    border-radius: 0.25rem;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .map-type-selector__status {
    margin-left: calc(var(--spacing) * 2);
    display: none;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
}
@layer components {
  .maps-page {
    padding: calc(var(--spacing) * 8);
  }
  .maps-page__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .maps-page__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .maps-page__subtitle {
    color: var(--color-gray-600);
  }
  .maps-page__actions {
    margin-top: calc(var(--spacing) * 6);
  }
  .maps-page__back-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .maps-page__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .maps-page__wrapper-1 {
    margin-inline: auto;
  }
}
@layer components {
  .map-detail-page {
    padding: calc(var(--spacing) * 8);
  }
  .map-detail-page__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .map-detail-page__breadcrumb-link {
    color: var(--color-blue-600);
    text-decoration-line: none;
  }
  .map-detail-page__breadcrumb-sep {
    margin: 0 0.25rem;
  }
  .map-detail-page__breadcrumb-current {
    color: #374151;
  }
  .map-detail-page__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .map-detail-page__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
}
@layer components {
  .map-viewer {
    margin-inline: auto;
    max-width: var(--container-7xl);
  }
  .map-viewer__breadcrumb-mid {
    color: var(--color-gray-600);
  }
  .map-viewer__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .map-viewer__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .map-viewer__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .map-viewer__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .map-viewer__map-card {
    position: relative;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    overflow: hidden;
  }
  #nimrod-mapa-global {
    height: 600px;
    width: 100%;
    z-index: 0;
  }
  #nimrod-panel-estados {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1100;
    max-height: calc(100% - 20px);
    overflow-y: auto;
    pointer-events: auto;
  }
  #nimrod-panel-estados-show {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1100;
    pointer-events: auto;
  }
  #nimrod-leyenda-panel {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1100;
    max-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    pointer-events: auto;
  }
  #nimrod-leyenda-show {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1100;
    pointer-events: auto;
  }
  .timeline-player {
    position: absolute;
    top: auto;
    right: 10px;
    left: auto;
    bottom: 30px;
    transform: none;
    z-index: 1100;
    pointer-events: auto;
  }
  .map-viewer__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .status-panel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .status-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding: calc(var(--spacing) * 3);
  }
  .status-panel__title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .status-panel__header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .status-panel__collapse-btn {
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .status-panel__body {
    padding: calc(var(--spacing) * 3);
  }
  .status-panel__section {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .status-panel__section-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-block: calc(var(--spacing) * 1);
    text-align: left;
  }
  .status-panel__section-heading {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .status-panel__accordion-icon {
    width: 0.75rem;
    height: 0.75rem;
    color: #9ca3af;
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .status-panel__divider {
    margin-block: calc(var(--spacing) * 2);
    border-color: var(--color-gray-100);
  }
  .status-panel__accordion-content {
    margin-top: calc(var(--spacing) * 1);
  }
  .status-panel__total {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .status-panel__list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .status-panel__loading {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .status-panel__show-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 2);
    color: var(--color-gray-600);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  #nimrod-panel-estados {
    width: 280px;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .nimrod-gap-nombre {
    max-width: 160px;
  }
  .nimrod-alerta-color-indicator {
    flex-shrink: 0;
  }
}
@layer components {
  .map-legend {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .map-legend__header {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .map-legend__title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .map-legend__toggle-btn {
    color: var(--color-gray-400);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .map-legend__section {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .map-legend__section-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .map-legend__list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .map-legend__loading {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .map-legend__show-btn {
    cursor: pointer;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 2);
    color: var(--color-gray-600);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
}
@layer components {
  .channel-status {
    padding: calc(var(--spacing) * 8);
  }
  .channel-status__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .channel-status__subtitle {
    color: var(--color-gray-600);
  }
  .channel-status__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .channel-status__breadcrumb-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .channel-status__breadcrumb-sep {
    color: var(--color-gray-400);
  }
  .channel-status__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .channel-status__back-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .channel-status__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding: calc(var(--spacing) * 4);
    color: var(--color-green-800);
  }
  .channel-status__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding: calc(var(--spacing) * 4);
    color: var(--color-red-800);
  }
  .channel-status__flash-dismiss--success {
    margin-left: calc(var(--spacing) * 4);
    color: var(--color-green-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-green-800);
      }
    }
  }
  .channel-status__flash-dismiss--error {
    margin-left: calc(var(--spacing) * 4);
    color: var(--color-red-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-800);
      }
    }
  }
  .channel-status__results-count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .channel-status__results-count-value {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .channel-status__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .channel-status__table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .channel-status__thead {
    background-color: var(--color-gray-50);
  }
  .channel-status__th {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .channel-status__th--right {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .channel-status__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .channel-status__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .channel-status__cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-700);
  }
  .channel-status__cell--status {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .channel-status__cell--actions {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .channel-status__badge {
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .channel-status__badge--active {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }
  .channel-status__badge--inactive {
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
  }
  .channel-status__form-inline {
    display: inline;
  }
  .channel-status__actions-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .channel-status__action-btn--deactivate {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .channel-status__action-btn--activate {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--color-green-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
  }
  .channel-status__empty-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .form-inline {
    display: inline;
  }
  .channel-status__wrapper {
    margin-inline: auto;
  }
}
@layer components {
  .dest-detail {
    margin-inline: auto;
    padding: calc(var(--spacing) * 8);
    max-width: 900px;
  }
  .dest-detail__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .dest-detail__breadcrumb-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .dest-detail__breadcrumb-sep {
    color: var(--color-gray-400);
  }
  .dest-detail__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .dest-detail__back {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .dest-detail__btn--back {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .dest-detail__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .dest-detail__subtitle {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .dest-detail__status {
    flex-shrink: 0;
  }
  .dest-detail__badge--active {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .dest-detail__badge--inactive {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .dest-detail__badge--vacation {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-amber-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-amber-800);
  }
  .dest-detail__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .dest-detail__card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dest-detail__section {
    border: none;
    border-bottom: 1px solid #f3f4f6;
    padding: 0;
    margin: 0;
  }
  .dest-detail__section:last-child {
    border-bottom: none;
  }
  .dest-detail__section-title {
    padding-inline: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-gray-700);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
  }
  .dest-detail__section-title i {
    color: var(--color-gray-400);
    font-size: 0.875rem;
  }
  .dest-detail__fields {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    display: grid;
    gap: 0.75rem;
  }
  .dest-detail__fields--2col {
    grid-template-columns: repeat(2, 1fr);
  }
  .dest-detail__fields--3col {
    grid-template-columns: repeat(3, 1fr);
  }
  .dest-detail__field--full {
    grid-column: 1 / -1;
  }
  .dest-detail__value {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    margin: 0;
  }
  .dest-detail__label-required {
    color: var(--color-red-500);
  }
  .dest-detail__label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-bottom: 0.15rem;
  }
  .dest-detail__required {
    color: var(--color-red-500);
  }
  .dest-detail__input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .dest-detail__input:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .dest-detail__select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .dest-detail__select:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .dest-detail__textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    box-sizing: border-box;
  }
  .dest-detail__textarea:focus {
    border-color: var(--color-blue-500);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    outline: none;
  }
  .dest-detail__hint {
    padding-inline: calc(var(--spacing) * 6);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
  }
  .dest-detail__canal {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .dest-detail__canal:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .dest-detail__canal-toggle {
    display: flex;
    min-width: calc(var(--spacing) * 45);
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .dest-detail__canal-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .dest-detail__canal-input {
    flex: 1;
  }
  .dest-detail__toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
  }
  .dest-detail__toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .dest-detail__toggle-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #d1d5db;
    border-radius: 22px;
    transition: background 0.2s;
  }
  .dest-detail__toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
  }
  .dest-detail__toggle-input:checked + .dest-detail__toggle-slider {
    background: #2563eb;
  }
  .dest-detail__toggle-input:checked + .dest-detail__toggle-slider::before {
    transform: translateX(18px);
  }
  .dest-detail__grupo-add {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 6);
  }
  .dest-detail__select--grupo {
    flex: 1;
  }
  .dest-detail__btn--add {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    border: none;
    cursor: pointer;
  }
  .dest-detail__btn--add:hover {
    background-color: var(--color-blue-700);
  }
  .dest-detail__btn--add:disabled {
    cursor: not-allowed;
    background-color: var(--color-gray-300);
  }
  .dest-detail__grupo-table-wrap {
    margin-inline: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 4);
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
  }
  .dest-detail__grupo-table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .dest-detail__grupo-th {
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .dest-detail__grupo-row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .dest-detail__grupo-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .dest-detail__select--sm {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .dest-detail__btn--remove {
    border-radius: 0.25rem;
    padding: calc(var(--spacing) * 1);
    color: var(--color-red-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
    border: none;
    background: none;
    cursor: pointer;
  }
  .dest-detail__actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .dest-detail__btn--danger {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-red-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    border: none;
    cursor: pointer;
  }
  .dest-detail__btn--danger:hover {
    background-color: var(--color-red-700);
  }
  .dest-detail__btn--success {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    border: none;
    cursor: pointer;
  }
  .dest-detail__btn--success:hover {
    background-color: var(--color-blue-700);
  }
  .dest-detail__btn--warning {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-amber-500);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    border: none;
    cursor: pointer;
  }
  .dest-detail__btn--warning:hover {
    background-color: var(--color-amber-600);
  }
  .dest-detail__btn--outline {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
  }
  .dest-detail__btn--outline:hover {
    background-color: var(--color-gray-200);
  }
  .dest-detail__footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-100);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .dest-detail__btn--cancel {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .dest-detail__btn--submit {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .dest-detail__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-green-800);
  }
  .dest-detail__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-800);
  }
  @media (max-width: 768px) {
    .dest-detail__fields--2col, .dest-detail__fields--3col {
      grid-template-columns: 1fr;
    }
    .dest-detail__canal {
      flex-direction: column;
      align-items: stretch;
    }
    .dest-detail__header {
      flex-direction: column;
      gap: 0.5rem;
    }
  }
  .dest-detail__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .dest-detail__form--hidden {
    display: none;
  }
}
@layer components {
  .dest-list {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .dest-list__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .dest-list__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .dest-list__subtitle {
    color: var(--color-gray-600);
  }
  .dest-list__header-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .dest-list__create-btn {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .dest-list__btn--success {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .dest-list__count {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .dest-list__count-number {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .dest-list__table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dest-list__table {
    width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    min-width: 860px;
  }
  .dest-list__thead {
    background-color: var(--color-gray-50);
  }
  .dest-list__th {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .dest-list__th--right {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .dest-list__tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
    background-color: var(--color-white);
  }
  .dest-list__row {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .dest-list__cell {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-600);
  }
  .dest-list__cell--id {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .dest-list__cell--name {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-900);
  }
  .dest-list__cell--status {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    white-space: nowrap;
  }
  .dest-list__cell--actions {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .dest-list__th--canales, .dest-list__cell--canales {
    width: 6rem;
    min-width: 6rem;
  }
  .dest-list__th--updated, .dest-list__cell--updated {
    width: 8rem;
    min-width: 8rem;
  }
  .dest-list__th--actions, .dest-list__cell--actions {
    width: 5rem;
    min-width: 5rem;
  }
  .dest-list__cell--status {
    width: 5.5rem;
    min-width: 5.5rem;
  }
  .dest-list__badge--active {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-green-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .dest-list__badge--inactive {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-800);
  }
  .dest-list__action-group {
    display: flex;
    justify-content: flex-end;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .dest-list__action--edit {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 1.5);
    color: var(--color-blue-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .dest-list__action--deactivate {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 1.5);
    color: var(--color-red-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .dest-list__deactivate-form {
    display: inline;
  }
  .dest-list__empty {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-500);
  }
  .dest-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .dest-list__breadcrumb-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .dest-list__breadcrumb-sep {
    color: var(--color-gray-400);
  }
  .dest-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .dest-list__cell--canales {
    white-space: nowrap;
  }
  .dest-list__canal-icon {
    margin-right: calc(var(--spacing) * 1);
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-600);
  }
  .dest-list__canal-link {
    margin-right: calc(var(--spacing) * 1);
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-700);
    text-decoration-line: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .dest-list__canal-link:hover {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
  }
  .dest-list__canal-link:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-gray-400);
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    outline-style: none;
  }
  .dest-list__grupo-badge {
    margin-right: calc(var(--spacing) * 1);
    display: inline-block;
    border-radius: 0.25rem;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-700);
  }
  .dest-list__badge--vacation {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-amber-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-amber-800);
  }
  .dest-list__action--activate {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 1.5);
    color: var(--color-green-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
  }
  .dest-list__pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: calc(var(--spacing) * 4);
  }
  .dest-list__pagination-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .dest-list__pagination-nav {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .dest-list__page-btn {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .dest-list__page-btn--active {
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .dest-list__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-green-800);
  }
  .dest-list__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-800);
  }
  .dest-list__wrapper {
    margin-inline: auto;
  }
}
@layer components {
  .group-assign {
    padding: calc(var(--spacing) * 8);
  }
  .group-assign__container {
    max-width: var(--container-4xl);
  }
  .group-assign__nav {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .group-assign__nav-links {
    display: flex;
    gap: calc(var(--spacing) * 4);
  }
  .group-assign__nav-link--back {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .group-assign__nav-link--manage {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-green-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-green-800);
      }
    }
  }
  .group-assign__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .group-assign__title {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }
  .group-assign__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .group-assign__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .group-assign__form {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .group-assign__info-box {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 4);
  }
  .group-assign__info-inner {
    display: flex;
  }
  .group-assign__info-icon {
    flex-shrink: 0;
  }
  .group-assign__info-icon i {
    color: var(--color-blue-500);
  }
  .group-assign__info-body {
    margin-left: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-700);
  }
  .group-assign__info-title {
    margin-bottom: calc(var(--spacing) * 1);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .group-assign__info-list {
    margin-top: calc(var(--spacing) * 2);
    list-style-position: inside;
    list-style-type: disc;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .group-assign__section-header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .group-assign__section-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .group-assign__add-btn {
    border-radius: 0.25rem;
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .group-assign__list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .group-assign__row {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 3);
  }
  .group-assign__field {
    flex: 1;
  }
  .group-assign__field--narrow {
    width: calc(var(--spacing) * 32);
  }
  .group-assign__label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .group-assign__input {
    width: 100%;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .group-assign__select {
    width: 100%;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .group-assign__remove-wrap {
    padding-top: calc(var(--spacing) * 6);
  }
  .group-assign__remove-btn {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-red-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-800);
      }
    }
  }
  .group-assign__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-top: calc(var(--spacing) * 6);
  }
  .group-assign__cancel-btn {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .group-assign__submit-btn {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .group-assign__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .group-assign__breadcrumb-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .group-assign__breadcrumb-sep {
    color: var(--color-gray-400);
  }
  .group-assign__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .group-assign__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .group-assign__item-1 {
    margin-right: calc(var(--spacing) * 2);
  }
  .group-assign__item-2 {
    margin-right: calc(var(--spacing) * 1);
  }
  .group-assign__item-3 {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .grupo-not-list {
    padding: calc(var(--spacing) * 8);
  }
  .grupo-not-list__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .grupo-not-list__breadcrumb-link {
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .grupo-not-list__breadcrumb-sep {
    color: var(--color-gray-400);
  }
  .grupo-not-list__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .grupo-not-list__header {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .grupo-not-list__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .grupo-not-list__flash--success {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    background-color: var(--color-green-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-green-800);
  }
  .grupo-not-list__flash--error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-800);
  }
  .grupo-not-list__empty {
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    color: var(--color-gray-500);
  }
  .grupo-not-list__table-wrapper {
    overflow-x: auto;
  }
  .grupo-not-list__table {
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .grupo-not-list__table-header {
    background-color: var(--color-gray-50);
  }
  .grupo-not-list__th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .grupo-not-list__th--center {
    text-align: center;
  }
  .grupo-not-list__row {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .grupo-not-list__td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .grupo-not-list__td--code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-600);
  }
  .grupo-not-list__td--center {
    text-align: center;
  }
  .grupo-not-list__name {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .grupo-not-list__desc {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .grupo-not-list__badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-800);
  }
  .grupo-not-list__badge--empty {
    background-color: var(--color-gray-100);
    color: var(--color-gray-500);
  }
  .grupo-not-list__action-link {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-600);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
}
@layer components {
  .unified-dashboard {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .dash__title {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
  }
  .dash__stats {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .dash__stat-card {
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__stat-card--users {
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-blue-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__stat-card--modules {
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-green-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__stat-card--handlers {
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-purple-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__stat-card--tests {
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-indigo-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__stat-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .dash__stat-value {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
  }
  .dash__panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
  }
  .dash__panel {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__panel-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .dash__module-link {
    display: block;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding: calc(var(--spacing) * 4);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-100);
      }
    }
  }
  .dash__module-link-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .dash__module-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .dash__module-sublabel {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-green-600);
  }
  .dash__module-icon {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    color: var(--color-green-500);
  }
  .dash__upcoming-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .dash__upcoming-item {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
    opacity: 60%;
  }
  .dash__upcoming-item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .dash__upcoming-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
  }
  .dash__upcoming-sublabel {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .dash__upcoming-icon {
    color: var(--color-gray-400);
  }
  .unified-dashboard__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__toolbar {
    display: flex;
    gap: 0.5rem;
  }
  .unified-dashboard__toolbar-btn {
    padding: 0.5rem 0.75rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .unified-dashboard__toolbar-btn:hover {
    background: #e2e8f0;
  }
  .unified-dashboard__toolbar-btn--active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
  }
  .unified-dashboard__toolbar-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .unified-dashboard .periodo-filter {
    --periodo-filter-btn-size: 32px;
    --periodo-filter-btn-width: 38px;
  }
  .unified-dashboard__section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
  }
  .unified-dashboard__stats {
    --dashboard-kpi-min-size: 210px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__stat-card {
    flex: 1 1 var(--dashboard-kpi-min-size);
    min-width: var(--dashboard-kpi-min-size);
    width: auto;
    aspect-ratio: 7 / 4;
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-left: 4px solid #3b82f6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.25rem;
  }
  .unified-dashboard__stat-card--success {
    border-left-color: #22c55e;
  }
  .unified-dashboard__stat-card--danger {
    border-left-color: #ef4444;
  }
  .unified-dashboard__stat-card--warning {
    border-left-color: #f59e0b;
  }
  .unified-dashboard__stat-card--info {
    border-left-color: #3b82f6;
  }
  .unified-dashboard__stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
  }
  .unified-dashboard__stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
  }
  .unified-dashboard__stat-sub {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
  }
  .unified-dashboard__kpis {
    --dashboard-kpi-min-size: 210px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__kpi-card {
    flex: 1 1 var(--dashboard-kpi-min-size);
    min-width: var(--dashboard-kpi-min-size);
    width: auto;
    aspect-ratio: 7 / 4;
    background: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-left: 4px solid #3b82f6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .unified-dashboard__kpi-card--operativo {
    border-left-color: #22c55e;
  }
  .unified-dashboard__kpi-card--calidad {
    border-left-color: #a855f7;
  }
  .unified-dashboard__kpi-card--seguridad {
    border-left-color: #ef4444;
  }
  .unified-dashboard__kpi-card--financiero {
    border-left-color: #f59e0b;
  }
  .unified-dashboard__kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .unified-dashboard__kpi-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin: 0;
  }
  .unified-dashboard__stat-label, .unified-dashboard__kpi-name {
    white-space: nowrap;
  }
  .unified-dashboard__kpi-trend--up {
    color: #22c55e;
  }
  .unified-dashboard__kpi-trend--down {
    color: #ef4444;
  }
  .unified-dashboard__kpi-trend--neutral {
    color: #94a3b8;
  }
  .unified-dashboard__kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem;
  }
  .unified-dashboard__kpi-unit {
    font-size: 0.75rem;
    font-weight: 400;
    color: #94a3b8;
  }
  .unified-dashboard__kpi-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
  }
  .unified-dashboard__kpi-skeleton {
    background: #e2e8f0;
    border-radius: 0.25rem;
    height: 2rem;
    width: 60%;
    animation: unified-skeleton-pulse 1.5s ease-in-out infinite;
  }
  .unified-dashboard__mapa-alertas {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__mapa-container {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
    min-height: 400px;
  }
  .alert-map__container {
    width: 100%;
    height: 100%;
  }
  .unified-dashboard__mapa-placeholder {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 0.875rem;
  }
  .unified-dashboard__alertas-estado {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .unified-dashboard__alerta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
  }
  .unified-dashboard__alerta-row:last-child {
    border-bottom: none;
  }
  .unified-dashboard__alerta-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.5rem;
  }
  .unified-dashboard__alerta-nombre {
    font-size: 0.875rem;
    color: #334155;
  }
  .unified-dashboard__alerta-total {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.875rem;
  }
  .unified-dashboard__alertas-recientes-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
  }
  .unified-dashboard__alertas-recientes-badge--abierta {
    background: #fef3c7;
    color: #92400e;
  }
  .unified-dashboard__alertas-recientes-badge--en-proceso {
    background: #dbeafe;
    color: #1e40af;
  }
  .unified-dashboard__alertas-recientes-badge--escalada {
    background: #fce7f3;
    color: #9f1239;
  }
  .unified-dashboard__alertas-recientes-badge--cerrada {
    background: #d1fae5;
    color: #065f46;
  }
  .unified-dashboard__alertas-recientes-badge--expirada {
    background: #e5e7eb;
    color: #374151;
  }
  .unified-dashboard__eventos {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__eventos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }
  .unified-dashboard__eventos-table th {
    text-align: left;
    padding: 0.5rem;
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    border-bottom: 2px solid #e2e8f0;
  }
  .unified-dashboard__eventos-table td {
    padding: 0.5rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
  }
  .unified-dashboard__eventos-empty {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
  }
  .unified-dashboard__eventos-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
  }
  .unified-dashboard__eventos-link {
    font-size: 0.8rem;
    color: #3b82f6;
    text-decoration: none;
  }
  .unified-dashboard__eventos-link:hover {
    text-decoration: underline;
  }
  .unified-dashboard__acceso {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__acceso-card {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    text-decoration: none;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: box-shadow 0.15s;
  }
  .unified-dashboard__acceso-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .unified-dashboard__acceso-icon {
    font-size: 1.5rem;
    color: #3b82f6;
    width: 2.5rem;
    text-align: center;
  }
  .unified-dashboard__acceso-text h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: #1e293b;
  }
  .unified-dashboard__acceso-text p {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
  }
  .unified-dashboard__widget-grid:has(> .unified-dashboard__widget-container[data-widget-tipo='KPI']) {
    --dashboard-kpi-min-size: 210px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.625rem;
  }
  @keyframes unified-skeleton-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  @keyframes unified-pulse-update {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.02);
      box-shadow: 0 4px 12px rgba(59,130,246,0.15);
    }
  }
  .unified-dashboard__pulse {
    animation: unified-pulse-update 0.5s ease-in-out;
  }
  @media (max-width: 768px) {
    .unified-dashboard__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }
    .unified-dashboard__mapa-alertas {
      grid-template-columns: 1fr;
    }
    .unified-dashboard__mapa-container {
      min-height: 250px;
    }
    .unified-dashboard__stats, .unified-dashboard__kpis {
      --dashboard-kpi-min-size: 180px;
    }
    .unified-dashboard__widget-grid:has(> .unified-dashboard__widget-container[data-widget-tipo='KPI']) {
      --dashboard-kpi-min-size: 180px;
    }
    .unified-dashboard__toolbar {
      flex-wrap: wrap;
    }
  }
  @media (max-width: 480px) {
    .unified-dashboard__stats, .unified-dashboard__kpis {
      --dashboard-kpi-min-size: 172px;
    }
    .unified-dashboard__widget-grid:has(> .unified-dashboard__widget-container[data-widget-tipo='KPI']) {
      --dashboard-kpi-min-size: 172px;
    }
    .unified-dashboard__acceso {
      grid-template-columns: 1fr;
    }
  }
}
#unified-dashboard:fullscreen {
  background: #f8fafc !important;
  padding: 1.5rem;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}
#unified-dashboard:-webkit-full-screen {
  background: #f8fafc !important;
  padding: 1.5rem;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}
#unified-dashboard::backdrop {
  background: #f8fafc !important;
}
#unified-dashboard::-webkit-backdrop {
  background: #f8fafc !important;
}
@layer components {
  .shared-form {
    padding: calc(var(--spacing) * 8);
  }
  .shared-form__breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .shared-form__breadcrumb-current {
    color: var(--color-gray-900);
  }
  .shared-form__container {
    margin-inline: auto;
    max-width: var(--container-4xl);
  }
  .shared-form__header {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .shared-form__subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .shared-form__body {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .shared-form__card {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shared-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
  }
}
@layer components {
  .dash__title {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
  }
  .dash__stats {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .dash__stat-card {
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__stat-card--users {
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-blue-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__stat-card--modules {
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-green-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__stat-card--handlers {
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-purple-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__stat-card--tests {
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-indigo-500);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__stat-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .dash__stat-value {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
  }
  .dash__panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
  }
  .dash__panel {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .dash__panel-title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .dash__module-link {
    display: block;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding: calc(var(--spacing) * 4);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-100);
      }
    }
  }
  .dash__module-link-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .dash__module-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-green-800);
  }
  .dash__module-sublabel {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-green-600);
  }
  .dash__module-icon {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    color: var(--color-green-500);
  }
  .dash__upcoming-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .dash__upcoming-item {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
    opacity: 60%;
  }
  .dash__upcoming-item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .dash__upcoming-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
  }
  .dash__upcoming-sublabel {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .dash__upcoming-icon {
    color: var(--color-gray-400);
  }
  .unified-dashboard__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__filters {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }
  .unified-dashboard__filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .unified-dashboard__filter-group--wide {
    flex: 2;
  }
  .unified-dashboard__filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .unified-dashboard__filter-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #334155;
    background: #fff;
    min-width: 160px;
  }
  .unified-dashboard__filter-btn {
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
  }
  .unified-dashboard__filter-btn:hover {
    background: #2563eb;
  }
  .unified-dashboard__toolbar {
    display: flex;
    gap: 0.5rem;
  }
  .unified-dashboard__toolbar-btn {
    padding: 0.5rem 0.75rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .unified-dashboard__toolbar-btn:hover {
    background: #e2e8f0;
  }
  .unified-dashboard__toolbar-btn--active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
  }
  .unified-dashboard__section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
  }
  .unified-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__stat-card {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-left: 4px solid #3b82f6;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .unified-dashboard__stat-card--success {
    border-left-color: #22c55e;
  }
  .unified-dashboard__stat-card--danger {
    border-left-color: #ef4444;
  }
  .unified-dashboard__stat-card--warning {
    border-left-color: #f59e0b;
  }
  .unified-dashboard__stat-card--info {
    border-left-color: #3b82f6;
  }
  .unified-dashboard__stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
  }
  .unified-dashboard__stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
  }
  .unified-dashboard__stat-sub {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
  }
  .unified-dashboard__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__kpi-card {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-left: 4px solid #3b82f6;
  }
  .unified-dashboard__kpi-card--operativo {
    border-left-color: #22c55e;
  }
  .unified-dashboard__kpi-card--calidad {
    border-left-color: #a855f7;
  }
  .unified-dashboard__kpi-card--seguridad {
    border-left-color: #ef4444;
  }
  .unified-dashboard__kpi-card--financiero {
    border-left-color: #f59e0b;
  }
  .unified-dashboard__kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .unified-dashboard__kpi-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin: 0;
  }
  .unified-dashboard__kpi-trend--up {
    color: #22c55e;
  }
  .unified-dashboard__kpi-trend--down {
    color: #ef4444;
  }
  .unified-dashboard__kpi-trend--neutral {
    color: #94a3b8;
  }
  .unified-dashboard__kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem;
  }
  .unified-dashboard__kpi-unit {
    font-size: 0.75rem;
    font-weight: 400;
    color: #94a3b8;
  }
  .unified-dashboard__kpi-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
  }
  .unified-dashboard__kpi-skeleton {
    background: #e2e8f0;
    border-radius: 0.25rem;
    height: 2rem;
    width: 60%;
    animation: unified-skeleton-pulse 1.5s ease-in-out infinite;
  }
  .unified-dashboard__mapa-alertas {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__mapa-container {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
    min-height: 400px;
  }
  .alert-map__container {
    width: 100%;
    height: 100%;
  }
  .unified-dashboard__mapa-placeholder {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 0.875rem;
  }
  .unified-dashboard__alertas-estado {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .unified-dashboard__alerta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
  }
  .unified-dashboard__alerta-row:last-child {
    border-bottom: none;
  }
  .unified-dashboard__alerta-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.5rem;
  }
  .unified-dashboard__alerta-nombre {
    font-size: 0.875rem;
    color: #334155;
  }
  .unified-dashboard__alerta-total {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.875rem;
  }
  .unified-dashboard__eventos {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__eventos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }
  .unified-dashboard__eventos-table th {
    text-align: left;
    padding: 0.5rem;
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    border-bottom: 2px solid #e2e8f0;
  }
  .unified-dashboard__eventos-table td {
    padding: 0.5rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
  }
  .unified-dashboard__eventos-empty {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
  }
  .unified-dashboard__eventos-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
  }
  .unified-dashboard__eventos-link {
    font-size: 0.8rem;
    color: #3b82f6;
    text-decoration: none;
  }
  .unified-dashboard__eventos-link:hover {
    text-decoration: underline;
  }
  .unified-dashboard__acceso {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .unified-dashboard__acceso-card {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    text-decoration: none;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: box-shadow 0.15s;
  }
  .unified-dashboard__acceso-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .unified-dashboard__acceso-icon {
    font-size: 1.5rem;
    color: #3b82f6;
    width: 2.5rem;
    text-align: center;
  }
  .unified-dashboard__acceso-text h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: #1e293b;
  }
  .unified-dashboard__acceso-text p {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
  }
  @keyframes unified-skeleton-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  @keyframes unified-pulse-update {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.02);
      box-shadow: 0 4px 12px rgba(59,130,246,0.15);
    }
  }
  .unified-dashboard__pulse {
    animation: unified-pulse-update 0.5s ease-in-out;
  }
  @media (max-width: 768px) {
    .unified-dashboard__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }
    .unified-dashboard__mapa-alertas {
      grid-template-columns: 1fr;
    }
    .unified-dashboard__stats {
      grid-template-columns: repeat(2, 1fr);
    }
    .unified-dashboard__kpis {
      grid-template-columns: repeat(2, 1fr);
    }
    .unified-dashboard__filters {
      flex-direction: column;
    }
  }
  .shared-list {
    padding: calc(var(--spacing) * 8);
  }
  .shared-list__wrapper {
    margin-inline: auto;
  }
}
@layer components {
  .telemetria-historica {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .container-hidden {
    display: none;
  }
  .chart-container-telemetria {
    height: 300px;
  }
}
@layer components {
  .indicadores-page {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .indicadores-page__header {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .indicadores-page__desc {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .indicadores-page__info {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-200);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-blue-800);
  }
  .indicadores-page__info-icon {
    margin-top: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
  }
  .indicadores-page__loading {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--color-gray-400);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .indicadores-page__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 12);
  }
  .indicadores-page__empty-state .empty-state-icon {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    color: var(--color-gray-300);
  }
  .indicadores-page__empty-state .empty-state-icon svg {
    height: 100%;
    width: 100%;
  }
  .badge-alerta-custom {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    background-color: var(--alerta-color, #6c757d);
  }
  .telemetry-breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .tel-registros {
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding: calc(var(--spacing) * 8);
  }
  .tel-registros__header {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tel-registros__desc {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .tel-registros .app-filter-bar__advanced-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .tel-registros .app-filter-bar__advanced-fields > .app-filter-bar__group {
    flex: 1 1 auto;
    order: 1;
  }
  .tel-registros .app-filter-bar__advanced-fields > #tel-btn-exportar {
    flex: 0 0 auto;
    order: 2;
    align-self: center;
  }
  .tel-registros .app-filter-bar__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .tel-registros .app-filter-bar__fields > .app-filter-bar__group {
    flex: 1 1 180px;
    max-width: 320px;
  }
  .tel-registros__periodo-inline {
    margin-left: calc(var(--spacing) * 2);
  }
  .tel-registros .app-filter-bar__fields > .tel-registros__fieldset {
    flex: 0 1 auto;
    margin-bottom: calc(var(--spacing) * 0);
    align-self: flex-end;
  }
  .tel-registros__fieldset {
    margin-bottom: calc(var(--spacing) * 0);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .tel-registros__fieldset--hidden {
    display: none;
  }
  .tel-registros__legend {
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .tel-registros__legend-actions {
    margin-left: calc(var(--spacing) * 3);
  }
  .tel-registros__link-btn {
    cursor: pointer;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-blue-500);
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
    color: var(--module-color, #3b82f6);
  }
  .tel-registros__filter-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .tel-registros__filter-row--wrap {
    flex-wrap: wrap;
  }
  .tel-registros__check-label {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
  }
  .tel-registros__check-input {
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);
  }
  .tel-registros__hint {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
    font-style: italic;
  }
  .tel-registros__tabs {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding-bottom: calc(var(--spacing) * 3);
  }
  .tel-registros__tab {
    cursor: pointer;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .tel-registros__tab:hover {
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
  }
  .tel-registros__tab:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-blue-500);
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    outline-style: none;
  }
  .tel-registros__tab--active {
    color: var(--color-white);
    background-color: var(--module-color, #2563eb);
    border-color: var(--module-color, #2563eb);
  }
  .tel-registros__tab--active:hover {
    filter: brightness(0.9);
  }
  .tel-registros__label {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .tel-registros__input {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .tel-registros__select {
    min-width: calc(var(--spacing) * 45);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .tel-registros__filtro-group--combo {
    position: relative;
  }
  .tel-registros__combo {
    position: relative;
  }
  .tel-registros__combo-input {
    width: 100%;
    min-width: calc(var(--spacing) * 50);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .tel-registros__combo-dropdown {
    position: absolute;
    top: 100%;
    right: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: 40;
    margin-top: calc(var(--spacing) * 1);
    display: none;
    max-height: calc(var(--spacing) * 60);
    overflow-y: auto;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .tel-registros__combo-dropdown--open {
    display: block;
  }
  .tel-registros__combo-item {
    cursor: pointer;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
  }
  .tel-registros__combo-item:first-child {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-400);
  }
  .tel-registros__filtro-quick {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .tel-registros__quick-btn {
    cursor: pointer;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .tel-registros__quick-btn:hover {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
  }
  .tel-registros__quick-btn--active {
    color: var(--module-color, #2563eb);
    border-color: var(--module-color, #2563eb);
    background-color: var(--module-color-bg, #eff6ff);
  }
  .tel-registros__filtro-actions {
    display: flex;
    align-items: flex-end;
  }
  .tel-registros__btn {
    cursor: pointer;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .tel-registros__btn--primary {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    color: var(--color-white);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-offset-width: 1px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    background-color: var(--module-color, #2563eb);
  }
  .tel-registros__btn--primary:hover {
    filter: brightness(0.9);
  }
  .tel-registros__btn-icon {
    margin-top: calc(var(--spacing) * -0.5);
    margin-right: calc(var(--spacing) * 1.5);
    display: inline-block;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .tel-registros__tabla-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .tel-registros__tabla {
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .tel-registros__th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }
  .tel-registros__row {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .tel-registros__td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-gray-700);
  }
  .tel-registros__td--valor {
    font-family: var(--font-mono);
  }
  .tel-registros__td--indicadores {
    text-align: center;
  }
  .tel-registros__tipo-badge {
    display: inline-block;
    border-radius: 0.25rem;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
  }
  .tel-registros__loading {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    color: var(--color-gray-400);
  }
  .tel-registros__spinner {
    margin-right: calc(var(--spacing) * 2);
    display: inline-block;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-gray-300);
    border-top-color: var(--color-blue-600);
    animation: tel-spin 0.6s linear infinite;
  }
  @keyframes tel-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .tel-registros__empty {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    color: var(--color-gray-400);
  }
  .tel-registros__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .tel-registros__empty-state .empty-state-icon {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    color: var(--color-gray-300);
  }
  .tel-registros__empty-state .empty-state-icon svg {
    height: 100%;
    width: 100%;
  }
  .tel-registros__empty-state .empty-state-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .tel-registros__empty-state .empty-state-subtitle {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-400);
  }
  .tel-registros__indicador {
    margin-inline: calc(var(--spacing) * 0.5);
    display: inline-block;
    cursor: pointer;
  }
  .tel-registros__indicador--evento {
    color: var(--color-amber-500);
    font-size: 1.1rem;
  }
  .tel-registros__indicador--alerta {
    font-size: 0.85rem;
  }
  .tel-registros__tooltip {
    position: absolute;
    z-index: 50;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-900);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    max-width: 280px;
  }
  .tel-registros__tooltip-content {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .tel-registros__paginacion {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 1);
  }
  .tel-registros__paginacion-info {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
  }
  .tel-registros__paginacion-btns {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .tel-registros__page-btn {
    cursor: pointer;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
    &:focus {
      --tw-ring-offset-width: 1px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .tel-registros__page-btn--active {
    border-color: var(--color-blue-600);
    background-color: var(--color-blue-600);
    color: var(--color-white);
  }
  .tel-registros__page-dots {
    padding-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .telemetry-breadcrumb {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components;
.group-detail__fields {
  margin-top: calc(var(--spacing) * 4);
}
.group-detail__cell {
  text-align: center;
}
.group-detail__item {
  margin-right: calc(var(--spacing) * 2);
}
.group-detail__prog-form {
  margin-top: calc(var(--spacing) * 4);
}
.group-detail__prog-form-actions {
  margin-top: calc(var(--spacing) * 3);
}
.group-detail__th {
  width: calc(var(--spacing) * 10);
  text-align: center;
}
.group-detail__cell {
  text-align: center;
}
.group-detail__item {
  margin-right: calc(var(--spacing) * 2);
}
.group-detail__prog-form {
  margin-top: calc(var(--spacing) * 4);
}
.group-detail__prog-form-actions {
  margin-top: calc(var(--spacing) * 3);
}
.group-detail__th {
  text-align: center;
}
.group-detail__item {
  margin-right: calc(var(--spacing) * 2);
}
.group-detail__prog-dias-check {
  margin-top: calc(var(--spacing) * 2);
}
.group-detail__item {
  margin-right: calc(var(--spacing) * 2);
}
.group-detail__item-1 {
  margin-right: calc(var(--spacing) * 2);
}
.group-detail__item-2 {
  margin-right: calc(var(--spacing) * 2);
}
.group-detail__fields {
  margin-top: calc(var(--spacing) * 4);
}
.grupo-prog {
  padding: calc(var(--spacing) * 8);
}
.grupo-prog__actions {
  margin-top: calc(var(--spacing) * 6);
  display: flex;
  gap: calc(var(--spacing) * 3);
}
.grupo-prog__add-tramo {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-blue-600);
  &:hover {
    @media (hover: hover) {
      color: var(--color-blue-800);
    }
  }
}
.grupo-prog__btn--cancel {
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-gray-700);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
}
.grupo-prog__btn--submit {
  border-radius: 0.25rem;
  background-color: var(--color-blue-600);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-white);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700);
    }
  }
}
.grupo-prog__delete-btn {
  color: var(--color-red-500);
  &:hover {
    @media (hover: hover) {
      color: var(--color-red-700);
    }
  }
}
.grupo-prog__empty {
  margin-top: calc(var(--spacing) * 6);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
}
.grupo-prog__field {
  margin-bottom: calc(var(--spacing) * 4);
}
.grupo-prog__form-card {
  margin-top: calc(var(--spacing) * 8);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.grupo-prog__form-title {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.grupo-prog__input {
  width: 100%;
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
}
.grupo-prog__item {
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 4);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.grupo-prog__item-1 {
  margin-right: calc(var(--spacing) * 2);
}
.grupo-prog__item-desc {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
}
.grupo-prog__item-header {
  margin-bottom: calc(var(--spacing) * 3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grupo-prog__item-status {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.grupo-prog__item-status--active {
  color: var(--color-green-600);
}
.grupo-prog__item-status--inactive {
  color: var(--color-gray-400);
}
.grupo-prog__item-tz {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
}
.grupo-prog__list {
  margin-top: calc(var(--spacing) * 6);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.grupo-prog__select {
  width: 100%;
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
}
.grupo-prog__subtitle {
  color: var(--color-gray-500);
}
.grupo-prog__tramo-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.grupo-prog__tramos {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.grupo-prog__tramos-label {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.grupo-prog__tramos-table {
  width: 100%;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.grupo-prog__wrapper {
  margin-bottom: calc(var(--spacing) * 4);
}
.level2-detail__btn--confirm {
  margin-top: calc(var(--spacing) * 2);
}
.level2-detail__hint {
  color: var(--color-red-600);
}
.level2-detail__item {
  margin-right: calc(var(--spacing) * 2);
}
#estado-footer.alert-detail__modal-footer {
  display: none;
}
.alert-detail__wrapper {
  margin-inline: auto;
}
.alert-detail__wrapper {
  margin-inline: auto;
}
.alert-detail__image-preview--clickable {
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
}
.alert-detail__image-preview--clickable:hover {
  scale: 1.02;
}
.alert-detail__image-preview-zoom {
  position: absolute;
  inset: calc(var(--spacing) * 0);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, #000 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
  }
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  color: var(--color-white);
  opacity: 0%;
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  pointer-events: none;
}
.alert-detail__image-preview--clickable:hover .alert-detail__image-preview-zoom {
  opacity: 100%;
}
.alert-detail__lightbox {
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, #000 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 85%, transparent);
  }
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  padding: calc(var(--spacing) * 4);
  @media (width >= 40rem) {
    padding: calc(var(--spacing) * 8);
  }
  cursor: zoom-out;
}
.alert-detail__lightbox-close {
  position: absolute;
  top: calc(var(--spacing) * 4);
  right: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 10);
  width: calc(var(--spacing) * 10);
  border-radius: calc(infinity * 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, #fff 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
  }
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  color: var(--color-white);
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in srgb, #fff 25%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 25%, transparent);
      }
    }
  }
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 150ms;
  transition-duration: 150ms;
  cursor: pointer;
}
.alert-detail__lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 90vh;
  max-width: 95vw;
  cursor: default;
}
.alert-detail__lightbox-image {
  max-height: 85vh;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0.25rem;
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.alert-detail__lightbox-caption {
  margin-top: calc(var(--spacing) * 3);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: color-mix(in srgb, #fff 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 90%, transparent);
  }
}
.alert-detail__pagination {
  margin-top: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 3);
}
.alert-detail__pagination-btn {
  height: calc(var(--spacing) * 9);
  width: calc(var(--spacing) * 9);
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  background-color: var(--color-white);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 150ms;
  transition-duration: 150ms;
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-gray-400);
    }
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 40%;
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-300);
      }
    }
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
}
.alert-detail__pagination-info {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  -webkit-user-select: none;
  user-select: none;
}
.alert-detail__wrapper {
  margin-inline: auto;
}
.alert-detail__item {
  margin-right: calc(var(--spacing) * 1);
  color: var(--color-gray-400);
}
.alert-detail__wrapper {
  margin-inline: auto;
}
.alert-detail__wrapper {
  margin-inline: auto;
}
.alert-detail__wrapper {
  margin-inline: auto;
}
@layer components {
  .station-analytics__status-cards {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .station-analytics__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .compare-selectors__item {
    margin-right: calc(var(--spacing) * 2);
  }
  .compare-selectors__side-view {
    display: none;
  }
}
@layer components {
  .station-analytics__item {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .cluster-map__legend-dot {
    background-color: var(--color-blue-500);
    background-color: var(--color-green-500);
    background-color: var(--color-red-500);
    background-color: var(--color-yellow-500);
  }
  .cluster-map__wrapper {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components;
@layer components {
  .dest-detail__hint {
    margin-bottom: calc(var(--spacing) * 4);
  }
}
@layer components {
  .dest-detail__item {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .dest-detail__item {
    margin-right: calc(var(--spacing) * 2);
  }
}
@layer components {
  .dest-detail__item {
    margin-right: calc(var(--spacing) * 1);
  }
  .dest-detail__wrapper {
    margin-inline: auto;
  }
}
@layer components {
  .dest-detail__item {
    margin-right: calc(var(--spacing) * 1);
  }
  .dest-detail__wrapper {
    margin-inline: auto;
  }
}
@layer components {
  .dest-detail__item {
    margin-right: calc(var(--spacing) * 1);
  }
  .dest-detail__item-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .dest-detail__item-2 {
    margin-right: calc(var(--spacing) * 1);
  }
  .dest-detail__item-3 {
    margin-right: calc(var(--spacing) * 1);
  }
}
.unified-dashboard__stat-value {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.unified-dashboard__section-title {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
@layer components {
  .tel-registros__tooltip {
    display: none;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-leading: initial;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-space-x-reverse: 0;
      --tw-content: "";
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}