/* ==========================================================================
   ERTEL — Componentes compartilhados
   ========================================================================== */

/* -- Botões ----------------------------------------------------------------- */

.ertel-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ertel-space-2);
  padding: var(--ertel-space-2) var(--ertel-space-4);
  border-radius: var(--ertel-radius-md);
  border: 1px solid transparent;
  font-size: var(--ertel-text-sm);
  font-weight: var(--ertel-weight-medium);
  transition: background var(--ertel-transition-fast), border-color var(--ertel-transition-fast);
}

.ertel-btn--primary {
  background: var(--ertel-primary);
  color: #fff;
}
.ertel-btn--primary:hover { background: var(--ertel-primary-hover); }

.ertel-btn--ghost {
  background: var(--ertel-primary-soft);
  border-color: var(--ertel-primary);
  color: var(--ertel-primary);
}
.ertel-btn--ghost:hover {
  background: rgba(76, 124, 255, 0.24);
  border-color: var(--ertel-primary-hover);
}
.ertel-btn--ghost:active {
  background: var(--ertel-primary);
  border-color: var(--ertel-primary);
  color: #FFFFFF;
}

.ertel-btn--danger {
  background: var(--ertel-danger);
  color: #fff;
}
.ertel-btn--danger:hover { background: #B91C1C; }

.ertel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* -- Card --------------------------------------------------------------------- */

.ertel-card {
  position: relative;
  background: linear-gradient(160deg, var(--ertel-surface), var(--ertel-canvas));
  border: 1px solid var(--ertel-border);
  border-radius: var(--ertel-radius-lg);
  box-shadow: var(--ertel-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ertel-transition-fast), border-color var(--ertel-transition-fast);
}
/* Mesmo efeito "acende" do card de módulo do Dashboard, replicado pra todo
   card do sistema -- só visual (borda + sombra realçadas), não muda nenhuma
   funcionalidade de botão existente dentro do card. */
.ertel-card:hover {
  border-color: var(--ertel-primary);
  box-shadow: var(--ertel-shadow-lg);
}

/* -- Painel Flutuante Arrastável (diferente de modal — não bloqueia a tela) ------------- */

.ertel-painel-flutuante {
  position: fixed;
  background: var(--ertel-surface);
  border-radius: var(--ertel-radius-lg);
  box-shadow: var(--ertel-shadow-lg);
  border: 1px solid var(--ertel-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ertel-painel-flutuante__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--ertel-surface-alt);
  border-bottom: 1px solid var(--ertel-border);
  cursor: move;
  user-select: none;
  flex-shrink: 0;
}
.ertel-painel-flutuante__titulo {
  font-size: var(--ertel-text-sm);
  font-weight: var(--ertel-weight-semibold);
}
.ertel-painel-flutuante__fechar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ertel-muted);
  font-size: 14px;
  width: 24px;
  height: 24px;
  border-radius: var(--ertel-radius-sm);
}
.ertel-painel-flutuante__fechar:hover {
  background: var(--ertel-border);
  color: var(--ertel-ink);
}
.ertel-painel-flutuante__corpo {
  padding: var(--ertel-space-4);
  overflow-y: auto;
}

/* -- Accordion / Collapse (opt-in, sobre qualquer card com header/body) ----------------- */

.ertel-card__header--colapsavel {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ertel-card__header--colapsavel:hover {
  background: var(--ertel-surface-alt);
}
.ertel-card__colapsar-seta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--ertel-muted);
  transition: transform var(--ertel-transition-fast);
}
.ertel-card__colapsar-seta svg {
  width: 15px;
  height: 15px;
}
.ertel-card__colapsar-seta--aberta {
  transform: rotate(90deg);
}
.ertel-card__body--colapsavel {
  overflow: hidden;
  transition: max-height var(--ertel-transition-fast), opacity var(--ertel-transition-fast), padding var(--ertel-transition-fast);
}
.ertel-card__body--colapsavel.ertel-card__body--fechado {
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
}

