/* ==========================================================================
   ERTEL — Módulo Planos
   ========================================================================== */

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

.ertel-plano-card .ertel-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ertel-space-3);
  padding-bottom: var(--ertel-space-3);
  border-bottom: 1px solid var(--ertel-border);
}

.ertel-plano-card__nome {
  font-weight: var(--ertel-weight-semibold);
  font-size: var(--ertel-text-sm);
  line-height: 1.3;
}
.ertel-plano-card__sub {
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  margin-top: 3px;
}

.ertel-plano-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
}
.ertel-plano-card__meta strong {
  color: var(--ertel-ink);
  font-family: var(--ertel-font-mono);
  font-weight: var(--ertel-weight-semibold);
}

.ertel-plano-card .ertel-card__footer {
  gap: var(--ertel-space-2);
  flex-wrap: wrap;
}
.ertel-plano-card__footer-spacer {
  flex: 1;
}

@media (max-width: 480px) {
  .ertel-plano-grid {
    grid-template-columns: 1fr;
  }
}

/* -- Criticidade do equipamento, destacada no cabeçalho do Plano ------------------------- */

.ertel-plano-criticidade-ativo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ertel-space-2);
  margin-top: var(--ertel-space-3);
  padding: var(--ertel-space-3) var(--ertel-space-4);
  background: var(--ertel-surface-alt);
  border-radius: var(--ertel-radius-md);
  font-size: var(--ertel-text-sm);
}
.ertel-plano-criticidade-ativo p {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
}

/* -- Seletor de Atividades (dentro da ficha do Plano) ------------------------------------ */

.ertel-atividade-selector {
  display: block;
  width: 100%;
}

.ertel-atividade-selector__resultados {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--ertel-space-2);
  max-height: 220px;
  overflow-y: auto;
}
.ertel-atividade-selector__resultado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ertel-space-3);
  padding: 8px 12px;
  background: var(--ertel-surface-alt);
  border: 1px solid transparent;
  border-radius: var(--ertel-radius-sm);
  font-size: var(--ertel-text-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ertel-transition-fast);
  width: 100%;
  box-sizing: border-box;
}
.ertel-atividade-selector__resultado:hover {
  border-color: var(--ertel-primary);
}
/* Nome em linha única, aproveitando toda a largura disponível (a causa
   real de "quebra de linha e espaço sobrando" era a classe vazada do
   painel de abas -- ver tabs.js -- não a ausência deste CSS; mesmo assim,
   um nome muito comprido não deve voltar a quebrar linha nem empurrar a
   categoria pra fora, então corta com reticências). */
.ertel-atividade-selector__resultado > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ertel-atividade-selector__resultado-cat {
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  flex-shrink: 0;
}

.ertel-atividade-selector__sequencia {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ertel-atividade-selector__item {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-3);
  padding: 8px 12px;
  background: var(--ertel-surface-alt);
  border-radius: var(--ertel-radius-sm);
  font-size: var(--ertel-text-sm);
}
.ertel-atividade-selector__ordem {
  font-family: var(--ertel-font-mono);
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  flex-shrink: 0;
  width: 18px;
}
.ertel-atividade-selector__nome {
  flex: 1;
  min-width: 0;
}

/* -- Central de Programação --------------------------------------------------------- */

.ertel-programacao-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ertel-space-3);
  margin-bottom: var(--ertel-space-4);
}
.ertel-programacao-toolbar__selecionar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ertel-text-sm);
  color: var(--ertel-ink-soft);
}
.ertel-programacao-toolbar .ertel-btn {
  width: auto;
}

.ertel-programacao-lista {
  display: flex;
  flex-direction: column;
  gap: var(--ertel-space-2);
}

