/* ConfTech · biblioteca de componentes
   Regra: um primário por tela; cor nunca sozinha; sem cartão dentro de cartão. */

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--touch); padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--text-base); font-weight: 500; line-height: 1.2; white-space: nowrap;
  text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) linear, border-color var(--t-fast) linear, color var(--t-fast) linear;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: rgb(var(--primary)); color: rgb(var(--on-primary)); }
.btn-primary:hover { background: rgb(var(--primary-hover)); color: rgb(var(--on-primary)); }
.btn-secondary { background: rgb(var(--surface)); color: rgb(var(--text)); border-color: rgb(var(--border-strong)); }
.btn-secondary:hover { background: rgb(var(--surface-2)); color: rgb(var(--text)); }
.btn-ghost { background: transparent; color: rgb(var(--link)); }
.btn-ghost:hover { background: rgb(var(--primary-soft)); color: rgb(var(--link)); }
.btn-danger { background: rgb(var(--danger)); color: rgb(var(--surface)); }
:root[data-theme="dark"] .btn-danger { color: rgb(20 22 15); }
.btn-danger:hover { filter: brightness(.92); }
.btn-danger-outline { background: transparent; color: rgb(var(--danger-ink)); border-color: rgb(var(--danger) / .55); }
.btn-danger-outline:hover { background: rgb(var(--danger-soft)); color: rgb(var(--danger-ink)); }
.btn-sm { min-height: 2rem; padding: 0 var(--sp-3); font-size: var(--text-sm); }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn .icon { margin-left: -2px; }
@media (min-width: 768px) {
  .btn { min-height: var(--control-h); }
  .btn-sm { min-height: 2rem; }
}

/* ---------- Formulários ---------- */
label { display: block; font-size: var(--text-sm); font-weight: 500; color: rgb(var(--text)); margin-bottom: var(--sp-1); }
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"], [type="range"]),
select, textarea {
  display: block; width: 100%; min-height: var(--touch);
  padding: .5rem .75rem;
  background: rgb(var(--field)); color: rgb(var(--text));
  border: 1px solid rgb(var(--field-border)); border-radius: var(--r-md);
  font-size: 1rem; line-height: 1.35;
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
@media (min-width: 768px) {
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"], [type="range"]),
  select, textarea { min-height: var(--control-h); font-size: var(--text-base); }
}
textarea { min-height: 5.5rem; resize: vertical; }
select { padding-right: 2rem; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857f6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 1rem; }
input[type="date"] { min-width: 0; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: rgb(var(--text-3)); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: rgb(var(--focus)); box-shadow: 0 0 0 3px rgb(var(--focus) / .22);
}
input::placeholder, textarea::placeholder { color: rgb(var(--text-3)); opacity: 1; }
input:disabled, select:disabled, textarea:disabled, input[readonly] { background: rgb(var(--surface-2)); color: rgb(var(--text-2)); cursor: not-allowed; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: rgb(var(--danger)); }
input[type="checkbox"], input[type="radio"] { width: 1.125rem; height: 1.125rem; accent-color: rgb(var(--primary)); margin: 0; flex: none; }
input[type="number"] { font-variant-numeric: tabular-nums; }

.field { display: grid; gap: 0; align-content: start; min-width: 0; }
.field-label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--sp-1); }
.field-label .req { color: rgb(var(--danger-ink)); margin-left: 2px; }
.field-help { margin: var(--sp-1) 0 0; font-size: var(--text-sm); color: rgb(var(--text-3)); }
.field-error { display: flex; gap: var(--sp-1); align-items: flex-start; margin: var(--sp-1) 0 0; font-size: var(--text-sm); color: rgb(var(--danger-ink)); font-weight: 500; }
.field-error .icon { margin-top: 2px; width: 1rem; height: 1rem; }
.field-check { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); }
.field-check label { margin: 0; font-weight: 400; }
.errorlist { list-style: none; padding: 0; margin: var(--sp-1) 0 0; font-size: var(--text-sm); color: rgb(var(--danger-ink)); font-weight: 500; }

