:root {
  /* Identidade (white-label): base.html e App.jsx sobrescrevem --cor-primaria,
     --cor-destaque, --marca-texto e (opcional) --cor-fundo a partir de
     APP_COLOR / APP_BG. Ver docs/modernizacao-ux/TOKENS.md. */
  --cor-fundo: #DBD2D2;
  --cor-primaria: #00613B;
  --cor-destaque: #038351;
  --cor-texto: #1C1C1C;
  /* Texto secundário (S14/B-13): o texto escurecido na direção do fundo; >= 4,5:1 sobre branco e sobre o fundo padrão. */
  --texto-suave: color-mix(in srgb, var(--cor-texto) 78%, var(--cor-fundo));
  --cor-card: #F0F4F2;
  --cor-borda: #C8D4CE;
  --fonte-base: 'Inter', sans-serif;

  /* Paleta derivada da marca (S03.1). Fallback: o verde padrão, para
     navegadores sem color-mix() (bloco @supports not, abaixo). */
  --marca: var(--cor-primaria);
  --marca-texto: #FFFFFF; /* texto sobre a marca (S03.2); injetado pelo servidor */
  --marca-suave: color-mix(in srgb, var(--marca) 10%, white);
  --marca-tenue: color-mix(in srgb, var(--marca) 5%, white);
  --marca-borda: color-mix(in srgb, var(--marca) 30%, white);
  --marca-hover: color-mix(in srgb, var(--marca) 85%, black);
  --cor-suave: var(--marca-suave); /* alias legado */
  /* Texto NA cor da marca, sobre fundo claro (S04/E1): a própria marca se o contraste
     com branco for >= 4,5:1; senão uma versão escurecida. Injetado pelo servidor
     (app/utils/cores.py) e pelo campo (marca.js); sem isso, a marca. */
  --marca-texto-em-claro: var(--cor-primaria);

  /* Motion padronizado (S18.2). Duração e curva de TODA transição/animação nova usam estes tokens
     (documentados em docs/modernizacao-ux/TOKENS.md); prefers-reduced-motion desliga tudo (regra
     global mais abaixo). Entrar = ease-out; sair = ease-in. */
  --motion-rapida: 120ms;   /* hover, pressionado, colapso, setas, troca de página */
  --motion-padrao: 200ms;   /* folhas, menus, toasts, painéis */
  --easing-padrao: cubic-bezier(.2, 0, 0, 1);
  --easing-entrada: cubic-bezier(0, 0, .2, 1);
  --easing-saida: cubic-bezier(.4, 0, 1, 1);
  /* Camada escura sobre o controle pressionado (S18.4). */
  --pressionado: rgba(0, 0, 0, .08);
}

@supports not (color: color-mix(in srgb, red 10%, white)) {
  :root {
    --marca-suave: #E6EFEB;
    --marca-tenue: #F2F7F5;
    --marca-borda: #B3D0C4;
    --marca-hover: #00532F;
    --cor-suave: #98D0331A;
  }
}

body {
  font-family: var(--fonte-base);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

/* Cores de fundo */
.bg-fundo     { background-color: var(--cor-fundo); }
.bg-primario  { background-color: var(--cor-primaria); }
.bg-destaque  { background-color: var(--cor-destaque); }
.bg-card      { background-color: var(--cor-card); }

/* Texto */
.text-texto     { color: var(--cor-texto); }
.text-destaque  { color: var(--marca-texto-em-claro); }
.text-primario  { color: var(--marca-texto-em-claro); }
/* Texto sobre a cor da marca (S03.2): branco ou escuro conforme a luminância de APP_COLOR. */
.text-sobre-marca { color: var(--marca-texto); }
.text-sobre-marca\/80 { color: color-mix(in srgb, var(--marca-texto) 80%, transparent); }
.text-sobre-marca\/60 { color: color-mix(in srgb, var(--marca-texto) 60%, transparent); }
.hover\:text-sobre-marca:hover { color: var(--marca-texto); }
.text-muted     { color: var(--texto-suave); }

/* Bordas */
.border-borda   { border-color: var(--cor-borda); }

/* Card */
.card {
  background-color: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Botões */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn-destaque {
  background-color: var(--cor-destaque);
  color: var(--marca-texto);
}

.btn-destaque:hover {
  opacity: 0.9;
}

.btn-primario {
  background-color: var(--cor-primaria);
  color: var(--marca-texto);
}

.btn-primario:hover {
  opacity: 0.9;
}

.btn-white {
  background-color: white;
  color: var(--marca-texto-em-claro);
  border: 1px solid var(--cor-primaria);
}

.btn-white:hover {
  background-color: #f0f0f0;
}

/* Títulos */
.titulo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--marca-texto-em-claro);
}