.ertel-programacao-row {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-4);
  padding: var(--ertel-space-4);
  background: var(--ertel-surface);
  border: 1px solid var(--ertel-border);
  border-left: 3px solid var(--ertel-border-strong);
  border-radius: var(--ertel-radius-md);
  box-shadow: var(--ertel-shadow-sm);
  flex-wrap: wrap;
}
.ertel-programacao-row[data-urgencia="vencido"] {
  border-left-color: var(--ertel-crit-a);
}
.ertel-programacao-row[data-urgencia="vence-breve"] {
  border-left-color: var(--ertel-crit-b);
}

.ertel-programacao-row__info {
  flex: 1;
  min-width: 200px;
}
.ertel-programacao-row__nome {
  font-weight: var(--ertel-weight-semibold);
  font-size: var(--ertel-text-sm);
}
.ertel-programacao-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
}

.ertel-programacao-row__prazo {
  font-size: var(--ertel-text-sm);
  font-weight: var(--ertel-weight-semibold);
  white-space: nowrap;
}
.ertel-programacao-row__prazo[data-urgencia="vencido"] {
  color: var(--ertel-crit-a);
}
.ertel-programacao-row__prazo[data-urgencia="vence-breve"] {
  color: var(--ertel-crit-b);
}

.ertel-programacao-row .ertel-btn {
  width: auto;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .ertel-programacao-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* -- Assistente de Criação de Plano ------------------------------------------------------- */

.ertel-assistente-componente {
  padding: var(--ertel-space-4);
  margin-bottom: var(--ertel-space-4);
}
.ertel-assistente-componente__topo {
  margin-bottom: var(--ertel-space-2);
}
.ertel-assistente-componente__nome {
  font-size: var(--ertel-text-base);
  font-weight: var(--ertel-weight-semibold);
}
.ertel-assistente-componente__classe {
  font-size: var(--ertel-text-xs);
  color: var(--ertel-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ertel-assistente-modos {
  margin: var(--ertel-space-3) 0;
  background: var(--ertel-surface-alt);
  border-radius: var(--ertel-radius-md);
  padding: var(--ertel-space-3);
}
.ertel-assistente-modos summary {
  cursor: pointer;
  font-size: var(--ertel-text-sm);
  font-weight: 600;
}
.ertel-assistente-modos__lista {
  margin-top: var(--ertel-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--ertel-space-3);
}
.ertel-assistente-modo {
  background: var(--ertel-surface);
  border-radius: var(--ertel-radius-sm);
  padding: var(--ertel-space-3);
}
.ertel-assistente-modo__nome {
  font-size: var(--ertel-text-sm);
  font-weight: 700;
  color: var(--ertel-crit-a);
  margin-bottom: 6px;
}
.ertel-assistente-modo dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 4px 10px;
  margin: 0;
}
.ertel-assistente-modo dt {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--ertel-muted);
}
.ertel-assistente-modo dd {
  font-size: var(--ertel-text-xs);
  margin: 0;
}

.ertel-assistente-atividades__titulo {
  font-size: var(--ertel-text-sm);
  font-weight: 600;
  margin: var(--ertel-space-3) 0 var(--ertel-space-2);
}
.ertel-assistente-atividades__nota {
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  font-style: italic;
  padding: var(--ertel-space-2) 0;
}
.ertel-lmf-sugestoes-clicaveis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ertel-lmf-sugestao-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ertel-primary-soft);
  color: var(--ertel-primary);
  border: none;
  font-size: var(--ertel-text-xs);
  font-weight: 600;
  cursor: pointer;
}
.ertel-lmf-sugestao-chip:hover {
  background: var(--ertel-primary);
  color: #fff;
}
.ertel-assistente-atividade-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--ertel-border);
  cursor: pointer;
}
.ertel-assistente-atividade-item:last-child {
  border-bottom: none;
}
.ertel-assistente-atividade-item input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ertel-assistente-atividade-item span strong {
  display: block;
  font-size: var(--ertel-text-sm);
}
.ertel-assistente-atividade-item__meta {
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
}

.ertel-assistente-resumo {
  border-left: 3px solid var(--ertel-primary);
}