.form-page { max-width: 56rem; display: grid; gap: var(--sp-6); }
.form-section { display: grid; gap: var(--sp-4); padding: var(--sp-5); background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: var(--r-lg); }
.form-section-head h2 { font-size: var(--text-lg); }
.form-section-head p { margin: var(--sp-1) 0 0; color: rgb(var(--text-3)); font-size: var(--text-sm); }
.form-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .span-2 { grid-column: span 2; }
  .span-all { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .form-section { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--sp-6); padding: var(--sp-6); }
}
.form-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
}
@media (max-width: 767.98px) {
  .form-actions.is-sticky {
    position: sticky; bottom: 0; z-index: var(--z-sticky);
    margin: 0 calc(var(--sp-4) * -1); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: rgb(var(--surface)); border-top: 1px solid rgb(var(--border));
  }
  .form-actions.is-sticky .btn { flex: 1; }
}

/* ---------- Superfícies ---------- */
.card { background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: var(--r-lg); padding: var(--sp-5); }
.card-flush { padding: 0; overflow: hidden; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid rgb(var(--border)); }
.card-head h2, .card-head h3 { font-size: var(--text-lg); }
.card-body { padding: var(--sp-5); }
.eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--text-3)); }

/* ---------- Cabeçalho de página ---------- */
.page-header { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.crumb { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); color: rgb(var(--text-3)); }
.crumb a { color: rgb(var(--text-2)); display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 1.75rem; }
.crumb a:hover { color: rgb(var(--text)); }
.page-title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-6); }
.page-title { font-size: var(--text-2xl); letter-spacing: -.015em; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.page-sub { margin: var(--sp-1) 0 0; color: rgb(var(--text-2)); font-size: var(--text-base); max-width: 60ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (max-width: 639.98px) {
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
}

/* ---------- Indicadores ---------- */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: var(--sp-5);
}
.stat { padding: var(--sp-4) var(--sp-5); min-width: 0; border-right: 1px solid rgb(var(--border)); border-bottom: 1px solid rgb(var(--border)); }
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-last-child(-n+2):nth-child(2n+1), .stat:last-child { border-bottom: 0; }
.stat:nth-last-child(2):nth-child(2n+1) { border-bottom: 0; }
.stat-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--text-3)); }
.stat-value { margin-top: var(--sp-1); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-unit { font-size: var(--text-sm); font-weight: 400; color: rgb(var(--text-3)); margin-left: var(--sp-1); }
.stat-note { margin-top: var(--sp-1); font-size: var(--text-sm); color: rgb(var(--text-3)); }
@media (min-width: 768px) {
  .stats { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
  .stat, .stat:nth-child(2n), .stat:nth-last-child(-n+2):nth-child(2n+1), .stat:nth-last-child(2):nth-child(2n+1) { border-bottom: 0; border-right: 1px solid rgb(var(--border)); }
  .stat:last-child { border-right: 0; }
}

/* ---------- Tabelas ---------- */
.table-wrap { position: relative; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: var(--r-lg); overflow-x: auto; margin-bottom: var(--sp-4); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.table th {
  padding: .625rem var(--sp-3); text-align: left; white-space: nowrap;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: rgb(var(--text-2)); background: rgb(var(--surface-2)); border-bottom: 1px solid rgb(var(--border));
}
.table td { padding: .75rem var(--sp-3); border-bottom: 1px solid rgb(var(--border)); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgb(var(--primary-soft) / .55); }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-title { font-weight: 500; color: rgb(var(--text)); }
.cell-sub { display: block; font-size: var(--text-xs); color: rgb(var(--text-3)); font-weight: 400; }
.table .cell-actions { text-align: right; white-space: nowrap; width: 1%; }
.table .cell-actions .btn { margin-left: var(--sp-1); }
.table-total td { background: rgb(var(--surface-2)); font-weight: 600; }
.table a.row-link { color: inherit; font-weight: 500; }
.table a.row-link:hover { color: rgb(var(--link)); text-decoration: underline; }

@media (max-width: 767.98px) {
  .table-wrap.is-stack { border: 0; background: transparent; overflow: visible; }
  .table-stack, .table-stack tbody { display: grid; gap: var(--sp-3); }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-4); background: rgb(var(--surface));
    border: 1px solid rgb(var(--border)); border-radius: var(--r-lg);
  }
  .table-stack td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; overflow-wrap: anywhere; }
  .table-stack tbody tr:hover td { background: transparent; }
  .table-stack td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--text-3));
  }
  .table-stack td.num { text-align: left; }
  .table-stack .cell-title { grid-column: 1 / -1; font-size: var(--text-lg); order: -1; }
  .table-stack .cell-title::before { display: none; }
  .table-stack .cell-wide { grid-column: 1 / -1; }
  .table-stack .cell-actions { grid-column: 1 / -1; width: auto; display: flex; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid rgb(var(--border)); text-align: left; }
  .table-stack .cell-actions .btn { margin: 0; flex: 1; }
  .table-stack .cell-hide-mobile { display: none; }
}

