/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/styles.css?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************/
/* ============================================================
   CURSAAS — Design Token System
   Gerado pelo ThemeService. NÃO edite manualmente os valores
   dentro de :root — eles são sobrescritos em runtime.
   Para ajustes de layout use as classes utilitárias abaixo.
   ============================================================ */

/* ── 1. Tokens base (light mode) ─────────────────────────────
   Sobrescritos pelo ThemeService via element.style.setProperty()
   ──────────────────────────────────────────────────────────── */
:root {
  /* Paleta principal */
  --primary:          #1a6b3c;
  --primary-color:    #1a6b3c; /* alias legado */
  --secondary:        #0f4b2a;
  --secondary-color:  #0f4b2a; /* alias legado */
  --background:       #f0fdf4;
  --background-color: #f0fdf4; /* alias legado */

  /* Paleta dark (src para o dark-mode swap) */
  --dark-primary-color:    #34d399;
  --dark-secondary-color:  #10b981;
  --dark-background-color: #0f172a;

  /* Tipografia */
  --font-family: Inter, system-ui, sans-serif;
  --font-size-xs:  0.75rem;   /*  12px */
  --font-size-sm:  0.875rem;  /*  14px */
  --font-size-md:  1rem;      /*  16px */
  --font-size-lg:  1.125rem;  /*  18px */
  --font-size-xl:  1.25rem;   /*  20px */
  --font-size-2xl: 1.5rem;    /*  24px */
  --font-size-3xl: 1.875rem;  /*  30px */

  /* Border radius global — sobrescrito pelo ThemeService */
  --radius:    8px;
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-lg: calc(var(--radius) * 1.5);
  --radius-xl: calc(var(--radius) * 2);
  --radius-full: 9999px;

  /* Espaçamento base — spacing="comfortable"
     Escala 4-pt: 4 8 12 16 24 32 48 64
     O ThemeService sobrescreve --space-unit para compacto/espaçado */
  --space-unit: 1rem;       /* 16px — comfortable */
  --space-1:  calc(var(--space-unit) * 0.25);   /*  4px */
  --space-2:  calc(var(--space-unit) * 0.5);    /*  8px */
  --space-3:  calc(var(--space-unit) * 0.75);   /* 12px */
  --space-4:  var(--space-unit);                /* 16px */
  --space-5:  calc(var(--space-unit) * 1.5);    /* 24px */
  --space-6:  calc(var(--space-unit) * 2);      /* 32px */
  --space-8:  calc(var(--space-unit) * 3);      /* 48px */
  --space-10: calc(var(--space-unit) * 4);      /* 64px */

  /* Sombras — shadow_level="soft" */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.05);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);

  /* Cores semânticas — derivadas da paleta principal */
  --color-text:         #1e293b;
  --color-text-muted:   #64748b;
  --color-text-inverse: #ffffff;
  --color-surface:      #ffffff;
  --color-surface-2:    #f8fafc;
  --color-border:       #e2e8f0;
  --color-border-focus: var(--primary);

  /* Estado */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger:  #dc2626;
  --color-info:    #0284c7;

  --color-success-bg: #f0fdf4;
  --color-warning-bg: #fffbeb;
  --color-danger-bg:  #fef2f2;
  --color-info-bg:    #f0f9ff;

  /* ── Motion system — Layer 0: primitivos ─────────────────────
     Controlados por body[data-anim] (intensidade) e
     body[data-transition] (curva de easing).
     Componentes referenciam apenas --motion-* — nunca durações
     ou easings literais diretos.
     ──────────────────────────────────────────────────────────── */

  /* Durações base — escalam com body[data-anim] */
  --motion-duration-fast:   150ms;  /* micro: hover bg, icon color   */
  --motion-duration-base:   250ms;  /* base: maioria das transições  */
  --motion-duration-slow:   400ms;  /* expansão, collapse, slide     */
  --motion-duration-enter:  350ms;  /* entrada de elemento na tela   */
  --motion-duration-exit:   180ms;  /* saída (mais rápida que entrada)*/

  /* Curva de easing — sobrescrita por body[data-transition] */
  --motion-easing:        ease;
  --motion-easing-enter:  ease-out;
  --motion-easing-exit:   ease-in;

  /* Transitions compostas: componentes usam estes tokens */
  --motion-transition-fast:   var(--motion-duration-fast)  var(--motion-easing);
  --motion-transition-base:   var(--motion-duration-base)  var(--motion-easing);
  --motion-transition-slow:   var(--motion-duration-slow)  var(--motion-easing);
  --motion-transition-enter:  var(--motion-duration-enter) var(--motion-easing-enter);
  --motion-transition-exit:   var(--motion-duration-exit)  var(--motion-easing-exit);

  /* Aliases de retrocompatibilidade — código existente continua funcional */
  --transition-fast:  var(--motion-transition-fast);
  --transition-base:  var(--motion-transition-base);
  --transition-slow:  var(--motion-transition-slow);

  /* Feedback hover */
  --motion-hover-lift:    2px;    /* translateY negativo no hover  */
  --motion-hover-scale:   1.02;   /* escala de hover (cards etc.)  */

  /* Feedback active/click */
  --motion-click-depth:   1px;    /* translateY positivo no :active */
  --motion-click-scale:   0.97;   /* escala ao pressionar          */

  /* Entrada de elemento */
  --motion-enter-y:       10px;   /* deslocamento vertical inicial */

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Densidade de UI — comfortable (padrão) ──────────────
     Sobrescritos por body[data-density] via ThemeService.
     Use .density-compact / .density-spacious para escopo local.
     ─────────────────────────────────────────────────────── */
  --density-input-h:     40px;   /* altura de inputs, selects e btns   */
  --density-btn-h-sm:    30px;   /* altura de .btn-sm                  */
  --density-btn-h-lg:    50px;   /* altura de .btn-lg                  */
  --density-font-body:   var(--font-size-md);
  --density-font-ui:     var(--font-size-sm);
  --density-section-gap: var(--space-6);   /* gap entre seções         */
  --density-item-gap:    var(--space-4);   /* gap entre itens de lista */

  /* ═══════════════════════════════════════════════════════════════════════════
     TOKENS SEMÂNTICOS DE INTERAÇÃO
     Escritos em runtime por ThemeService.applyPaletteToRoot().
     Os valores abaixo são fallbacks para antes do ThemeService carregar.
     ═════════════════════════════════════════════════════════════════════════ */
  --color-interactive:           var(--primary);
  --color-interactive-hover:     var(--primary);
  --color-interactive-active:    var(--secondary);
  --color-interactive-disabled:  color-mix(in srgb, var(--primary) 35%, white);
  --color-on-interactive:        #ffffff;
  --color-focus-ring:            var(--primary);
  --color-brand-tint:            var(--background);
  --color-nav-indicator:         rgba(255, 255, 255, 0.6);
  /* Variantes dark — escritas por applyPaletteToRoot, usadas em [data-theme="dark"] */
  --color-interactive-dark:         var(--dark-primary-color);
  --color-interactive-hover-dark:   var(--dark-primary-color);
  --color-interactive-active-dark:  var(--dark-secondary-color);
  --color-on-interactive-dark:      #000000;
  --color-nav-indicator-dark:       rgba(255, 255, 255, 0.7);

  /* ═══════════════════════════════════════════════════════════════════════════
     CAMADA 2 — TOKENS DE COMPONENTE
     Regra: CSS de componentes referencia APENAS estes tokens.
     Estes tokens referenciam Camada 1 (semânticos) — nunca hex direto.
     Sobrescrever um token aqui afeta apenas o componente — escopo seguro.
     ═════════════════════════════════════════════════════════════════════════ */

  /* ── Botão — estrutura ──────────────────────────────────────────────────── */
  --btn-radius:               var(--radius);
  --btn-font-size:            var(--density-font-ui);
  --btn-font-weight:          600;
  --btn-gap:                  var(--space-2);
  --btn-border-width:         1.5px;
  --btn-focus-ring-size:      3px;
  --btn-focus-ring-color:     var(--color-focus-ring);
  --btn-hover-lift:           var(--motion-hover-lift);

  /* ── Botão primary ──────────────────────────────────────────────────────── */
  --btn-primary-bg:            var(--color-interactive);
  --btn-primary-bg-hover:      var(--color-interactive-hover);
  --btn-primary-bg-active:     var(--color-interactive-active);
  --btn-primary-bg-disabled:   var(--color-interactive-disabled);
  --btn-primary-color:         var(--color-on-interactive);
  --btn-primary-shadow:        var(--shadow-sm);
  --btn-primary-shadow-hover:  var(--shadow-md);

  /* ── Botão secondary ────────────────────────────────────────────────────── */
  --btn-secondary-bg:          var(--secondary);
  --btn-secondary-bg-hover:    color-mix(in srgb, var(--secondary) 75%, #000000);
  --btn-secondary-bg-active:   color-mix(in srgb, var(--secondary) 65%, #000000);
  --btn-secondary-color:       var(--color-on-interactive);
  --btn-secondary-shadow:      var(--shadow-sm);

  /* ── Botão outline ──────────────────────────────────────────────────────── */
  --btn-outline-bg:            transparent;
  --btn-outline-bg-hover:      var(--color-interactive);
  --btn-outline-color:         var(--color-interactive);
  --btn-outline-color-hover:   var(--color-on-interactive);
  --btn-outline-border:        var(--color-interactive);

  /* ── Botão ghost ────────────────────────────────────────────────────────── */
  --btn-ghost-bg:              transparent;
  --btn-ghost-bg-hover:        var(--color-surface-2);
  --btn-ghost-color:           var(--color-text);
  --btn-ghost-border:          var(--color-border);

  /* ── Botão danger ───────────────────────────────────────────────────────── */
  --btn-danger-bg:             var(--color-danger);
  --btn-danger-bg-hover:       color-mix(in srgb, var(--color-danger) 80%, #000000);
  --btn-danger-color:          #ffffff;

  /* ── Input ──────────────────────────────────────────────────────────────── */
  --input-radius:              var(--radius);
  --input-border-width:        1.5px;
  --input-focus-ring-size:     3px;
  --input-bg:                  var(--color-surface);
  --input-bg-disabled:         var(--color-surface-2);
  --input-color:               var(--color-text);
  --input-color-placeholder:   var(--color-text-muted);
  --input-border:              var(--color-border);
  --input-border-hover:        var(--color-border-focus);
  --input-border-focus:        var(--color-interactive);
  --input-focus-ring-color:    color-mix(in srgb, var(--color-interactive) 20%, transparent);
  --input-border-error:        var(--color-danger);
  --input-error-ring-color:    color-mix(in srgb, var(--color-danger) 20%, transparent);
  --input-border-success:      var(--color-success);

  /* ── Card ───────────────────────────────────────────────────────────────── */
  --card-bg:                    var(--color-surface);
  --card-border:                var(--color-border);
  --card-radius:                var(--radius-lg);
  --card-padding:               var(--space-5);
  --card-shadow:                var(--shadow-sm);
  --card-shadow-hover:          var(--shadow);
  --card-hover-lift:            var(--motion-hover-lift);
  --card-elevated-shadow:       var(--shadow-md);
  --card-elevated-shadow-hover: var(--shadow-lg);
  --card-elevated-hover-lift:   calc(var(--motion-hover-lift) * 2);
}

/* ── 2. Dark mode swap ────────────────────────────────────────
   Ativado pelo ThemeService via document.documentElement
   setAttribute('data-theme', 'dark')
   ──────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --primary:          var(--dark-primary-color);
  --primary-color:    var(--dark-primary-color);
  --secondary:        var(--dark-secondary-color);
  --secondary-color:  var(--dark-secondary-color);
  --background:       var(--dark-background-color);
  --background-color: var(--dark-background-color);

  --color-text:         #e2e8f0;
  --color-text-muted:   #94a3b8;
  --color-text-inverse: #0f172a;
  --color-surface:      #1e293b;
  --color-surface-2:    #0f172a;
  --color-border:       #334155;
  --color-border-focus: var(--dark-primary-color);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
  --shadow:    0 4px 6px -1px rgba(0,0,0,.35), 0 2px 4px -1px rgba(0,0,0,.20);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.40), 0 4px 6px -2px rgba(0,0,0,.20);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.50), 0 10px 10px -5px rgba(0,0,0,.20);

  --color-success-bg: #052e16;
  --color-warning-bg: #451a03;
  --color-danger-bg:  #450a0a;
  --color-info-bg:    #082f49;

  color-scheme: dark;

  /* ── Reaponta interativos para variantes dark ──────────────────────────────
     applyPaletteToRoot() escreve --color-interactive-*-dark antes do dark
     mode ser ativado, então estas vars estão sempre definidas neste contexto.
     ─────────────────────────────────────────────────────────────────────── */
  --color-interactive:          var(--color-interactive-dark);
  --color-interactive-hover:    var(--color-interactive-hover-dark);
  --color-interactive-active:   var(--color-interactive-active-dark);
  --color-on-interactive:       var(--color-on-interactive-dark);
  --color-nav-indicator:        var(--color-nav-indicator-dark);
  /* Focus rings com opacidade ajustada para dark */
  --input-focus-ring-color:     color-mix(in srgb, var(--color-interactive) 25%, transparent);
  --btn-focus-ring-color:       var(--color-interactive);
}

/* ── 2b. Densidade de UI ─────────────────────────────────────────
   Ativado pelo ThemeService via body.setAttribute('data-density', ...)
   Compact   → inputs menores, fonte menor, espaçamento reduzido
   Spacious  → inputs maiores, fonte maior, espaçamento ampliado
   ─────────────────────────────────────────────────────────────── */

body[data-density="compact"] {
  --density-input-h:     32px;
  --density-btn-h-sm:    24px;
  --density-btn-h-lg:    40px;
  --density-font-body:   var(--font-size-sm);
  --density-font-ui:     var(--font-size-xs);
  --density-section-gap: var(--space-5);
  --density-item-gap:    var(--space-3);
}

body[data-density="spacious"] {
  --density-input-h:     50px;
  --density-btn-h-sm:    38px;
  --density-btn-h-lg:    62px;
  --density-font-body:   var(--font-size-lg);
  --density-font-ui:     var(--font-size-md);
  --density-section-gap: var(--space-8);
  --density-item-gap:    var(--space-5);
}

/* Escopo local — aplica densidade em um contêiner sem mudar o global.
   Exemplo: <div class="density-compact"> → inputs menores neste bloco */
.density-compact {
  --space-unit:          0.75rem;
  --density-input-h:     32px;
  --density-btn-h-sm:    24px;
  --density-btn-h-lg:    40px;
  --density-font-body:   var(--font-size-sm);
  --density-font-ui:     var(--font-size-xs);
  --density-section-gap: var(--space-5);
  --density-item-gap:    var(--space-3);
}

.density-spacious {
  --space-unit:          1.25rem;
  --density-input-h:     50px;
  --density-btn-h-sm:    38px;
  --density-btn-h-lg:    62px;
  --density-font-body:   var(--font-size-lg);
  --density-font-ui:     var(--font-size-md);
  --density-section-gap: var(--space-8);
  --density-item-gap:    var(--space-5);
}

/* ── 2c. Motion — intensidade body[data-anim] ────────────────
   none        → zero durations; sem efeitos visuais
   reduced     → metade da duração; lift/scale mínimos (acessibilidade)
   normal      → padrão definido em :root (sem override)
   expressive  → durations amplificadas; lift/scale pronunciados
   ─────────────────────────────────────────────────────────── */
body[data-anim="none"] {
  --motion-duration-fast:   0ms;
  --motion-duration-base:   0ms;
  --motion-duration-slow:   0ms;
  --motion-duration-enter:  0ms;
  --motion-duration-exit:   0ms;
  --motion-hover-lift:      0px;
  --motion-hover-scale:     1;
  --motion-click-depth:     0px;
  --motion-click-scale:     1;
  --motion-enter-y:         0px;
}

body[data-anim="reduced"] {
  --motion-duration-fast:   80ms;
  --motion-duration-base:   130ms;
  --motion-duration-slow:   200ms;
  --motion-duration-enter:  180ms;
  --motion-duration-exit:   100ms;
  --motion-hover-lift:      1px;
  --motion-hover-scale:     1.01;
  --motion-click-depth:     0px;
  --motion-click-scale:     0.99;
  --motion-enter-y:         5px;
}

body[data-anim="expressive"] {
  --motion-duration-fast:   200ms;
  --motion-duration-base:   360ms;
  --motion-duration-slow:   560ms;
  --motion-duration-enter:  500ms;
  --motion-duration-exit:   280ms;
  --motion-hover-lift:      4px;
  --motion-hover-scale:     1.04;
  --motion-click-depth:     2px;
  --motion-click-scale:     0.94;
  --motion-enter-y:         20px;
}

/* ── 2d. Motion — tipo de transição body[data-transition] ────
   Aplicado APÓS data-anim na cascata — sobrescreve a curva.
   instant → snap (durations → 0ms; curva sem efeito)
   fade    → ease suave (padrão — sem override)
   slide   → ease-out físico (entrada planar)
   spring  → cubic-bezier com overshoot (orgânico)
   ─────────────────────────────────────────────────────────── */
body[data-transition="instant"] {
  --motion-duration-fast:   0ms;
  --motion-duration-base:   0ms;
  --motion-duration-slow:   0ms;
  --motion-duration-enter:  0ms;
  --motion-duration-exit:   0ms;
}

body[data-transition="slide"] {
  --motion-easing:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-easing-enter:  cubic-bezier(0.0,  0.0,  0.2,  1.0);
  --motion-easing-exit:   cubic-bezier(0.4,  0.0,  1.0,  1.0);
}

body[data-transition="spring"] {
  --motion-easing:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-easing-enter:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-easing-exit:   cubic-bezier(0.55, 0.0,  0.45, 1.0);
}

/* ── 3. Reset & base ──────────────────────────────────────────  */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-family), 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: var(--density-font-body);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--background);
  transition: background-color var(--transition-base), color var(--transition-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

app-root {
  display: block;
  min-height: 100%;
}

/* ── 4. Classes utilitárias — Botões ─────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--density-input-h);
  padding: var(--space-2) var(--space-5);
  font-family: inherit;
  font-size: var(--density-font-ui);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    color            var(--transition-fast),
    box-shadow       var(--transition-fast),
    transform        var(--transition-fast);
  text-decoration: none;
  -webkit-user-select: none;
          user-select: none;
}
.btn:focus-visible {
  outline: var(--btn-focus-ring-size) solid var(--btn-focus-ring-color);
  outline-offset: 2px;
}
.btn:active:not(:disabled) { transform: translateY(var(--motion-click-depth)); }
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variantes de cor */
.btn-primary {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-primary-shadow-hover);
  transform: translateY(calc(-1 * var(--btn-hover-lift)));
}
.btn-primary:active:not(:disabled) {
  background-color: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  box-shadow: var(--btn-secondary-shadow);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-bg-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(-1 * var(--btn-hover-lift)));
}