.ertel-visualizacao-toggle {
  display: flex;
  background: var(--ertel-surface-alt);
  border-radius: var(--ertel-radius-md);
  padding: 2px;
  gap: 2px;
}
.ertel-visualizacao-toggle__btn {
  background: none;
  border: none;
  padding: 6px 12px;
  font-size: var(--ertel-text-xs);
  font-weight: 500;
  color: var(--ertel-muted);
  border-radius: var(--ertel-radius-sm);
  cursor: pointer;
  transition: background var(--ertel-transition-fast), color var(--ertel-transition-fast);
}
.ertel-visualizacao-toggle__btn:hover {
  color: var(--ertel-ink);
}
.ertel-visualizacao-toggle__btn--ativo {
  background: var(--ertel-surface);
  color: var(--ertel-primary);
  font-weight: 600;
  box-shadow: var(--ertel-shadow-sm);
}

.ertel-card--clickable {
  cursor: pointer;
}
.ertel-card--clickable:hover {
  box-shadow: var(--ertel-shadow-md);
  border-color: var(--ertel-border-strong);
}

/* faixa lateral de criticidade — só aparece quando data-accent existe */
.ertel-card[data-accent]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
}
.ertel-card[data-accent="A"]::before { background: var(--ertel-crit-a); }
.ertel-card[data-accent="B"]::before { background: var(--ertel-crit-b); }
.ertel-card[data-accent="C"]::before { background: var(--ertel-crit-c); }

.ertel-card__header {
  padding: var(--ertel-space-4) var(--ertel-space-5) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ertel-space-3);
}

.ertel-card__body {
  padding: var(--ertel-space-4) var(--ertel-space-5);
}

.ertel-card__footer {
  padding: var(--ertel-space-3) var(--ertel-space-5);
  border-top: 1px solid var(--ertel-border);
  background: var(--ertel-surface-alt);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ertel-space-2);
}

/* -- Badge de criticidade ------------------------------------------------------- */

.ertel-badge-crit {
  display: inline-flex;
  align-items: center;
  font-size: var(--ertel-text-xs);
  font-weight: var(--ertel-weight-semibold);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ertel-badge-crit[data-crit="A"] { color: var(--ertel-crit-a); background: var(--ertel-crit-a-bg); }
.ertel-badge-crit[data-crit="B"] { color: var(--ertel-crit-b); background: var(--ertel-crit-b-bg); }
.ertel-badge-crit[data-crit="C"] { color: var(--ertel-crit-c); background: var(--ertel-crit-c-bg); }

.ertel-badge-status {
  display: inline-flex;
  align-items: center;
  font-size: var(--ertel-text-xs);
  font-weight: var(--ertel-weight-semibold);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* -- Tabs ----------------------------------------------------------------------- */

.ertel-tabs__list {
  display: flex;
  gap: var(--ertel-space-1);
  border-bottom: 1px solid var(--ertel-border);
  overflow-x: auto;
}

.ertel-tabs__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--ertel-space-3) var(--ertel-space-4);
  font-size: var(--ertel-text-sm);
  font-weight: var(--ertel-weight-medium);
  color: var(--ertel-muted);
  white-space: nowrap;
  transition: color var(--ertel-transition-fast), border-color var(--ertel-transition-fast);
}
.ertel-tabs__tab:hover {
  color: var(--ertel-ink);
}
.ertel-tabs__tab[aria-selected="true"] {
  color: var(--ertel-primary);
  border-bottom-color: var(--ertel-primary);
}

.ertel-tabs__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: var(--ertel-space-5);
}

/* -- Modal ------------------------------------------------------------------------ */

.ertel-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 20, 26, 0.45);
  z-index: 2000;
  padding: var(--ertel-space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ertel-transition-base);
}
.ertel-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ertel-modal {
  background: var(--ertel-surface);
  border-radius: var(--ertel-radius-lg);
  box-shadow: var(--ertel-shadow-lg);
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  transform: translateY(8px);
  transition: transform var(--ertel-transition-base);
}
.ertel-modal-overlay.is-open .ertel-modal {
  transform: translateY(0);
}

.ertel-modal--sm { max-width: 400px; }
.ertel-modal--md { max-width: 560px; }
.ertel-modal--lg { max-width: 840px; }

.ertel-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ertel-space-5);
  border-bottom: 1px solid var(--ertel-border);
  flex-shrink: 0;
}

.ertel-modal__title {
  font-size: var(--ertel-text-lg);
}

.ertel-modal__close {
  background: none;
  border: none;
  padding: var(--ertel-space-1);
  color: var(--ertel-muted);
  border-radius: var(--ertel-radius-sm);
}
.ertel-modal__close:hover {
  background: var(--ertel-surface-alt);
  color: var(--ertel-ink);
}