/* ---------- Selos de status (cor + forma + texto) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem; vertical-align: middle;
  padding: .125rem .5rem; border-radius: var(--r-sm);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: rgb(var(--surface-2)); color: rgb(var(--text-2)); border: 1px solid rgb(var(--border));
}
.badge::before { content: ""; width: .5rem; height: .5rem; flex: none; background: currentColor; }
.badge-ok { background: rgb(var(--ok-soft)); color: rgb(var(--ok-ink)); border-color: rgb(var(--ok) / .35); }
.badge-ok::before { border-radius: 50%; }
.badge-warn { background: rgb(var(--warn-soft)); color: rgb(var(--warn-ink)); border-color: rgb(var(--warn) / .4); }
.badge-warn::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.badge-danger { background: rgb(var(--danger-soft)); color: rgb(var(--danger-ink)); border-color: rgb(var(--danger) / .4); }
.badge-danger::before { transform: rotate(45deg) scale(.85); }
.badge-info { background: rgb(var(--info-soft)); color: rgb(var(--info-ink)); border-color: rgb(var(--info) / .4); }
.badge-info::before { background: transparent; border: 2px solid currentColor; border-radius: 50%; }
.badge-neutral::before { height: 2px; border-radius: 1px; }
.chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: .125rem .5rem; border-radius: var(--r-sm); background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border)); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip b { font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* ---------- Alertas e avisos ---------- */
.alert { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); border: 1px solid; font-size: var(--text-base); }
.alert .icon { margin-top: 2px; }
.alert-title { font-weight: 600; }
.alert-info { background: rgb(var(--info-soft)); color: rgb(var(--info-ink)); border-color: rgb(var(--info) / .35); }
.alert-success { background: rgb(var(--ok-soft)); color: rgb(var(--ok-ink)); border-color: rgb(var(--ok) / .35); }
.alert-warning { background: rgb(var(--warn-soft)); color: rgb(var(--warn-ink)); border-color: rgb(var(--warn) / .4); }
.alert-danger { background: rgb(var(--danger-soft)); color: rgb(var(--danger-ink)); border-color: rgb(var(--danger) / .4); }
.alert ul { margin: var(--sp-1) 0 0; }

/* ---------- Mensagens (toasts) ---------- */
.toasts {
  position: fixed; z-index: var(--z-toast); display: grid; gap: var(--sp-2); pointer-events: none;
  left: var(--sp-3); right: var(--sp-3); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
}
.toast {
  pointer-events: auto; display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: rgb(var(--surface)); color: rgb(var(--text));
  border: 1px solid rgb(var(--border-strong)); border-left-width: 4px; border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  animation: toast-in var(--t-base) var(--ease);
}
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--t-base) linear, transform var(--t-base) var(--ease); }
.toast-icon { margin-top: 2px; }
.toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-close { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin: -.25rem 0; background: transparent; border: 0; border-radius: var(--r-md); color: rgb(var(--text-3)); }
.toast-close:hover { background: rgb(var(--surface-2)); color: rgb(var(--text)); }
.toast-success { border-left-color: rgb(var(--ok)); } .toast-success .toast-icon { color: rgb(var(--ok)); }
.toast-error, .toast-danger { border-left-color: rgb(var(--danger)); } .toast-error .toast-icon, .toast-danger .toast-icon { color: rgb(var(--danger)); }
.toast-warning { border-left-color: rgb(var(--warn)); } .toast-warning .toast-icon { color: rgb(var(--warn)); }
.toast-info, .toast-debug { border-left-color: rgb(var(--info)); } .toast-info .toast-icon, .toast-debug .toast-icon { color: rgb(var(--info)); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 640px) { .toasts { left: auto; right: var(--sp-6); bottom: var(--sp-6); width: 26rem; } }

/* ---------- Estado vazio ---------- */
.empty { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-10) var(--sp-4); background: rgb(var(--surface)); border: 1px dashed rgb(var(--border-strong)); border-radius: var(--r-lg); }
.empty .icon { width: 1.75rem; height: 1.75rem; color: rgb(var(--text-3)); }
.empty-title { font-weight: 600; font-size: var(--text-lg); }
.empty p { color: rgb(var(--text-2)); max-width: 44ch; }
.empty .btn { margin-top: var(--sp-2); }