.btn-outline {
  background-color: var(--btn-outline-bg);
  border-color: var(--btn-outline-border);
  color: var(--btn-outline-color);
}
.btn-outline:hover:not(:disabled) {
  background-color: var(--btn-outline-bg-hover);
  border-color: var(--btn-outline-bg-hover);
  color: var(--btn-outline-color-hover);
}

.btn-ghost {
  background-color: var(--btn-ghost-bg);
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-color);
}
.btn-ghost:hover:not(:disabled) {
  background-color: var(--btn-ghost-bg-hover);
}

.btn-danger {
  background-color: var(--btn-danger-bg);
  border-color: var(--btn-danger-bg);
  color: var(--btn-danger-color);
}
.btn-danger:hover:not(:disabled) {
  background-color: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-bg-hover);
}

/* Tamanhos */
.btn-sm {
  min-height: var(--density-btn-h-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}
.btn-lg {
  min-height: var(--density-btn-h-lg);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}

/* button_style: pill */
.btn-pill, [data-button-style="pill"] .btn {
  border-radius: var(--radius-full);
}

/* button_style: square */
.btn-square, [data-button-style="square"] .btn {
  border-radius: 2px;
}

/* Gradiente (gradient_enabled) */
[data-gradient="true"] .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  border-color: transparent;
}
[data-gradient="true"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--btn-primary-bg-hover) 0%, var(--btn-primary-bg-active) 100%);
  filter: none;
}

