/* Componentes "ui" (components/ui/ui.py), trechos do ui.css do pseudo658.
   Tema escuro: classe .dark no <html>. */

/* ---------- base tipográfica (todas as telas) ----------
   Uma escala só: página 22/600 · seção 16/600 · texto 14/400 · apoio 13/400 ·
   rótulo 13/500 · campo 13/400 · tabela 12/600 (cabeçalho) e 14/400. Família: Inter. */
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
#main { font-size: .875rem; line-height: 1.5; color: #111827; -webkit-font-smoothing: antialiased; }
.dark #main { color: #e5e7eb; }
#main input, #main select, #main textarea, #main button { font-family: inherit; }

/* Texto dentro dos campos: 13px, o mesmo dos rótulos, em todas as telas.
   #main + !important para valer sobre o reset do Tailwind (16px) e os CSS
   antigos do Choices.js que fixavam 14px com !important. */
#main .ui-input,
#main .ui-field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea),
#main .ui-card :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea),
#main .choices__inner,
#main .choices__input,
#main .choices__list--single .choices__item,
#main .choices__list--dropdown .choices__item {
  font-size: .8125rem !important;
  line-height: 1.25rem;
}
#main .ui-input::placeholder,
#main .ui-card :is(input, textarea)::placeholder { font-size: .8125rem; }