/* ---------- Filtros e paginação ---------- */
.filters, .filters-grid { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.filters { padding: var(--sp-4); margin-bottom: var(--sp-4); background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: var(--r-lg); }
.filters .field-check { min-height: var(--control-h); }
@media (min-width: 640px) { .filters, .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .filters, .filters-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .filters .col-2 { grid-column: span 2; } .filters .col-3 { grid-column: span 3; } .filters .col-4 { grid-column: span 4; }
  .filters .col-5 { grid-column: span 5; } .filters .col-6 { grid-column: span 6; } .filters .col-12 { grid-column: 1 / -1; }
}
.filters .col-12, .filters-more { grid-column: 1 / -1; }
.filters.is-loading, [data-filtro-resultado].is-loading { opacity: .55; pointer-events: none; transition: opacity var(--t-fast, 100ms) linear; }

/* Período: duas datas e atalhos */
.range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-2); align-items: center; }
.range-sep { font-size: var(--text-sm); color: rgb(var(--text-3)); }
.presets { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.preset { min-height: 1.75rem; padding: 0 var(--sp-2); background: transparent; border: 1px solid rgb(var(--border-strong)); border-radius: var(--r-sm); font-size: var(--text-xs); font-weight: 500; color: rgb(var(--text-2)); cursor: pointer; }
.preset:hover { background: rgb(var(--surface-2)); color: rgb(var(--text)); }
.preset[aria-pressed="true"] { background: rgb(var(--primary-soft)); border-color: rgb(var(--primary)); color: rgb(var(--link)); }
.preset:focus-visible { outline: 2px solid rgb(var(--focus, var(--primary))); outline-offset: 2px; }
@media (max-width: 479px) { .range { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); } }
@media (max-width: 1023px) { .preset { min-height: 2.25rem; padding: 0 var(--sp-3); } }

/* Mais filtros */
.filters-more > summary { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2rem; cursor: pointer; font-size: var(--text-sm); font-weight: 500; color: rgb(var(--link)); list-style: none; }
.filters-more > summary::-webkit-details-marker { display: none; }
.filters-more > summary .icon { transition: transform var(--t-fast, 100ms) linear; }
.filters-more[open] > summary .icon { transform: rotate(90deg); }
.filters-more > summary:focus-visible { outline: 2px solid rgb(var(--focus, var(--primary))); outline-offset: 2px; border-radius: var(--r-sm); }
.filters-more .filters-grid { margin-top: var(--sp-3); }
.filters-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: rgb(var(--primary)); color: rgb(var(--on-primary, 255 255 255)); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Filtros aplicados */
.filters-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid rgb(var(--border)); }
.filters-foot[hidden] { display: none; }
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; min-width: 0; }
.filter-chip { display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%; min-height: 1.75rem; padding: 0 var(--sp-2) 0 var(--sp-3); background: rgb(var(--primary-soft)); border: 1px solid rgb(var(--primary) / .35); border-radius: 999px; font-size: var(--text-xs); font-weight: 500; color: rgb(var(--text)); cursor: pointer; }
.filter-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip:hover { border-color: rgb(var(--primary)); }
.filter-chip:focus-visible { outline: 2px solid rgb(var(--focus, var(--primary))); outline-offset: 2px; }
.filter-chip .icon { flex: none; color: rgb(var(--text-3)); }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--text-sm); color: rgb(var(--text-2)); }
.pagination-links { display: flex; gap: var(--sp-1); }
.pagination-links .btn { min-width: var(--touch); }

/* ---------- Listas de dados ---------- */
.dl { display: grid; gap: var(--sp-3) var(--sp-6); grid-template-columns: minmax(0, 1fr); margin: 0; }
.dl > div { min-width: 0; }
.dl dt { font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--text-3)); }
.dl dd { margin: 2px 0 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Ocupação (valor + texto, nunca só cor) ---------- */
.meter { display: grid; gap: var(--sp-1); min-width: 7rem; }
.meter-track { height: .5rem; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border)); border-radius: 999px; overflow: hidden; }
.meter-fill { height: 100%; width: var(--w, 0%); max-width: 100%; background: rgb(var(--primary)); border-radius: 999px; }
.meter-warn .meter-fill { background: rgb(var(--warn)); }
.meter-danger .meter-fill { background: rgb(var(--danger)); }
.meter-text { font-size: var(--text-xs); color: rgb(var(--text-2)); font-variant-numeric: tabular-nums; }