/* ── 5. Classes utilitárias — Inputs ─────────────────────────── */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: var(--density-input-h);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--density-font-ui);
  color: var(--input-color);
  background-color: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--input-radius);
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

/* textarea cresce para ao menos 2.5× a altura de um input */
.form-textarea {
  min-height: calc(var(--density-input-h) * 2.5);
  resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 var(--input-focus-ring-size) var(--input-focus-ring-color);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--input-color-placeholder);
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: var(--input-bg-disabled);
  opacity: 0.7;
  cursor: not-allowed;
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.form-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

/* Input inválido */
.form-input.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-danger);
}
.form-input.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 var(--input-focus-ring-size) var(--input-error-ring-color);
}

/* ── 6. Classes utilitárias — Cards ──────────────────────────── */

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition:
    box-shadow   var(--transition-base),
    border-color var(--transition-base),
    transform    var(--transition-base);
  animation: card-enter var(--motion-transition-enter) both;
}
.card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(calc(-1 * var(--card-hover-lift))); }

.card-flat {
  box-shadow: none;
  border-color: var(--color-border);
}

.card-elevated {
  box-shadow: var(--card-elevated-shadow);
  border-color: transparent;
}
.card-elevated:hover { box-shadow: var(--card-elevated-shadow-hover); transform: translateY(calc(-1 * var(--card-elevated-hover-lift))); }