.ertel-modal__body {
  padding: var(--ertel-space-5);
  overflow-y: auto;
  font-size: var(--ertel-text-sm);
  color: var(--ertel-ink-soft);
}

.ertel-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ertel-space-2);
  padding: var(--ertel-space-4) var(--ertel-space-5);
  border-top: 1px solid var(--ertel-border);
  flex-shrink: 0;
}

/* -- KPI Card ------------------------------------------------------------------ */

.ertel-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--ertel-space-4);
  margin-bottom: var(--ertel-space-8);
}

.ertel-kpi-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ertel-space-3);
  background: linear-gradient(160deg, var(--ertel-surface), var(--ertel-canvas));
  border: 1px solid var(--ertel-border);
  border-radius: var(--ertel-radius-lg);
  padding: var(--ertel-space-4) var(--ertel-space-5);
  box-shadow: var(--ertel-shadow-sm);
  border-top: 3px solid var(--ertel-border-strong);
  transition: transform var(--ertel-transition-fast), border-color var(--ertel-transition-fast);
}
.ertel-kpi-card:hover {
  transform: translateY(-2px);
}

.ertel-kpi-card__content {
  min-width: 0;
}

.ertel-kpi-card__value {
  font-family: var(--ertel-font-mono);
  font-size: var(--ertel-text-2xl);
  font-weight: var(--ertel-weight-semibold);
  line-height: 1.1;
  color: var(--ertel-ink);
  overflow-wrap: break-word;
  word-break: break-word;
}
.ertel-kpi-card__value[data-compacto="true"] {
  font-size: var(--ertel-text-lg);
}

.ertel-kpi-card__label {
  margin-top: var(--ertel-space-1);
  font-size: var(--ertel-text-sm);
  color: var(--ertel-ink-soft);
}

.ertel-kpi-card__hint {
  margin-top: 2px;
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
}

.ertel-kpi-card__destaque {
  flex-shrink: 0;
  font-family: var(--ertel-font-mono);
  font-size: 1.75rem;
  font-weight: var(--ertel-weight-semibold);
  line-height: 1;
  color: inherit;
  opacity: 0.85;
}

.ertel-kpi-card[data-tone="crit-a"] { border-top-color: var(--ertel-crit-a); box-shadow: var(--ertel-shadow-sm), 0 -1px 12px -2px rgba(239, 68, 68, 0.55); }
.ertel-kpi-card[data-tone="crit-a"] .ertel-kpi-card__value,
.ertel-kpi-card[data-tone="crit-a"] .ertel-kpi-card__destaque { color: var(--ertel-crit-a); }
.ertel-kpi-card[data-tone="crit-b"] { border-top-color: var(--ertel-crit-b); box-shadow: var(--ertel-shadow-sm), 0 -1px 12px -2px rgba(232, 121, 30, 0.55); }
.ertel-kpi-card[data-tone="crit-b"] .ertel-kpi-card__value,
.ertel-kpi-card[data-tone="crit-b"] .ertel-kpi-card__destaque { color: var(--ertel-crit-b); }
.ertel-kpi-card[data-tone="crit-c"] { border-top-color: var(--ertel-crit-c); box-shadow: var(--ertel-shadow-sm), 0 -1px 12px -2px rgba(34, 197, 94, 0.55); }
.ertel-kpi-card[data-tone="crit-c"] .ertel-kpi-card__value,
.ertel-kpi-card[data-tone="crit-c"] .ertel-kpi-card__destaque { color: var(--ertel-crit-c); }
/* Criticidade precisa saltar aos olhos mais que os outros KPIs — só o tamanho do número muda aqui. */
.ertel-kpi-card[data-tone="crit-a"] .ertel-kpi-card__value,
.ertel-kpi-card[data-tone="crit-b"] .ertel-kpi-card__value,
.ertel-kpi-card[data-tone="crit-c"] .ertel-kpi-card__value {
  font-size: 2.5rem;
}
/* ...mas se o card pediu modo compacto de propósito (valor que pode ficar grande,
   tipo dinheiro), isso vence -- sem essa regra, "Saídas" (crit-a, usado só pela
   cor vermelha) ficava enorme e estourava a caixa. */