/* ---------- Controle segmentado ---------- */
.seg { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 2px; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border)); border-radius: var(--r-md); }
.seg > * { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: 0 var(--sp-3); border-radius: 4px; font-size: var(--text-sm); font-weight: 500; color: rgb(var(--text-2)); text-decoration: none; }
.seg > a:hover { color: rgb(var(--text)); text-decoration: none; }
.seg > [aria-current="page"], .seg > .is-active { background: rgb(var(--surface)); color: rgb(var(--text)); box-shadow: 0 0 0 1px rgb(var(--border-strong)); }

/* ---------- Linha do tempo ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--sp-5); }
.timeline::before { content: ""; position: absolute; left: .4375rem; top: .5rem; bottom: .5rem; width: 1px; background: rgb(var(--border-strong)); }
.timeline-item { position: relative; padding-left: var(--sp-8); }
.timeline-item::before { content: ""; position: absolute; left: 0; top: .35rem; width: .9rem; height: .9rem; border-radius: 50%; background: rgb(var(--surface)); border: 2px solid rgb(var(--primary)); }
.timeline-item.is-out::before { border-color: rgb(var(--warn)); }
.timeline-date { font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--text-3)); font-variant-numeric: tabular-nums; }
.timeline-title { font-weight: 600; }

/* ---------- Diálogo ---------- */
dialog.dialog {
  width: min(32rem, calc(100vw - 2rem)); padding: 0; border: 1px solid rgb(var(--border-strong)); border-radius: var(--r-lg);
  background: rgb(var(--surface)); color: rgb(var(--text)); box-shadow: var(--shadow-float);
  max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain;
}
dialog.dialog::backdrop { background: rgb(var(--overlay)); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid rgb(var(--border)); }
.dialog-head h2 { font-size: var(--text-lg); }
.dialog-body { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.dialog-foot { padding: var(--sp-3) var(--sp-5) var(--sp-4); display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* ---------- Select pesquisável (select-search.js) ---------- */
.ss { position: relative; min-width: 0; }
.ss::after {
  content: ""; position: absolute; right: .6rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857f6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-base) var(--ease);
}
.ss.is-open::after { transform: rotate(180deg); }
.ss-input { padding-right: 2rem !important; text-overflow: ellipsis; cursor: pointer; }
.ss-input:focus { cursor: text; }
.ss-input.is-placeholder:not(:focus) { color: rgb(var(--text-3)); }
.ss-input.is-invalid { border-color: rgb(var(--danger)); }
.ss-native {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; overflow: hidden; pointer-events: none;
}
.ss-list {
  position: fixed; z-index: var(--z-popover); margin: 0; padding: var(--sp-1); list-style: none;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgb(var(--surface)); border: 1px solid rgb(var(--border-strong)); border-radius: var(--r-md); box-shadow: var(--shadow-float);
}
.ss-list[hidden] { display: none; }
.ss-opt, .ss-none { padding: .5rem var(--sp-3); border-radius: var(--r-sm); font-size: var(--text-base); line-height: 1.3; }
.ss-opt { cursor: pointer; min-height: 2.25rem; display: flex; align-items: center; }
@media (pointer: coarse) { .ss-opt { min-height: var(--touch); } }
.ss-opt.is-active { background: rgb(var(--primary-soft)); color: rgb(var(--primary-ink)); }
.ss-opt.is-selected { font-weight: 600; }
.ss-opt.is-selected::after { content: "\2713"; margin-left: auto; padding-left: var(--sp-3); color: rgb(var(--primary)); }
.ss-opt.is-empty { color: rgb(var(--text-3)); }
.ss-opt.is-disabled { opacity: .45; cursor: not-allowed; }
.ss-opt mark { background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; text-decoration-color: rgb(var(--accent-600)); }
.ss-group { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--text-3)); }
.ss-none { color: rgb(var(--text-3)); }