/* ---------- title (cabeçalho de página/seção) ---------- */
.ui-title { margin-bottom: 1rem; }
.ui-title-row { display: flex; align-items: center; gap: .5rem; }
.ui-title-text { margin: 0; font-size: 1.375rem; font-weight: 600; line-height: 1.75rem; letter-spacing: -.01em; color: #111827; }
.ui-title-lead { margin-top: .25rem; max-width: 60rem; font-size: .875rem; line-height: 1.375rem; color: #6b7280; }
.dark .ui-title-text { color: #fff; }
.dark .ui-title-lead { color: #9ca3af; }
/* Dentro de um card/painel o título é de seção: um degrau menor. */
.ui-panel .ui-title-text, .ui-card .ui-title-text { font-size: 1rem; line-height: 1.5rem; }
.ui-panel .ui-title, .ui-card .ui-title { margin-bottom: .75rem; }

/* ---------- card (telas com markup antigo) ----------
   Mesmo visual do painel; dentro dele rótulos, subtítulos, textos e campos
   seguem a escala comum mesmo quando o markup traz classes do Tailwind. */
.ui-card {
  min-width: 0; padding: 1.25rem 1.5rem; border: 1px solid #e5e7eb; border-radius: .5rem;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.dark .ui-card { border-color: #2b2b2b; background: #1a1a1a; }
.ui-card-title { margin: 0 0 .75rem; font-size: 1rem; font-weight: 600; line-height: 1.5rem; color: #111827; }
.dark .ui-card-title { color: #fff; }
.ui-card label { font-size: .8125rem; font-weight: 500; line-height: 1.25rem; color: #374151; }
.dark .ui-card label { color: #d1d5db; }
.ui-card h3 { margin: 1rem 0 .5rem; font-size: .9375rem; font-weight: 600; line-height: 1.375rem; color: #111827; }
.dark .ui-card h3 { color: #fff; }
.ui-card h4 { font-size: .875rem; font-weight: 600; }
.ui-card p { font-size: .875rem; line-height: 1.375rem; }
.ui-card input:not([type=checkbox]):not([type=radio]):not([type=file]), .ui-card select, .ui-card textarea {
  border-radius: .5rem; font-size: .875rem; line-height: 1.25rem;
}
.ui-card + .ui-card, .ui-stack > .ui-card + .ui-card { margin-top: 0; }
/* Faixa de título em menta: o primeiro título do card (componente "title",
   h2.ui-card-title ou a linha título + ações de card_pdf/sign) ocupa a largura
   toda, por cima do padding do card. */
.ui-card > :is(.ui-title, .ui-card-title, .card-pdf-head):first-child {
  margin: -1.25rem -1.5rem 1.25rem; padding: .875rem 1.5rem;
  border-bottom: 1px solid var(--ribbon-line, #a9d9ab); border-radius: calc(.5rem - 1px) calc(.5rem - 1px) 0 0;
  background: var(--ribbon-bg, #d4efd5);
}
.ui-card > :is(.ui-title, .ui-card-title):first-child,
.ui-card > :is(.ui-title, .card-pdf-head):first-child :is(.ui-title-text, .ui-title-lead, .ui-card-title) { color: var(--ribbon-text, #333) !important; }
.ui-card > .card-pdf-head:first-child :is(.ui-title, .ui-card-title) { margin-bottom: 0; }
/* Formulário de filtro em linha: campo(s) + botão alinhado embaixo. */
.ui-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: 0; }
.ui-inline-form .ui-field { flex: 1 1 18rem; max-width: 28rem; }
.ui-inline-form .ui-btn { flex: 0 0 auto; }

/* Prévia do PDF (Relatório e Seletividade): ocupa a tela abaixo da barra do topo,
   entre 30rem (notebooks pequenos) e 64rem (monitores altos). */
.card-pdf-frame { height: clamp(30rem, calc(100vh - 9rem), 64rem); }
.ui-badge--warning { background: #fef3c7; color: #92400e; }
.dark .ui-badge--warning { background: rgba(146, 64, 14, .35); color: #fde68a; }

/* Área restrita */
.restricted-access-grid { margin-top: 0; }
@media (min-width: 1024px) { .restricted-access-grid { grid-template-columns: 1fr 1fr; } }
.restricted-list { margin: 0; padding-left: 1.25rem; list-style: disc; display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }

/* Início: cabeçalho compacto, tabela de permissões e coluna lateral */
.home-head { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.home-logo-link { display: block; flex: none; }
.home-logo { display: block; height: 2.25rem; width: auto; }
/* No escuro, o "ESTAT" cinza some: versão branca do logo. */
.home-logo--on-dark, .dark .home-logo--on-light { display: none; }
.dark .home-logo--on-dark { display: block; }
.home-head-text { flex: 1; min-width: 16rem; }
.home-title { margin: 0; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #111827; }
.dark .home-title { color: #fff; }
.home-subtitle { margin: .125rem 0 0; color: #6b7280; }
.dark .home-subtitle { color: #9ca3af; }
.home-norms { list-style: none; margin: .625rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.home-norms li { cursor: help; }
.home-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; align-items: start; }
@media (min-width: 1280px) { .home-layout { grid-template-columns: minmax(0, 1fr) 20rem; } }
.home-side { display: flex; flex-direction: column; gap: 1.5rem; }
.home-permissions tbody th { font-size: .875rem; font-weight: 600; text-transform: none; letter-spacing: normal; padding: .5rem 1rem; border-top: 1px solid #e5e7eb; color: #111827; }
.dark .home-permissions tbody th { color: #f3f4f6; border-color: #374151; }
.home-permissions tbody th i { width: 1.25rem; margin-right: .375rem; text-align: center; color: #6b7280; }
.home-permissions td { padding: .5rem 1rem; }
.home-permissions .home-section-row th { padding: .5rem 1rem .25rem; background: #f9fafb; color: #6b7280; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dark .home-permissions .home-section-row th { background: #1f2937; color: #9ca3af; }
.home-level-col { text-align: center !important; width: 10rem; vertical-align: bottom; }
.home-permissions thead .home-level-col { white-space: normal; }
.home-level-name { display: block; font-weight: 700; color: #111827; }
.dark .home-level-name { color: #fff; }
.home-level-summary { display: block; margin-top: .125rem; font-size: .6875rem; font-weight: 400; line-height: 1rem; color: #6b7280; text-transform: none; letter-spacing: normal; }
.home-allowed { font-weight: 700; color: #16a34a; }
.home-denied { color: #9ca3af; }
/* Fluxo do estudo: etapas em segmentos, como o passo a passo da importação. */
.home-steps { list-style: none; margin: 0; padding: 0; border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; counter-reset: home-step; }
.dark .home-steps { border-color: #374151; }
.home-steps li { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; counter-increment: home-step; transition: background .15s; }
.home-steps li + li { border-top: 1px solid #e5e7eb; }
.dark .home-steps li + li { border-color: #374151; }
.home-steps li:hover { background: var(--brand-soft, #e8f6e9); }
.dark .home-steps li:hover { background: rgba(22, 184, 30, .12); }
.home-steps strong { display: block; font-size: .875rem; color: #111827; }
.home-steps strong::before { content: counter(home-step) ". "; color: var(--brand-strong, #24721c); }
.dark .home-steps strong { color: #fff; }
.home-steps span:not(.home-step-icon) { display: block; font-size: .75rem; color: #6b7280; }
.home-step-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid #d1d5db; background: #fff; color: var(--brand-strong, #24721c); }
.dark .home-step-icon { background: #111827; border-color: #4b5563; color: var(--brand, #16b81e); }

/* Trilha de auditoria */
.audit-changes summary { cursor: pointer; color: var(--brand-strong, #24721c); font-size: .8125rem; }
.dark .audit-changes summary { color: var(--brand, #16b81e); }
.audit-changes .ui-details { margin-top: .5rem; min-width: 18rem; font-size: .8125rem; }

/* Campo com opções editáveis (cadastro do ensaio): seletor/novo valor + botão,
   na mesma grade para as bordas e os botões ficarem alinhados. */
.dyn-row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: .5rem; align-items: center; }
.dyn-row + .dyn-row { margin-top: .5rem; }
.dyn-control, .dyn-control .choices { min-width: 0; width: 100%; }
.dyn-row select, .dyn-row .novo-valor-input { width: 100% !important; max-width: none; }
.dyn-row .ui-btn, .dyn-row .novo-valor-input { height: 38px; }
.dyn-row .novo-valor-input { padding-top: 0; padding-bottom: 0; }
.status-message:empty { display: none; }
.status-message { margin-top: .5rem; }

/* Colunas da mesma altura (o card da direita acompanha o formulário). */
@media (min-width: 1024px) { .ui-layout--stretch.ui-layout--sidebar { align-items: stretch; } }
.ui-layout--stretch > .ui-layout-main > .ui-card:last-child { flex: 1; }
.card-table { display: flex; flex-direction: column; }
.card-table-empty { flex: 1; }

/* Estado vazio dentro de um card (ainda sem resultado). */
.ui-empty-hint {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: 12rem; padding: 2rem 1rem; text-align: center;
  border: 1px dashed #d1d5db; border-radius: .5rem; background: #f9fafb;
}
.dark .ui-empty-hint { border-color: #404040; background: #111111; }
.ui-empty-hint .ui-subsection-title { margin: 0; }

/* ---------- badge ---------- */
.ui-badge {
  display: inline-block; border-radius: 9999px; padding: .0625rem .5rem;
  font-size: .6875rem; font-weight: 600; line-height: 1rem; white-space: nowrap;
}
.ui-badge--neutral { background: #e5e7eb; color: #4b5563; }
.ui-badge--info { background: var(--brand-soft, #e8f6e9); color: var(--brand-strong, #24721c); }
.ui-badge--success { background: #dcfce7; color: #15803d; }
.ui-badge--danger { background: #fee2e2; color: #b91c1c; }
.ui-badge--variable { background: #e0f2fe; color: #0369a1; }
.ui-badge--attribute { background: #f3e8ff; color: #7e22ce; }
.dark .ui-badge--neutral { background: #404040; color: #e5e7eb; }
.dark .ui-badge--info { background: rgba(22, 184, 30, .3); color: var(--brand, #16b81e); }
.dark .ui-badge--success { background: rgba(21, 128, 61, .3); color: #86efac; }
.dark .ui-badge--danger { background: rgba(185, 28, 28, .3); color: #fca5a5; }
.dark .ui-badge--variable { background: rgba(3, 105, 161, .35); color: #7dd3fc; }
.dark .ui-badge--attribute { background: rgba(126, 34, 206, .35); color: #d8b4fe; }

/* ---------- detail_list ---------- */
.ui-details { display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
.ui-details-row { display: flex; gap: .5rem; }
.ui-details dt { flex: 0 0 7.5rem; color: #6b7280; }
.ui-details dd { min-width: 0; color: #111827; overflow-wrap: anywhere; }
.dark .ui-details dt { color: #9ca3af; }
.dark .ui-details dd { color: #f3f4f6; }

/* Moldura de PDF (prévia do relatório e conferência). */
.card-pdf-frame { overflow: hidden; border: 1px solid #e5e7eb; border-radius: .5rem; }
.dark .card-pdf-frame { border-color: #2b2b2b; }
.card-pdf-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- ui_input ---------- */
.ui-input {
  display: block; width: 100%; border-radius: .5rem; border: 1px solid #d1d5db;
  background: #f9fafb; padding: .5rem .75rem; font-size: .875rem; color: #111827;
}
.ui-input:focus { outline: none; border-color: var(--brand, #16b81e); box-shadow: 0 0 0 2px rgba(22, 184, 30, .3); }
.dark .ui-input { border-color: #404040; background: #2b2b2b; color: #fff; }
.dark .ui-input::placeholder { color: #9ca3af; }
/* O reset de formulários do Tailwind (main.css) carrega depois deste arquivo e
   zera o arredondamento de [type=text]/select/textarea com a mesma especificidade;
   elemento + classe garante o visual do campo. */
input.ui-input, select.ui-input, textarea.ui-input {
  border-radius: .5rem; font-size: .875rem; line-height: 1.25rem; padding: .5rem .75rem;
}

/* ---------- config_field / check_field ---------- */
.ui-fields { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 768px) { .ui-fields { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .ui-fields { grid-template-columns: repeat(3, 1fr); } }
.ui-field--wide { grid-column: 1 / -1; }
.ui-field label {
  display: block; margin-bottom: .25rem; font-size: .8125rem; font-weight: 500; color: #374151;
}
.dark .ui-field label { color: #d1d5db; }
.ui-field input:not([type=checkbox]):not([type=radio]),
.ui-field select,
.ui-field textarea,
.ui-matrix input { width: 100%; max-width: none; }
.ui-field textarea { height: 5.5rem; min-height: 3rem; resize: vertical; }
/* configure_form_field põe width:300px inline nos selects/inputs; no campo padrão ocupam a largura. */
.ui-field select[style*="width"], .ui-field input[style*="width"]:not([type=checkbox]):not([type=radio]) { width: 100% !important; }
.ui-field--wide select { max-width: 36rem; }

.ui-check { padding-top: .25rem; }
.ui-check label, .ui-rule-main {
  display: flex; align-items: flex-start; gap: .625rem; cursor: pointer;
  font-size: .875rem; color: #374151; line-height: 1.25rem;
}
.dark .ui-check label, .dark .ui-rule-main { color: #d1d5db; }
.ui-check input, .ui-rule-main input { margin-top: .125rem; flex-shrink: 0; }

/* ---------- textos auxiliares ---------- */
.ui-hint { margin-top: .375rem; font-size: .75rem; color: #6b7280; }
.dark .ui-hint { color: #9ca3af; }
.ui-error { margin-top: .25rem; font-size: .75rem; color: #dc2626; }
.dark .ui-error { color: #f87171; }

.ui-required { color: #dc2626; }

/* ---------- panel ---------- */
.ui-panel {
  min-width: 0; overflow: hidden; border: 1px solid #e5e7eb; border-radius: .5rem;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.dark .ui-panel { border-color: #2b2b2b; background: #1a1a1a; }
/* Faixa de título em menta (--ribbon-*, style.css), como no ActionStat. */
.ui-panel-head { padding: .875rem 1.5rem; border-bottom: 1px solid var(--ribbon-line, #a9d9ab); background: var(--ribbon-bg, #d4efd5); }
.ui-panel-head h2, .dark .ui-panel-head h2 { color: var(--ribbon-text, #333) !important; }
.ui-panel-head p, .dark .ui-panel-head p { color: var(--ribbon-text, #333) !important; }
.ui-panel-head h2 { font-size: 1rem; font-weight: 600; line-height: 1.5rem; color: #111827; }
.ui-panel-head p { margin-top: .25rem; font-size: .875rem; color: #6b7280; }
.dark .ui-panel-head h2 { color: #fff; }
.dark .ui-panel-head p { color: #9ca3af; }
.ui-panel-body { padding: 1.25rem 1.5rem 1.5rem; }

/* ---------- confirm_form / form_errors ---------- */
.ui-form { display: flex; flex-direction: column; gap: 1rem; }
.ui-form-errors {
  border: 1px solid #fca5a5; border-radius: .5rem; background: #fef2f2;
  padding: .75rem 1rem; font-size: .875rem; color: #991b1b;
}
.dark .ui-form-errors { border-color: #991b1b; background: rgba(127, 29, 29, .3); color: #fca5a5; }

/* ---------- data_table ---------- */
.ui-table-wrap { overflow-x: auto; }
.ui-table { width: 100%; text-align: left; font-size: .875rem; color: #4b5563; }
.ui-table thead { background: #f9fafb; }
.ui-table th {
  padding: .75rem 1rem; font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: #374151; white-space: nowrap;
}
.ui-table td { padding: .75rem 1rem; border-top: 1px solid #e5e7eb; vertical-align: top; }
.ui-table .ui-table-strong { font-weight: 600; color: #111827; }
.ui-table .ui-table-muted { font-size: .75rem; color: #9ca3af; }
.ui-table .ui-table-nowrap { white-space: nowrap; }
.ui-table .ui-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-table .ui-block { display: block; font-weight: 400; }
.ui-table .ui-table-empty td { padding: 2.5rem 1.5rem; text-align: center; color: #6b7280; }
.dark .ui-table { color: #9ca3af; }
.dark .ui-table thead { background: #2b2b2b; }
.dark .ui-table th { color: #d1d5db; }
.dark .ui-table td { border-color: #2b2b2b; }
.dark .ui-table .ui-table-strong { color: #fff; }

/* ---------- form_fields / dynamic_filters / subsections ---------- */
.ui-stack { display: flex; flex-direction: column; gap: 1rem; }
.ui-subsection { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #e5e7eb; }
.dark .ui-subsection { border-color: #2b2b2b; }
.ui-subsection-title { margin-bottom: .75rem; font-size: .875rem; font-weight: 600; color: #111827; }
.dark .ui-subsection-title { color: #fff; }
.ui-fields--2 { grid-template-columns: 1fr 1fr !important; }
.ui-choice-options--vertical { flex-direction: column; align-items: stretch; }
.ui-choice-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
[data-field].is-hidden { display: none; }
.ui-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- ui_button ---------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  border: 1px solid transparent; border-radius: .5rem; font-weight: 500; line-height: 1.25rem;
  text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.ui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(22, 184, 30, .35); }
.ui-btn--sm { padding: .25rem .625rem; font-size: .75rem; }
.ui-btn--md { padding: .5rem 1rem; font-size: .875rem; }
.ui-btn--block { width: 100%; }
.ui-btn--lg { padding: .625rem 1.25rem; font-size: .9375rem; }
.ui-btn--secondary { background: #4b5563; color: #fff; }
.ui-btn--secondary:hover { background: #374151; }
.ui-btn--success { background: #15803d; color: #fff; }
.ui-btn--success:hover { background: #166534; }
.ui-btn--warning { background: #b45309; color: #fff; }
.ui-btn--warning:hover { background: #92400e; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ui-btn i { font-size: .875em; }
.ui-btn--primary { background: var(--brand-strong, #24721c); color: #fff; }
.ui-btn--primary:hover { background: var(--brand-strong, #24721c); }
.ui-btn--outline { border-color: #d1d5db; background: #fff; color: #374151; }
.ui-btn--outline:hover { background: #f3f4f6; }
.ui-btn--accent { border-color: var(--brand-strong, #24721c); background: #fff; color: var(--brand-strong, #24721c); }
.ui-btn--accent:hover { background: var(--brand-soft, #e8f6e9); }
.ui-btn--danger { border-color: #dc2626; background: #fff; color: #dc2626; }
.ui-btn--danger:hover { background: #fef2f2; }
.ui-btn--ghost { background: transparent; color: #374151; }
.ui-btn--ghost:hover { background: #f3f4f6; }
.dark .ui-btn--outline, .dark .ui-btn--ghost { border-color: #404040; background: transparent; color: #e5e7eb; }
.dark .ui-btn--outline:hover, .dark .ui-btn--ghost:hover { background: #2b2b2b; }
.dark .ui-btn--accent { border-color: var(--brand, #16b81e); background: transparent; color: var(--brand, #16b81e); }
.dark .ui-btn--accent:hover { background: #1e3a8a; }
.dark .ui-btn--danger { border-color: #f87171; background: transparent; color: #fca5a5; }
.dark .ui-btn--danger:hover { background: rgba(127, 29, 29, .4); }
.ui-actions { display: flex; flex-wrap: wrap; gap: .375rem; }
.ui-actions--end { justify-content: flex-end; }

/* ---------- notice ---------- */
.ui-notice { border: 1px solid; border-radius: .5rem; padding: .75rem 1rem; font-size: .875rem; }
.ui-notice p + p { margin-top: .25rem; }
.ui-notice-title { font-weight: 600; }
.ui-notice--info { border-color: var(--brand-soft-strong, #c9e8cb); background: var(--brand-soft, #e8f6e9); color: var(--brand-strong, #24721c); }
.ui-notice--success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.ui-notice--warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.ui-notice--error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.dark .ui-notice--info { border-color: var(--brand-strong, #24721c); background: var(--brand-soft); color: var(--brand-soft-strong, #c9e8cb); }
.dark .ui-notice--success { border-color: #166534; background: rgba(22, 101, 52, .2); color: #bbf7d0; }
.dark .ui-notice--warning { border-color: #92400e; background: rgba(146, 64, 14, .2); color: #fde68a; }
.dark .ui-notice--error { border-color: #991b1b; background: rgba(153, 27, 27, .2); color: #fecaca; }

/* ---------- destaques (topo dos resultados: prazo de validade, limites de liberação) ---------- */
.ui-highlights { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.ui-highlight { flex: 1 1 14rem; min-width: 0; border: 1px solid #e5e7eb; border-left: 4px solid var(--brand, #16b81e); border-radius: .5rem; background: #fff; padding: .75rem 1rem; }
.ui-highlight-label { font-size: .75rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: #6b7280; }
.ui-highlight-value { margin: .25rem 0 0; font-size: 1.5rem; font-weight: 700; line-height: 2rem; color: #111827; font-variant-numeric: tabular-nums; }
/* Limites de liberação: barra entre LIE e LSE; números em cima, especificações embaixo. */
.ui-highlight--range { flex: 2 1 22rem; border-left: 1px solid #e5e7eb; }
.ui-range { margin: 0; padding: 1.375rem 0 1.375rem; }
.ui-range-track { position: relative; height: .625rem; border-radius: 9999px; background: #e5e7eb; }
.ui-range-fill { position: absolute; top: 0; bottom: 0; border-radius: 9999px; background: var(--brand, #16b81e); }
.ui-range-fill--open-left { border-radius: 0 9999px 9999px 0; background: linear-gradient(to right, transparent, var(--brand, #16b81e) 3rem); }
.ui-range-fill--open-right { border-radius: 9999px 0 0 9999px; background: linear-gradient(to left, transparent, var(--brand, #16b81e) 3rem); }
.ui-range-spec { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px; margin-left: -1px; background: #b91c1c; }
.ui-range-tick { position: absolute; transform: translateX(-50%); white-space: nowrap; font-size: .75rem; font-variant-numeric: tabular-nums; }
.ui-range-tick--irl { bottom: calc(100% + .375rem); font-weight: 600; color: #111827; }
.ui-range-tick--spec { top: calc(100% + .375rem); color: #b91c1c; }
.dark .ui-highlight { border-color: #2b2b2b; border-left-color: var(--brand, #16b81e); background: #1f1f1f; }
.dark .ui-highlight--range { border-left-color: #2b2b2b; }
.dark .ui-highlight-label { color: #9ca3af; }
.dark .ui-highlight-value, .dark .ui-range-tick--irl { color: #f9fafb; }
.dark .ui-range-track { background: #333; }
.dark .ui-range-spec { background: #f87171; }
.dark .ui-range-tick--spec { color: #f87171; }

/* ---------- messages (faixas no topo da área afetada) ---------- */
.ui-messages { display: flex; flex-direction: column; gap: .5rem; }
.ui-messages:has(.ui-notice) { margin-bottom: 1rem; }
/* Sem mensagem, o bloco não ocupa espaço (num flex com gap, empurraria o conteúdo). */
.ui-messages:not(:has(.ui-notice)) { display: none; }
/* Versão compacta, junto de um campo (ex.: incluir/remover opção no cadastro) */
.ui-notice--sm { padding: .375rem .625rem; font-size: .8125rem; }

/* Área de resultados atualizando em segundo plano */
.ui-busy { position: relative; }
.ui-busy::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .55); cursor: progress; }
.dark .ui-busy::after { background: rgba(17, 24, 39, .55); }

/* ---------- layout de página ---------- */
.ui-page { padding: 1rem; }
@media (min-width: 640px) { .ui-page { padding: 1.5rem; } }
.ui-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 1024px) {
  .ui-layout--sidebar { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; }
}
.ui-layout-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

/* Telas com prévia de PDF (Relatório, Seletividade). No desktop a coluna mais curta
   acompanha a rolagem (a mais longa não tem para onde andar); a prévia do
   Relatório desconta o topo para caber inteira na tela. No celular, com um PDF
   aberto, a coluna dele vem antes do formulário. */
.ui-layout--pdf { --pdf-sticky-top: 5rem; }
.env-homologacao .ui-layout--pdf { --pdf-sticky-top: calc(5rem + var(--env-strip-h)); }
@media (min-width: 1024px) {
  .ui-layout--pdf > .ui-layout-main { position: sticky; top: var(--pdf-sticky-top); }
  .ui-layout--pdf .card-pdf .card-pdf-frame {
    height: clamp(24rem, calc(100vh - var(--pdf-sticky-top) - 10rem), 64rem);
  }
}
@media (max-width: 1023px) {
  .ui-layout--pdf:has(.card-pdf-frame) > .ui-layout-main:last-child { order: -1; }
}
.ui-link { color: var(--brand-strong, #24721c); text-decoration: none; }
.ui-link:hover { text-decoration: underline; }
.dark .ui-link { color: var(--brand, #16b81e); }

/* ---------- pagination ---------- */
.ui-pagination {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding-top: 1rem; font-size: .875rem; color: #4b5563;
}
.dark .ui-pagination { color: #9ca3af; }

/* ---------- file_drop ---------- */
.ui-drop {
  position: relative; display: flex !important; flex-direction: column; align-items: center; gap: .375rem;
  margin: 0 !important; padding: 1.5rem 1rem; text-align: center; cursor: pointer;
  border: 2px dashed #cbd5e1; border-radius: .75rem; background: #f8fafc;
  transition: border-color .15s, background-color .15s;
}
.ui-drop:hover, .ui-drop.is-dragging { border-color: var(--brand, #16b81e); background: var(--brand-soft, #e8f6e9); }
.ui-drop.has-file { border-style: solid; border-color: #22c55e; background: #f0fdf4; }
.ui-drop svg { width: 2rem; height: 2rem; color: #64748b; }
.ui-drop.has-file svg { color: #16a34a; }
.ui-drop-title { font-size: .875rem; font-weight: 500; color: #1f2937; overflow-wrap: anywhere; }
.ui-drop-hint { font-size: .75rem; font-weight: 400; color: #6b7280; }
.ui-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dark .ui-drop { border-color: #404040; background: #111111; }
.dark .ui-drop:hover, .dark .ui-drop.is-dragging { border-color: var(--brand, #16b81e); background: var(--brand-soft); }
.dark .ui-drop.has-file { border-color: #16a34a; background: rgba(22, 101, 52, .2); }
.dark .ui-drop-title { color: #f3f4f6; }
.dark .ui-drop-hint { color: #9ca3af; }

/* ---------- guia de formato (listas de colunas) ---------- */
.ui-code-list { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.ui-code {
  border-radius: .25rem; padding: .0625rem .375rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; background: #f1f5f9; color: #0f172a; border: 1px solid #e2e8f0;
}
.dark .ui-code { background: #111111; color: #e5e7eb; border-color: #2b2b2b; }
.ui-error-list { max-height: 16rem; overflow-y: auto; margin: 0; padding-left: 1.25rem; list-style: disc; font-size: .8125rem; }
.ui-error-list li + li { margin-top: .25rem; }

/* ---------- barra de filtros / rodapé de painel ---------- */
.ui-filter-bar {
  display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: end;
  padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb;
}
@media (min-width: 768px) { .ui-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; } }
.dark .ui-filter-bar { border-color: #2b2b2b; }
.ui-table-caption { padding: .75rem 1rem 0; font-size: .8125rem; color: #6b7280; }
.dark .ui-table-caption { color: #9ca3af; }
.ui-panel-foot { padding: 0 1rem 1rem; }