/* ===== NOVA NAVEGAÇÃO MOBILE-FIRST ===== */

/* Menu Inferior Principal */
.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--cor-primaria);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--motion-padrao) var(--easing-padrao), background-color var(--motion-padrao) var(--easing-padrao);
}

/* Estado quando submenu está ativo */
.nav-bottom.submenu-active {
  background: var(--cor-destaque);
}

/* Itens ativos */
.nav-item.active {
  color: white !important;
  color: var(--marca-texto) !important;
  background: rgba(255, 255, 255, 0.2);
}

/* Feedback visual quando submenu está aberto */
.nav-bottom.submenu-active .nav-item.active {
  background: rgba(255, 255, 255, 0.3);
}

.nav-bottom-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.5rem 0;
  min-height: 60px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  min-width: 60px;
  min-height: 44px; /* Área de toque mínima */
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  color: color-mix(in srgb, var(--marca-texto) 80%, transparent);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--motion-padrao) var(--easing-padrao);
  border-radius: 0.5rem;
}

.nav-item:hover,
.nav-item:active {
  color: white;
  color: var(--marca-texto);
  background: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
  color: white;
  color: var(--marca-texto);
  background: rgba(255, 255, 255, 0.15);
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 0.25rem;
}

.nav-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
}

/* Overlay e Container de Submenu */
.submenu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.submenu-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 1rem 1rem 0 0;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  animation: slideUp var(--motion-padrao) var(--easing-entrada);
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Header do Submenu */
.submenu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-card);
  position: sticky;
  top: 0;
  z-index: 10;
}

.submenu-back,
.submenu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--cor-texto);
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background var(--motion-rapida) var(--easing-padrao);
}

.submenu-back:hover,
.submenu-close:hover {
  background: var(--cor-borda);
}

.submenu-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--marca-texto-em-claro);
  margin: 0;
}

/* Itens do Submenu */
.submenu-items {
  padding: 0.5rem;
}

.submenu-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 0.75rem;
  text-decoration: none;
  color: var(--cor-texto);
  transition: all var(--motion-padrao) var(--easing-padrao);
  cursor: pointer;
}

.submenu-item:hover {
  background: var(--cor-card);
  border-color: var(--cor-destaque);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.submenu-item-danger {
  border-color: #ef4444;
  color: #ef4444;
}

.submenu-item-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

.submenu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--cor-suave);
  border-radius: 0.75rem;
  margin-right: 1rem;
  color: var(--marca-texto-em-claro);
  flex-shrink: 0;
}

.submenu-item-content {
  flex: 1;
  min-width: 0;
}

.submenu-item-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--cor-texto);
}

.submenu-item-description {
  font-size: 0.875rem;
  color: var(--cor-texto);
  opacity: 0.7;
  margin: 0;
  line-height: 1.4;
}

/* Conteúdo Principal */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  padding-bottom: 5rem; /* Espaço para o menu inferior */
  min-height: calc(100vh - 120px); /* Altura mínima considerando header + menu */
}

/* Ajuste do conteúdo principal para não ficar atrás do menu */
body {
  padding-bottom: 0; /* Removido, agora o main-content cuida disso */
}

/* Responsividade */
@media (min-width: 768px) {
  .submenu-container {
    max-width: 400px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1rem;
    margin: 2rem auto;
    max-height: 80vh;
  }
  
  .submenu-container {
    animation: fadeInScale var(--motion-padrao) var(--easing-entrada);
  }
  
  @keyframes fadeInScale {
    from {
      opacity: 0;
      transform: translateX(-50%) scale(0.9);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }
  }
}

/* Animações de transição */

/* Opacity transitions */

/* ===== CARDS DE MÓDULO ===== */

.module-card {
  display: flex;
  align-items: center;
  padding: 1.25rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 1rem;
  cursor: pointer;
  transition: all var(--motion-padrao) var(--easing-padrao);
  text-decoration: none;
  color: var(--cor-texto);
  position: relative;
  overflow: hidden;
}

.module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--cor-destaque);
}

.module-card:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.module-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--cor-suave);
  border-radius: 1rem;
  margin-right: 1rem;
  color: var(--marca-texto-em-claro);
  flex-shrink: 0;
  font-size: 1.5rem;
}