/* ---------- Conta do usuário (diálogo) ---------- */
.conta-sec { display: grid; gap: var(--sp-3); }
.conta-sec + .conta-sec { padding-top: var(--sp-5); border-top: 1px solid rgb(var(--border)); }
.conta-sec h3 { font-size: var(--text-base); }
.conta-sec p.hint { margin: 0; font-size: var(--text-sm); color: rgb(var(--text-3)); }
.conta-form { display: grid; gap: var(--sp-3); }
.conta-form .actions { display: flex; justify-content: flex-end; }
.conta-msg { margin: 0; font-size: var(--text-sm); font-weight: 500; color: rgb(var(--ok-ink)); }
.conta-msg[hidden] { display: none; }
.theme-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.theme-choice button {
  display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-2); min-height: var(--touch);
  background: rgb(var(--surface)); border: 1px solid rgb(var(--field-border)); border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 500; color: rgb(var(--text));
}
.theme-choice button:hover { background: rgb(var(--surface-2)); }
.theme-choice button[aria-pressed="true"] { border-color: rgb(var(--primary)); background: rgb(var(--primary-soft)); color: rgb(var(--primary-ink)); box-shadow: inset 0 0 0 1px rgb(var(--primary)); }

/* ---------- Esqueleto de carregamento ---------- */
.skeleton { background: linear-gradient(90deg, rgb(var(--surface-2)) 25%, rgb(var(--border)) 37%, rgb(var(--surface-2)) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); min-height: 1rem; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Zona de exclusão ---------- */
.danger-zone { border: 1px solid rgb(var(--danger) / .45); border-radius: var(--r-lg); padding: var(--sp-5); display: grid; gap: var(--sp-3); background: rgb(var(--danger-soft) / .45); }

/* Ação de linha: ícone no desktop, texto no celular (rótulo continua acessível) */
@media (min-width: 768px) {
  .btn-icon-d { width: 2rem; padding: 0; }
  .btn-icon-d .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn-icon-d .icon { margin: 0; }
}
.table td .nowrap, .table .nowrap { white-space: nowrap; }

/* Coluna secundária: só aparece em telas largas (e sempre no cartão do celular) */
@media (min-width: 768px) and (max-width: 1439.98px) { .cell-hide-xl { display: none; } }

/* Envio em andamento */
.btn.is-busy { pointer-events: none; opacity: .75; position: relative; }
.btn.is-busy::after { content: ""; width: .9rem; height: .9rem; margin-left: var(--sp-2); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Linhas de formset (currais da fazenda etc.) */
.formset { display: grid; gap: var(--sp-3); }
.formset-row { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border)); border-radius: var(--r-md); }
.formset-row:has(input[id$="-DELETE"]:checked) { opacity: .55; border-style: dashed; }
.formset-row .field-check { min-height: auto; }
@media (min-width: 900px) { .formset-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) auto auto; align-items: end; } }
.formset-row textarea { min-height: var(--touch); height: var(--touch); }
@media (min-width: 768px) { .formset-row textarea { min-height: var(--control-h); height: var(--control-h); } }

/* Campo com botão embutido (mostrar senha) */
.field-affix { position: relative; }
.field-affix input { padding-right: 5.5rem !important; }
.field-affix .affix-btn { position: absolute; right: 2px; top: 2px; bottom: 2px; padding: 0 var(--sp-3); background: transparent; border: 0; border-radius: var(--r-sm); color: rgb(var(--link)); font-size: var(--text-sm); font-weight: 500; }
.field-affix .affix-btn:hover { background: rgb(var(--primary-soft)); }
.field-help ul { margin: var(--sp-1) 0 0; padding-left: 1.1rem; display: grid; gap: 2px; }

/* Utilitários de composição (substituem estilos inline) */
.stats-flush { margin: 0; }
.stats-form { max-width: 56rem; }
.stat-value-sm { font-size: var(--text-base); }
.chips-top { margin-top: var(--sp-2); }
.cell-clip { display: block; max-width: 22rem; }
.section-bar { margin-bottom: var(--sp-3); }
.section-bar .section-title { margin: 0; }
.section-gap { margin-bottom: var(--sp-5); }
.section-gap .section-title { margin: 0; }
.section-top { margin-top: var(--sp-8); }
.field-min { min-width: 14rem; }
.filters-inline { grid-template-columns: minmax(0, 1fr); }
.filters-row { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; }
.impact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.impact-list li { display: flex; justify-content: space-between; gap: var(--sp-3); border-top: 1px solid rgb(var(--border)); padding-top: var(--sp-2); }
.trato-foot-label { text-align: right; }
.brand-on-light { color: rgb(var(--text)); }
.auth-copy { color: rgb(var(--nav-muted)); }