.card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* shadow_level modifiers (aplicadas via ThemeService no <body>) */
[data-shadow="none"] .card,
[data-shadow="none"] .btn-primary,
[data-shadow="none"] .btn-secondary { box-shadow: none !important; }

[data-shadow="none"] .card:hover   { box-shadow: none !important; }

[data-shadow="strong"] .card       { box-shadow: var(--shadow-md); }
[data-shadow="strong"] .card:hover { box-shadow: var(--shadow-lg); }

/* ── 7. Badges e chips ───────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  line-height: 1.4;
}

.badge-primary  { background-color: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.badge-success  { background-color: var(--color-success-bg); color: var(--color-success); }
.badge-warning  { background-color: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger   { background-color: var(--color-danger-bg);  color: var(--color-danger);  }
.badge-info     { background-color: var(--color-info-bg);    color: var(--color-info);    }
.badge-neutral  { background-color: var(--color-surface-2);  color: var(--color-text-muted); }

/* ── 8. Tabelas ──────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  background-color: var(--color-surface);
}

.table thead {
  background-color: var(--color-surface-2);
}

.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
}

.table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr:hover { background-color: color-mix(in srgb, var(--primary) 5%, transparent); }

/* ── 9. Mensagens de estado ──────────────────────────────────── */

.msg {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: 1px solid transparent;
}