.ertel-kpi-card[data-tone="crit-a"] .ertel-kpi-card__value[data-compacto="true"],
.ertel-kpi-card[data-tone="crit-b"] .ertel-kpi-card__value[data-compacto="true"],
.ertel-kpi-card[data-tone="crit-c"] .ertel-kpi-card__value[data-compacto="true"] {
  font-size: var(--ertel-text-lg);
}
.ertel-kpi-card[data-tone="primary"] { border-top-color: var(--ertel-primary); box-shadow: var(--ertel-shadow-sm), 0 -1px 12px -2px rgba(76, 124, 255, 0.55); }
.ertel-kpi-card[data-tone="primary"] .ertel-kpi-card__value { color: var(--ertel-primary); }
.ertel-kpi-card[data-tone="warning"] { border-top-color: var(--ertel-warning); box-shadow: var(--ertel-shadow-sm), 0 -1px 12px -2px rgba(232, 121, 30, 0.55); }
.ertel-kpi-card[data-tone="warning"] .ertel-kpi-card__value { color: var(--ertel-warning); }
.ertel-kpi-card[data-tone="success"] { border-top-color: var(--ertel-success); box-shadow: var(--ertel-shadow-sm), 0 -1px 12px -2px rgba(34, 197, 94, 0.55); }
.ertel-kpi-card[data-tone="success"] .ertel-kpi-card__value { color: var(--ertel-success); }

/* -- Grid de gráficos do dashboard ---------------------------------------------- */

.ertel-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--ertel-space-4);
}

.ertel-chart-card {
  background: linear-gradient(160deg, var(--ertel-surface), var(--ertel-canvas));
  border: 1px solid var(--ertel-border);
  border-radius: var(--ertel-radius-lg);
  box-shadow: var(--ertel-shadow-sm);
  padding: var(--ertel-space-5);
}

.ertel-chart-card__title {
  font-size: var(--ertel-text-sm);
  font-weight: var(--ertel-weight-semibold);
  margin-bottom: var(--ertel-space-4);
}

.ertel-chart-card__canvas-wrap {
  position: relative;
  height: 240px;
}

.ertel-chart-indisponivel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  text-align: center;
  padding: var(--ertel-space-4);
  color: var(--ertel-muted);
  font-size: var(--ertel-text-xs);
}
.ertel-chart-indisponivel span:first-child {
  font-weight: var(--ertel-weight-semibold);
  color: var(--ertel-ink-soft);
}

.ertel-section-title {
  font-size: var(--ertel-text-lg);
  font-weight: var(--ertel-weight-semibold);
  margin: var(--ertel-space-2) 0 var(--ertel-space-4);
}

/* -- Gerenciador de Cadastro Simples (Tipos de Manutenção, Especialidades...) ----------- */

.ertel-cadastro-simples-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ertel-cadastro-simples-item {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-3);
  padding: 10px 14px;
  background: var(--ertel-surface);
  border: 1px solid var(--ertel-border);
  border-radius: var(--ertel-radius-md);
}
.ertel-cadastro-simples-item__cor {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.ertel-cadastro-simples-item__nome {
  flex: 1;
  font-size: var(--ertel-text-sm);
  font-weight: var(--ertel-weight-medium);
}
.ertel-cadastro-simples-item__ordem {
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  font-family: var(--ertel-font-mono);
}

/* -- Revisões (histórico de alterações campo a campo) — usado por qualquer módulo ------ */

.ertel-revisoes-lista {
  display: flex;
  flex-direction: column;
  gap: var(--ertel-space-4);
}
.ertel-revisao-card {
  padding-left: var(--ertel-space-3);
  border-left: 2px solid var(--ertel-border);
}
.ertel-revisao-card__data {
  font-family: var(--ertel-font-mono);
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  margin-bottom: var(--ertel-space-2);
}
.ertel-revisao-card__alteracoes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ertel-revisao-campo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--ertel-radius-sm);
  font-size: var(--ertel-text-sm);
  flex-wrap: wrap;
}
.ertel-revisao-campo__simbolo {
  font-family: var(--ertel-font-mono);
  font-weight: 700;
  width: 14px;
}
.ertel-revisao-campo__label {
  font-weight: var(--ertel-weight-semibold);
  flex-shrink: 0;
}
.ertel-revisao-campo__valores {
  color: var(--ertel-ink-soft);
}
.ertel-revisao-campo__valores s {
  opacity: 0.7;
}
.ertel-revisao-card__justificativa {
  font-size: var(--ertel-text-sm);
  font-style: italic;
  color: var(--ertel-ink-soft);
  background: var(--ertel-surface-alt);
  padding: 8px 10px;
  border-radius: var(--ertel-radius-sm);
  margin-top: var(--ertel-space-2);
}