.ertel-assistente-politica {
  background: var(--ertel-primary-soft);
  color: var(--ertel-primary);
  font-size: var(--ertel-text-sm);
  padding: var(--ertel-space-3) var(--ertel-space-4);
  border-radius: var(--ertel-radius-md);
  margin-bottom: var(--ertel-space-4);
}

.ertel-plano-bloqueado-aviso {
  background: var(--ertel-crit-b-bg);
  color: var(--ertel-warning);
  font-size: var(--ertel-text-sm);
  padding: var(--ertel-space-3) var(--ertel-space-4);
  border-radius: var(--ertel-radius-md);
  line-height: 1.5;
}

.ertel-assistente-perguntas {
  padding: var(--ertel-space-4);
  margin-bottom: var(--ertel-space-4);
}
.ertel-assistente-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ertel-space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--ertel-border);
  font-size: var(--ertel-text-sm);
}
.ertel-assistente-pergunta:last-child {
  border-bottom: none;
}
.ertel-assistente-pergunta__botoes {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.ertel-assistente-pergunta__botoes .ertel-btn {
  width: auto;
}

/* -- Assistente v2 — sistemas, quantidade, ação personalizada --------------------------- */

.ertel-assistente-sistemas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ertel-assistente-sistema-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ertel-surface-alt);
  font-size: var(--ertel-text-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--ertel-transition-fast), background var(--ertel-transition-fast);
}
.ertel-assistente-sistema-chip--ativo {
  border-color: var(--ertel-primary);
  background: var(--ertel-primary-soft);
  color: var(--ertel-primary);
  font-weight: 600;
}
.ertel-assistente-sistema-chip input {
  cursor: pointer;
}

.ertel-assistente-itens-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--ertel-space-3);
}
.ertel-assistente-item-qtd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--ertel-border);
  font-size: var(--ertel-text-sm);
}
.ertel-assistente-item-qtd:last-child {
  border-bottom: none;
}
.ertel-assistente-item-qtd em {
  color: var(--ertel-muted);
  font-style: normal;
  font-size: 11px;
}
.ertel-assistente-item-qtd input[type="number"] {
  text-align: center;
}

.ertel-assistente-qtd-badge {
  display: inline-block;
  background: var(--ertel-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

.ertel-assistente-atividade-item--custom {
  background: var(--ertel-primary-soft);
  border-radius: var(--ertel-radius-sm);
  padding-left: 8px;
  position: relative;
}
.ertel-assistente-atividade-item--custom [data-remover-personalizada] {
  margin-left: auto;
  flex-shrink: 0;
}

.ertel-assistente-cadastrar-filho {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--ertel-space-4);
  padding-top: var(--ertel-space-3);
  border-top: 1px solid var(--ertel-border);
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  cursor: pointer;
}

/* -- Levantamento de Modos de Falha (aba dentro do Plano Modelo) ------------------------ */

.ertel-lmf-selecao {
  padding: var(--ertel-space-4);
  border: 2px dashed var(--ertel-primary);
}
.ertel-lmf-selecao__titulo {
  font-size: var(--ertel-text-sm);
  font-weight: 600;
  margin-bottom: var(--ertel-space-3);
}
.ertel-lmf-itens-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--ertel-space-3);
}
.ertel-lmf-item-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--ertel-radius-md);
  background: var(--ertel-surface-alt);
  font-size: var(--ertel-text-sm);
  cursor: pointer;
  border: 2px solid transparent;
}
.ertel-lmf-item-chip:has(input:checked) {
  border-color: var(--ertel-primary);
  background: var(--ertel-primary-soft);
  color: var(--ertel-primary);
  font-weight: 600;
}
.ertel-lmf-outros {
  display: flex;
  gap: 8px;
}
.ertel-lmf-outros .ertel-field__input {
  flex: 1;
}
.ertel-lmf-outros-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ertel-lmf-outros-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ertel-primary-soft);
  color: var(--ertel-primary);
  font-size: var(--ertel-text-xs);
  font-weight: 600;
}
.ertel-lmf-outros-tag button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