.msg-success { background-color: var(--color-success-bg); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.msg-warning { background-color: var(--color-warning-bg); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.msg-error   { background-color: var(--color-danger-bg);  color: var(--color-danger);  border-color: color-mix(in srgb, var(--color-danger)  30%, transparent); }
.msg-info    { background-color: var(--color-info-bg);    color: var(--color-info);    border-color: color-mix(in srgb, var(--color-info)    30%, transparent); }

/* ── 10. Utilities ───────────────────────────────────────────── */

.text-primary   { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-inverse   { color: var(--color-text-inverse); }
.text-success   { color: var(--color-success); }
.text-danger    { color: var(--color-danger); }

.bg-primary   { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-surface   { background-color: var(--color-surface); }
.bg-surface-2 { background-color: var(--color-surface-2); }

.rounded    { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

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

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

/* Spinner genérico */
.spinner {
  width: 1em;
  height: 1em;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes ripple-expand {
  to { transform: scale(1); opacity: 0; }
}

@keyframes enter-up {
  from { opacity: 0; transform: translateY(var(--motion-enter-y)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(var(--motion-enter-y)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 11. Spacing utilities ───────────────────────────────────────
   Todas as classes escalm automaticamente com --space-unit,
   portanto respondem à densidade definida pelo ThemeService.
   ─────────────────────────────────────────────────────────────── */

/* Padding */
.p-0  { padding: 0; }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.px-0 { padding-inline: 0; }
.px-1 { padding-inline: var(--space-1); }
.px-2 { padding-inline: var(--space-2); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-5 { padding-inline: var(--space-5); }
.px-6 { padding-inline: var(--space-6); }

.py-0 { padding-block: 0; }
.py-1 { padding-block: var(--space-1); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-5 { padding-block: var(--space-5); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }

/* Margin */
.m-0    { margin: 0; }
.m-1    { margin: var(--space-1); }
.m-2    { margin: var(--space-2); }
.m-3    { margin: var(--space-3); }
.m-4    { margin: var(--space-4); }
.m-auto { margin: auto; }

.mx-auto { margin-inline: auto; }
.mx-1    { margin-inline: var(--space-1); }
.mx-2    { margin-inline: var(--space-2); }
.mx-3    { margin-inline: var(--space-3); }
.mx-4    { margin-inline: var(--space-4); }

.my-0    { margin-block: 0; }
.my-1    { margin-block: var(--space-1); }
.my-2    { margin-block: var(--space-2); }
.my-3    { margin-block: var(--space-3); }
.my-4    { margin-block: var(--space-4); }
.my-5    { margin-block: var(--space-5); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Gap */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Gaps semânticos — escalam com a densidade */
.section-gap { gap: var(--density-section-gap); }
.item-gap    { gap: var(--density-item-gap); }

/* ── 12. Motion utilities ───────────────────────────────────
   Classes utilitárias que consomem os tokens de motion.
   Aplique em elementos que precisam de animação de entrada.
   ─────────────────────────────────────────────────────────── */

/* Animação de entrada: fade + slide up */
.motion-enter {
  animation: enter-up var(--motion-transition-enter) both;
}

/* Atraso escalonado para listas — aplique via [style="--i:N"] */
.motion-enter-stagger {
  animation: enter-up var(--motion-transition-enter) calc(var(--i, 0) * 40ms) both;
}

/* Feedback hover personalizado para wrappers não-btn/card */
.interactive {
  transition:
    transform  var(--motion-transition-fast),
    box-shadow var(--motion-transition-fast),
    opacity    var(--motion-transition-fast);
  cursor: pointer;
}
.interactive:hover  { transform: translateY(calc(-1 * var(--motion-hover-lift))); }
.interactive:active { transform: translateY(var(--motion-click-depth)); }

/* ── 13. Acessibilidade — motion reduzido ────────────────────
   Respeita a preferência do sistema operacional.
   Tem prioridade máxima — sobrescreve body[data-anim].
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/*# sourceMappingURL=styles.css.map*/