.module-card-content {
  flex: 1;
  min-width: 0;
}

.module-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--marca-texto-em-claro);
  line-height: 1.3;
}

.module-card-description {
  font-size: 0.875rem;
  color: var(--cor-texto);
  opacity: 0.7;
  margin: 0;
  line-height: 1.4;
}

.module-card-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--cor-destaque);
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
}

.module-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--cor-card);
  border-radius: 0.5rem;
  color: var(--cor-texto);
  opacity: 0.5;
  margin-left: 0.75rem;
  flex-shrink: 0;
  transition: all var(--motion-padrao) var(--easing-padrao);
}

.module-card:hover .module-card-action {
  opacity: 1;
  background: var(--cor-destaque);
  color: white;
}

/* Variações de Cards */
.module-card.highlight {
  background: linear-gradient(135deg, var(--cor-destaque), var(--cor-primaria));
  color: white;
  border-color: var(--cor-primaria);
}

.module-card.highlight .module-card-title {
  color: white;
}

.module-card.highlight .module-card-description {
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
}

.module-card.highlight .module-card-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.module-card.danger {
  border-color: #ef4444;
  color: #ef4444;
}

.module-card.danger .module-card-icon {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.module-card.danger:hover {
  border-color: #dc2626;
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.15);
}

/* Grid de Cards */
.module-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .module-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Grid com coluna destacada */
.module-grid-featured {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .module-grid-featured {
    grid-template-columns: 2fr 1fr;
  }
}

@media (min-width: 1024px) {
  .module-grid-featured {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* ===== TABELA GERENCIAL (ordenável + seleção múltipla + ações em massa) ===== */

.bulk-table-wrap {
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 1rem;
  overflow: hidden;
}

.bulk-table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.bulk-table thead {
  background: var(--cor-suave);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--cor-texto) 78%, var(--cor-fundo)); /* S14: sem opacity (o axe a compunha com o fundo) */
}

.bulk-table th, .bulk-table td {
  padding: 0.875rem 1rem;
  text-align: left;
  vertical-align: middle;
}

.bulk-table tbody tr {
  border-top: 1px solid var(--cor-borda);
}

.bulk-table tbody tr:hover {
  background: var(--cor-suave);
}

.bulk-table tbody tr.bulk-row-selected {
  background: rgba(var(--cor-destaque-rgb, 37, 99, 235), 0.08);
}

.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sortable-th::after {
  content: '↕';
  margin-left: 0.35rem;
  opacity: 0.35;
  font-size: 0.75rem;
}

.sortable-th[data-sort-dir="asc"]::after {
  content: '↑';
  opacity: 1;
  color: var(--marca-texto-em-claro);
}

.sortable-th[data-sort-dir="desc"]::after {
  content: '↓';
  opacity: 1;
  color: var(--marca-texto-em-claro);
}

.bulk-toolbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--cor-primaria);
  color: white;
  border-radius: 1rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ===== FORMULÁRIOS ===== */

.form-container {
  max-width: 800px;
  margin: 0 auto;
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cor-borda);
  margin-top: 2rem;
}

.form-row {
  display: grid;
  gap: 1rem;
}

.form-row-2 { grid-template-columns: repeat(2, 1fr); }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
.form-row-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .form-row-2,
  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr;
  }
  
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-actions .btn {
    width: 100%;
  }
}

/* Estilos para campos de formulário */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all var(--motion-padrao) var(--easing-padrao);
  background: white;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(0, 97, 59, 0.1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 10%, transparent);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--cor-fundo);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Labels */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cor-texto);
  margin-bottom: 0.5rem;
}

.form-label.required::after {
  content: " *";
  color: #ef4444;
}

.form-help {
  font-size: 0.75rem;
  color: var(--cor-texto);
  opacity: 0.7;
  margin-top: 0.25rem;
}

/* Erros de validação */
.form-error {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-error::before {
  content: "⚠";
}

/* ===== ALERTAS ===== */

.alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  border: 1px solid;
}

.alert-success {
  background: #f0fdf4;
  color: #166534;
  border-color: #86efac;
}

.alert-error {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fca5a5;
}

.alert-warning {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}

.alert-info {
  background: #f0f9ff;
  color: #075985;
  border-color: #93c5fd;
}

/* ===== MODAIS ===== */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-content {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cor-texto);
}

.modal-body {
  color: var(--cor-texto);
  line-height: 1.6;
}