.ertel-lmf-grupo-fonte {
  margin-bottom: var(--ertel-space-3);
}
.ertel-lmf-grupo-fonte__titulo {
  font-size: var(--ertel-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ertel-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.ertel-lmf-grupo-fonte__itens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ertel-lmf-item-salvo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--ertel-radius-md);
  background: var(--ertel-surface-alt);
  font-size: var(--ertel-text-sm);
}
.ertel-lmf-item-salvo em {
  color: var(--ertel-muted);
  font-style: normal;
  font-size: 11px;
}
.ertel-lmf-item-salvo button {
  border: none;
  background: none;
  color: var(--ertel-crit-a);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

/* -- Fila de Geração e Tela de Alarme (compartilham o mesmo item) -------------------------- */

.ertel-fila-lista {
  display: flex;
  flex-direction: column;
  gap: var(--ertel-space-3);
}
.ertel-fila-item {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-3);
  padding: var(--ertel-space-3) var(--ertel-space-4);
  background: var(--ertel-surface);
  border-radius: var(--ertel-radius-lg);
  box-shadow: var(--ertel-shadow-sm);
}
.ertel-fila-item--alarme {
  border-left: 4px solid var(--ertel-crit-a);
}
.ertel-fila-item__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--ertel-text-sm);
}
.ertel-fila-item__corpo span {
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
}
.ertel-fila-item__periodicidade {
  font-weight: 600;
}

/* -- Calendário Anual de Frequência ---------------------------------------------------------- */

.ertel-calendario-anual-secao-titulo {
  font-size: var(--ertel-text-lg);
  font-weight: 700;
  margin: var(--ertel-space-6) 0 var(--ertel-space-3);
}
.ertel-calendario-anual-lista {
  display: flex;
  flex-direction: column;
  gap: var(--ertel-space-4);
}
.ertel-calendario-anual-bloco {
  padding: var(--ertel-space-4);
}
.ertel-calendario-anual-bloco__equipamento {
  font-size: var(--ertel-text-lg);
  font-weight: 800;
  color: var(--ertel-primary);
  margin-bottom: var(--ertel-space-3);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ertel-border);
}
.ertel-calendario-anual-plano {
  padding: 10px 0;
  border-bottom: 1px solid var(--ertel-border);
}
.ertel-calendario-anual-plano:last-child {
  border-bottom: none;
}
.ertel-calendario-anual-plano__nome {
  font-weight: 700;
  font-size: var(--ertel-text-sm);
  color: var(--ertel-ink);
  text-decoration: none;
}
.ertel-calendario-anual-plano__periodicidade {
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  margin-left: 8px;
}
.ertel-calendario-anual-plano__datas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ertel-calendario-anual-plano__datas span {
  font-size: var(--ertel-text-xs);
  background: var(--ertel-surface-alt);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ertel-ink-soft);
}

/* -- Atalhos do Dashboard — Fila de Geração e Alarme, só aparecem quando tem algo -------- */

.ertel-planos-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ertel-space-3);
  margin-bottom: var(--ertel-space-4);
}
.ertel-planos-atalho-card {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-3);
  padding: var(--ertel-space-4);
  border-radius: var(--ertel-radius-lg);
  text-decoration: none;
  box-shadow: var(--ertel-shadow-sm);
}
.ertel-planos-atalho-card--fila {
  background: var(--ertel-warning-bg, #FEF3C7);
  border-left: 4px solid var(--ertel-warning);
}
.ertel-planos-atalho-card--alarme {
  background: var(--ertel-crit-a-bg, #FEE2E2);
  border-left: 4px solid var(--ertel-crit-a);
}
.ertel-planos-atalho-card__numero {
  font-size: 28px;
  font-weight: 800;
  color: var(--ertel-ink);
  flex-shrink: 0;
}
.ertel-planos-atalho-card__label {
  font-size: var(--ertel-text-sm);
  font-weight: 600;
  color: var(--ertel-ink);
}