/* Toggle de opções em grupo (segmented control) — período do Indicadores,
   modo de visualização da Lista de Ativos, etc. */
.ertel-toggle-group {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--ertel-surface-alt);
  border-radius: var(--ertel-radius-md);
}
.ertel-toggle-group__opcao {
  border: none;
  background: none;
  padding: 6px 14px;
  font-size: var(--ertel-text-xs);
  font-weight: var(--ertel-weight-medium);
  color: var(--ertel-muted);
  border-radius: var(--ertel-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ertel-transition-fast), color var(--ertel-transition-fast);
}
.ertel-toggle-group__opcao:hover {
  color: var(--ertel-ink);
}
.ertel-toggle-group__opcao[data-active="true"] {
  background: var(--ertel-surface);
  color: var(--ertel-ink);
  font-weight: var(--ertel-weight-semibold);
  box-shadow: var(--ertel-shadow-sm);
}

.ertel-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ertel-space-4);
  margin-bottom: var(--ertel-space-6);
  flex-wrap: wrap;
}

/* -- Search Bar ------------------------------------------------------------------ */

.ertel-search-bar {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-2);
  background: var(--ertel-surface);
  border: 1px solid var(--ertel-border);
  border-radius: var(--ertel-radius-md);
  padding: 0 var(--ertel-space-3);
  height: 38px;
  min-width: 220px;
  flex: 1;
  max-width: 420px;
  color: var(--ertel-muted);
  transition: border-color var(--ertel-transition-fast);
}
.ertel-search-bar:focus-within {
  border-color: var(--ertel-primary);
  color: var(--ertel-ink-soft);
}
.ertel-search-bar svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ertel-search-bar input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  font-size: var(--ertel-text-sm);
  color: var(--ertel-ink);
}
.ertel-search-bar__clear {
  background: none;
  border: none;
  padding: 2px;
  display: flex;
  color: var(--ertel-muted);
  border-radius: var(--ertel-radius-sm);
}
.ertel-search-bar__clear svg { width: 14px; height: 14px; }
.ertel-search-bar__clear:hover { color: var(--ertel-ink); }

/* -- Icon Button (ações de card: visualizar/editar/duplicar/excluir) ------------- */

.ertel-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--ertel-radius-sm);
  background: none;
  border: 1px solid transparent;
  color: var(--ertel-ink-soft);
}
.ertel-icon-btn svg { width: 16px; height: 16px; }
.ertel-icon-btn:hover {
  background: var(--ertel-surface-alt);
  border-color: var(--ertel-border);
  color: var(--ertel-ink);
}
.ertel-icon-btn--danger:hover {
  background: var(--ertel-crit-a-bg);
  color: var(--ertel-crit-a);
  border-color: transparent;
}

/* -- Filter Panel ------------------------------------------------------------------ */

.ertel-filter-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ertel-space-5);
}
.ertel-filter-group__title {
  font-size: var(--ertel-text-xs);
  font-weight: var(--ertel-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ertel-muted);
  margin-bottom: var(--ertel-space-2);
}
.ertel-filter-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ertel-space-2);
}
.ertel-filter-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ertel-text-sm);
  color: var(--ertel-ink-soft);
  background: var(--ertel-surface-alt);
  border: 1px solid var(--ertel-border);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  cursor: pointer;
}
.ertel-filter-option:has(input:checked) {
  background: var(--ertel-primary-soft);
  border-color: var(--ertel-primary);
  color: var(--ertel-primary);
}
.ertel-filter-option input {
  accent-color: var(--ertel-primary);
}

/* -- Empty State --------------------------------------------------------------------- */

.ertel-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ertel-space-12) var(--ertel-space-5);
  color: var(--ertel-muted);
}
.ertel-empty-state__icon {
  width: 44px;
  height: 44px;
  color: var(--ertel-border-strong);
  margin-bottom: var(--ertel-space-4);
}
.ertel-empty-state__icon svg { width: 100%; height: 100%; }
.ertel-empty-state__title {
  font-size: var(--ertel-text-lg);
  font-weight: var(--ertel-weight-semibold);
  color: var(--ertel-ink);
}
.ertel-empty-state__description {
  font-size: var(--ertel-text-sm);
  margin-top: 4px;
  max-width: 380px;
}
.ertel-empty-state__actions {
  display: flex;
  gap: var(--ertel-space-2);
  margin-top: var(--ertel-space-5);
}