.modal-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-borda);
}

/* Estados de carregamento */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--cor-borda);
  border-top: 2px solid var(--cor-primaria);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== STATUS CARDS ===== */

.status-card {
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 0.75rem;
  padding: 1rem;
  transition: all var(--motion-padrao) var(--easing-padrao);
}

.status-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===== FORM HELP TEXT ===== */

.form-help-text {
  font-size: 0.75rem;
  color: var(--cor-texto);
  opacity: 0.7;
  margin-top: 0.25rem;
}

/* ===== FORM GROUP ===== */

.form-group {
  margin-bottom: 1rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

/* ===== UX FOUNDATION ===== */
:root {
  --ux-surface: #ffffff;
  --ux-surface-muted: #f8fafc;
  --ux-border: #e2e8f0;
  --ux-text: #0f172a;
  --ux-muted: #64748b;
  --ux-success: #15803d;
  --ux-warning: #a16207;
  --ux-danger: #b91c1c;
  --ux-info: #1d4ed8;
  --ux-radius: 1rem;

  /* Tipografia (S03.4). --fs-xs é o mínimo para texto informativo. */
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;

  /* Espaçamento: 4/8/12/16/24/32 */
  --espaco-1: .25rem;
  --espaco-2: .5rem;
  --espaco-3: .75rem;
  --espaco-4: 1rem;
  --espaco-6: 1.5rem;
  --espaco-8: 2rem;

  /* Raio */
  --raio-sm: .5rem;
  --raio-md: .75rem;
  --raio-lg: 1rem;

  /* Sombra: 2 níveis */
  --sombra-1: 0 1px 2px rgba(15, 23, 42, .06);
  --sombra-2: 0 4px 12px rgba(15, 23, 42, .12);
  --ux-focus: rgba(0, 97, 59, 0.24);
  --ux-focus: color-mix(in srgb, var(--cor-primaria) 24%, transparent);
}
[x-cloak] { display: none !important; }

/* Ícones Lucide: o <i data-lucide> vira <svg> (24x24, display:block pelo preflight do Tailwind) só depois do
   DOMContentLoaded. Reservar a mesma caixa desde o HTML evita empurrar o layout (CLS). :where() mantém
   especificidade 0: w-/h-/hidden do Tailwind e as regras do módulo (.dg-btn i...) continuam vencendo. */
:where(i[data-lucide]) { display: block; width: 24px; height: 24px; }

.ux-card { background: var(--ux-surface); border: 1px solid var(--ux-border); border-radius: var(--ux-radius); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ux-label { display: block; margin-bottom: .4rem; color: #334155; font-size: .75rem; line-height: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ux-input { width: 100%; min-height: 44px; border: 1px solid #cbd5e1; border-radius: .75rem; padding: .65rem .8rem; background: white; color: var(--ux-text); }
.ux-input:focus { outline: 3px solid var(--ux-focus); border-color: var(--cor-primaria); }
.ux-input[aria-invalid="true"] { border-color: var(--ux-danger); }
.ux-field-error { min-height: 1.25rem; margin-top: .25rem; color: var(--ux-danger); font-size: .8125rem; }
.ux-touch { min-width: 44px; min-height: 44px; }
.ux-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ux-filter-chip { display: inline-flex; align-items: center; min-height: 32px; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; background: #ecfdf5; color: #166534; font-size: .75rem; font-weight: 700; }
.ux-mobile-list { display: none; }

@media (max-width: 767px) {
  .ux-desktop-table { display: none !important; }
  .ux-mobile-list { display: grid; gap: .75rem; }
  .ux-mobile-card { background: white; border: 1px solid var(--ux-border); border-radius: 1rem; padding: 1rem; }
  .overflow-x-auto:has(> table) { overflow: visible !important; padding: .75rem; }
  .overflow-x-auto > table, .overflow-x-auto > table > tbody { display: block; width: 100%; }
  .overflow-x-auto > table > thead { display: none; }
  .overflow-x-auto > table > tbody > tr { display: block; width: 100%; margin-bottom: .75rem; padding: .85rem; border: 1px solid var(--ux-border); border-radius: 1rem; background: white; }
  .overflow-x-auto > table > tbody > tr > td { display: block; width: 100%; padding: .35rem !important; text-align: left !important; white-space: normal !important; }
  .overflow-x-auto > table > tbody > tr > td:last-child > div { justify-content: flex-start !important; margin-top: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== FOCUS RING ===== */

.focus\:ring-primario:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 97, 59, 0.1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 10%, transparent);
}

.focus\:ring-destaque:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(3, 131, 81, 0.1);
}

/* ===== RING ===== */

.ring-primario\/50 {
  --tw-ring-color: rgba(0, 97, 59, 0.5);
  --tw-ring-color: color-mix(in srgb, var(--cor-primaria) 50%, transparent);
}

/* ===== BACKGROUND OPACITY ===== */

.bg-primario\/10 { background-color: rgba(0, 97, 59, 0.1); background-color: color-mix(in srgb, var(--cor-primaria) 10%, transparent); }

/* ===== BORDER OPACITY ===== */

.border-primario\/30 { border-color: rgba(0, 97, 59, 0.3); border-color: color-mix(in srgb, var(--cor-primaria) 30%, transparent); }

/* ===== DISABLED STATES ===== */

.disabled\:bg-primario\/50:disabled { background-color: rgba(0, 97, 59, 0.5); background-color: color-mix(in srgb, var(--cor-primaria) 50%, transparent); }
.disabled\:bg-destaque\/50:disabled { background-color: rgba(3, 131, 81, 0.5); background-color: color-mix(in srgb, var(--cor-destaque) 50%, transparent); }

/* ===== HOVER STATES ===== */

.hover\:bg-primario\/90:hover { background-color: rgba(0, 97, 59, 0.9); background-color: color-mix(in srgb, var(--cor-primaria) 90%, transparent); }
.hover\:bg-destaque\/90:hover { background-color: rgba(3, 131, 81, 0.9); background-color: color-mix(in srgb, var(--cor-destaque) 90%, transparent); }

/* ===== ARIA ===== */

.aria-disabled\:true[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ux-field-error {
  margin-top: 0.375rem;
  color: #b91c1c;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Responsive para formulários */
@media (max-width: 640px) {
  .form-container {
    padding: 0 0.5rem;
  }
  
  .modal-content {
    margin: 1rem;
    padding: 1rem;
  }
  
  .modal-footer {
    flex-direction: column-reverse;
  }
  
  .modal-footer .btn {
    width: 100%;
  }
}

/* ===== CONTINUIDADE (S18) ===== */

/* Entrada de dropdowns/menus (sino, usuário): aparece em --motion-rapida. */
@keyframes motion-entrar {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.motion-entrar { animation: motion-entrar var(--motion-rapida) var(--easing-entrada); }
.submenu-overlay { animation: motion-fade var(--motion-padrao) var(--easing-entrada); }

/* Feedback de clique (S18.4): controle pressionado muda em até um quadro, sem esperar a rede.
   :where() mantém especificidade zero para as classes de cada tela poderem decidir; links só entram se
   forem de navegação (nav/aside/header) ou tiverem cara de botão/cartão (classe rounded*). */
:where(button, summary, [role="button"], input[type="submit"], input[type="button"], nav a[href], aside a[href],
       header a[href], a[href][class*="rounded"], .nav-item, .module-card):active:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: inset 0 0 0 999px var(--pressionado);
}
@media (prefers-reduced-motion: no-preference) {
  :where(button, [role="button"], input[type="submit"], .nav-item, .module-card, a[href][class*="rounded"]):active:not(:disabled):not([aria-disabled="true"]):not([class*="active:scale"]) {
    scale: .98;
  }
}

/* Esqueleto (S18.3): bloco cinza que reserva o espaço do conteúdo que ainda está chegando. */
.esqueleto {
  border-radius: .5rem;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%) 0 0 / 200% 100%;
  animation: esqueleto-brilho 1.4s linear infinite;
}
@keyframes esqueleto-brilho {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Indicador de navegação em andamento (S18.4): barra fina no topo, criada por base.html após ~150 ms de espera. */
#nav-progresso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  pointer-events: none; transform-origin: left center; transform: scaleX(0); opacity: 0;
  background: var(--marca-texto); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor-primaria) 40%, transparent);
  transition: opacity var(--motion-rapida) var(--easing-padrao);
}
#nav-progresso.ativo { opacity: 1; animation: nav-progresso 10s cubic-bezier(.1, .6, .3, 1) forwards; }
@keyframes nav-progresso { from { transform: scaleX(.04); } to { transform: scaleX(.9); } }

@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
  .motion-entrar, .submenu-overlay { animation: none; }
  #nav-progresso.ativo { animation: none; transform: scaleX(.9); }
}