/* ============================================
   ECOVISION IA — Condicionantes CSS
   Estilos exclusivos da página de condicionantes
   ============================================ */

/* ============================================
   HEADER DA PÁGINA
   ============================================ */
.cond-header {
  margin-bottom: var(--espaco-4);
}

.cond-titulo {
  margin-bottom: var(--espaco-4);
}

.cond-titulo h2 {
  font-size: var(--tamanho-xl);
  font-weight: var(--peso-bold);
  color: var(--cor-texto);
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: 0;
}

.cond-titulo h2 i {
  color: var(--cor-atencao);
}

/* ============================================
   PROGRESSO GERAL
   ============================================ */
.cond-progresso-geral {
  background: var(--cor-branca);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio-lg);
  padding: var(--espaco-4);
  margin-bottom: var(--espaco-4);
}

.progresso-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--espaco-2);
}

.progresso-label-texto {
  font-size: var(--tamanho-sm);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto);
}

.progresso-porcentagem {
  font-size: var(--tamanho-lg);
  font-weight: var(--peso-bold);
  color: var(--cor-sucesso);
}

.progresso-detalhes {
  display: flex;
  justify-content: space-between;
  margin-top: var(--espaco-2);
  font-size: var(--tamanho-xs);
  color: var(--cor-texto-terciario);
}

/* ============================================
   LISTA DE CONDICIONANTES
   ============================================ */
.cond-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

/* Card de condicionante */
.cond-card {
  background: var(--cor-branca);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio-lg);
  padding: var(--espaco-4);
  transition: all var(--transicao-media);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
}

.cond-card:hover {
  box-shadow: var(--sombra-md);
  border-color: var(--cor-borda);
}

.cond-card.concluida {
  opacity: 0.7;
}

.cond-card.concluida .cond-descricao {
  text-decoration: line-through;
  color: var(--cor-texto-terciario);
}

.cond-card.atrasada {
  border-left: 3px solid var(--cor-perigo);
  background: var(--cor-perigo-fundo);
}

/* Checkbox customizado */
.cond-checkbox {
  flex-shrink: 0;
  margin-top: 2px;
}

.cond-checkbox input[type="checkbox"] {
  display: none;
}

.cond-checkmark {
  width: 22px;
  height: 22px;
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transicao-rapida);
  background: var(--cor-branca);
}

.cond-checkmark:hover {
  border-color: var(--cor-sucesso);
}

.cond-checkbox input:checked + .cond-checkmark {
  background: var(--cor-sucesso);
  border-color: var(--cor-sucesso);
}

.cond-checkbox input:checked + .cond-checkmark::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: white;
  font-size: 0.7rem;
}

/* Conteúdo */
.cond-conteudo {
  flex: 1;
  min-width: 0;
}

.cond-descricao {
  font-size: var(--tamanho-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
  margin-bottom: var(--espaco-2);
  line-height: 1.5;
}

.cond-meta {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  flex-wrap: wrap;
}

.cond-licenca {
  font-size: var(--tamanho-xs);
  color: var(--cor-texto-terciario);
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  background: var(--cor-fundo);
  padding: 2px 8px;
  border-radius: var(--raio-full);
}

.cond-data {
  font-size: var(--tamanho-xs);
  font-weight: var(--peso-medio);
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: 2px 8px;
  border-radius: var(--raio-full);
}

.cond-data.no-prazo {
  color: var(--cor-sucesso);
  background: var(--cor-sucesso-fundo);
}

.cond-data.proximo {
  color: var(--cor-atencao);
  background: var(--cor-atencao-fundo);
}

.cond-data.atrasado {
  color: var(--cor-perigo);
  background: var(--cor-perigo-fundo);
}

.cond-responsavel {
  font-size: var(--tamanho-xs);
  color: var(--cor-texto-terciario);
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
}

/* Prioridade */
.cond-prioridade {
  flex-shrink: 0;
}

.prioridade-badge {
  font-size: var(--tamanho-xs);
  padding: 4px 10px;
  border-radius: var(--raio-full);
  font-weight: var(--peso-semibold);
  white-space: nowrap;
}

.prioridade-badge.critica {
  background: var(--cor-perigo-fundo);
  color: var(--cor-perigo);
}

.prioridade-badge.alta {
  background: #fee2e2;
  color: #dc2626;
}

.prioridade-badge.media {
  background: var(--cor-atencao-fundo);
  color: #92400e;
}

.prioridade-badge.baixa {
  background: var(--cor-info-fundo);
  color: #1e40af;
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 767px) {
  .cond-card {
    flex-wrap: wrap;
  }

  .cond-prioridade {
    width: 100%;
    margin-top: var(--espaco-2);
  }

  .cond-meta {
    gap: var(--espaco-2);
  }
}