/* -- Form Field --------------------------------------------------------------------- */

.ertel-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ertel-space-4) var(--ertel-space-4);
}

.ertel-field--wide {
  grid-column: 1 / -1;
}

.ertel-field__label {
  display: block;
  font-size: var(--ertel-text-xs);
  font-weight: var(--ertel-weight-medium);
  color: var(--ertel-ink-soft);
  margin-bottom: 6px;
}

.ertel-field__required {
  color: var(--ertel-crit-a);
}

.ertel-field__hint {
  color: var(--ertel-muted);
  font-weight: 400;
  font-style: italic;
}

.ertel-field__input:disabled {
  background: var(--ertel-surface-alt);
  color: var(--ertel-muted);
  cursor: not-allowed;
}

.ertel-field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.ertel-field__input {
  width: 100%;
  border: 1px solid var(--ertel-border-form);
  border-radius: var(--ertel-radius-md);
  padding: var(--ertel-space-2) var(--ertel-space-3);
  font-size: var(--ertel-text-sm);
  background: var(--ertel-surface);
  color: var(--ertel-ink);
  transition: border-color var(--ertel-transition-fast);
}
.ertel-field__input:focus {
  outline: none;
  border-color: var(--ertel-primary);
}
textarea.ertel-field__input {
  resize: vertical;
  min-height: 72px;
}

.ertel-field__unit {
  position: absolute;
  right: var(--ertel-space-3);
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  pointer-events: none;
}

/* Botão "olhinho" pra alternar type="password"/"text" -- genérico, pra
   qualquer campo de senha do sistema (login, Controle de Acesso, etc.)
   reaproveitar sem duplicar CSS. O campo que usa o botão precisa da
   classe --com-toggle pra abrir espaço à direita e o texto não ficar
   por baixo do ícone. */
.ertel-field__input--com-toggle {
  padding-right: calc(var(--ertel-space-3) + 28px);
}
.ertel-field__toggle-senha {
  position: absolute;
  right: var(--ertel-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--ertel-muted);
  cursor: pointer;
  border-radius: var(--ertel-radius-sm);
  transition: color var(--ertel-transition-fast), background var(--ertel-transition-fast);
}
.ertel-field__toggle-senha:hover {
  color: var(--ertel-ink);
  background: var(--ertel-surface-alt);
}
.ertel-field__toggle-senha svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* A seta nativa de incrementar/decrementar do navegador (campo type="number")
   sempre fica na borda direita -- exatamente onde o rótulo de unidade acima
   (min, dias, kg...) também fica posicionado, causando sobreposição visual.
   Removida em todo o sistema -- digitar o número direto continua funcionando
   normalmente, só não tem mais a setinha por cima do texto. */
.ertel-field__input[type="number"]::-webkit-outer-spin-button,
.ertel-field__input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ertel-field__input[type="number"] {
  -moz-appearance: textfield;
}

/* -- File Uploader ------------------------------------------------------------------- */

.ertel-uploader__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ertel-space-2);
  padding: var(--ertel-space-8) var(--ertel-space-4);
  border: 1.5px dashed var(--ertel-border-strong);
  border-radius: var(--ertel-radius-lg);
  color: var(--ertel-muted);
  font-size: var(--ertel-text-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ertel-transition-fast), background var(--ertel-transition-fast);
}
.ertel-uploader__dropzone:hover {
  border-color: var(--ertel-primary);
  background: var(--ertel-primary-soft);
  color: var(--ertel-primary);
}
.ertel-uploader__dropzone svg {
  width: 26px;
  height: 26px;
}

.ertel-uploader__list {
  margin-top: var(--ertel-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--ertel-space-2);
}

.ertel-uploader__item {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-2);
  padding: var(--ertel-space-2) var(--ertel-space-3);
  border: 1px solid var(--ertel-border);
  border-radius: var(--ertel-radius-md);
  font-size: var(--ertel-text-sm);
}
.ertel-uploader__item svg {
  width: 16px;
  height: 16px;
  color: var(--ertel-muted);
  flex-shrink: 0;
}
.ertel-uploader__item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ertel-uploader__item-size {
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
}

/* -- Import Wizard: lista de erros --------------------------------------------------- */

.ertel-import-errors {
  margin-top: var(--ertel-space-4);
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--ertel-crit-a-bg);
  background: var(--ertel-crit-a-bg);
  border-radius: var(--ertel-radius-md);
  padding: var(--ertel-space-3) var(--ertel-space-4);
  font-size: var(--ertel-text-xs);
  color: var(--ertel-crit-a);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* -- Ficha (genérico — usado por Ativos e Ordens de Serviço) -------------------------- */

.ertel-ficha-tabs {
  padding: var(--ertel-space-2) var(--ertel-space-5) var(--ertel-space-6);
}

.ertel-ficha-actions {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-2);
  flex-wrap: wrap;
  margin-top: var(--ertel-space-5);
  padding-top: var(--ertel-space-5);
  border-top: 1px solid var(--ertel-border);
}

/* -- Toast --------------------------------------------------------------------------- */

.ertel-toast-container {
  position: fixed;
  bottom: var(--ertel-space-5);
  right: var(--ertel-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ertel-space-2);
  z-index: 200;
}

.ertel-toast {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-2);
  /* Antes usava `background: var(--ertel-ink); color: #fff;` -- `--ertel-ink`
     é o token de COR DE TEXTO do tema (claro/quase-branco nos 7 temas
     escuros, que são o padrão do sistema), nunca uma cor de fundo. Isso
     deixava o toast com fundo quase branco e texto branco fixo por cima --
     ilegível em qualquer tema escuro (reportado pelo usuário com print).
     Corrigido pros mesmos papéis de token que Modal/Card já usam:
     `--ertel-surface-alt` (fundo) + `--ertel-ink` (texto), sempre com
     contraste correto, em qualquer um dos 8 temas. */
  background: var(--ertel-surface-alt);
  color: var(--ertel-ink);
  border: 1px solid var(--ertel-border);
  padding: var(--ertel-space-3) var(--ertel-space-4);
  border-radius: var(--ertel-radius-md);
  box-shadow: var(--ertel-shadow-lg);
  font-size: var(--ertel-text-sm);
  max-width: 360px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--ertel-transition-base), transform var(--ertel-transition-base);
}
.ertel-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ertel-toast__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ertel-toast--success .ertel-toast__icon { color: #4ADE80; }
.ertel-toast--error .ertel-toast__icon { color: #F87171; }
.ertel-toast--info .ertel-toast__icon { color: #93C5FD; }

@media (max-width: 480px) {
  .ertel-toast-container {
    left: var(--ertel-space-3);
    right: var(--ertel-space-3);
  }
  .ertel-toast {
    max-width: none;
  }
}

/* -- Filtro de múltipla seleção compacto (dropdown com checkbox) -------------- */
/* Componente compartilhado -- `shared/components/filtro-multi-select.js`.
   <details>/<summary> em vez de <select multiple> (visual ruim de Ctrl/Cmd
   em qualquer navegador) -- usado hoje pelos filtros de Fábrica/Setor/
   Complexo Industrial da Programação e Área/Tipo de Manutenção do
   Cronograma Anual. */

.ertel-filtro-multi {
  position: relative;
}
.ertel-filtro-multi__resumo {
  list-style: none;
  cursor: pointer;
  font-size: var(--ertel-text-sm);
  padding: 6px 12px;
  border: 1px solid var(--ertel-border);
  border-radius: var(--ertel-radius-sm);
  background: var(--ertel-surface);
  color: var(--ertel-ink);
  white-space: nowrap;
}
.ertel-filtro-multi__resumo::-webkit-details-marker {
  display: none;
}
.ertel-filtro-multi[open] .ertel-filtro-multi__resumo {
  border-color: var(--ertel-primary);
}
.ertel-filtro-multi__painel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--ertel-surface);
  border: 1px solid var(--ertel-border);
  border-radius: var(--ertel-radius-sm);
  box-shadow: var(--ertel-shadow-md);
  padding: 6px;
}
.ertel-filtro-multi__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: var(--ertel-text-sm);
  cursor: pointer;
  border-radius: var(--ertel-radius-sm);
  white-space: nowrap;
}
.ertel-filtro-multi__item:hover {
  background: var(--ertel-surface-alt);
}