/**
 * ESTILOS PARA MENSAGENS DE ERRO DE VALIDAÇÃO
 * Fornece feedback visual claro ao usuário sobre erros de entrada
 */

/* ============================================================
   ESTADOS DE INPUT COM ERRO
   ============================================================ */

input.input-erro,
textarea.input-erro,
select.input-erro {
  border-color: #dc2626 !important;
  background-color: rgba(220, 38, 38, 0.05);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

input.input-erro:focus,
textarea.input-erro:focus,
select.input-erro:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
  outline: none;
}

/* ============================================================
   ELEMENTOS DE FEEDBACK DE ERRO
   ============================================================ */

.erro-feedback {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border-left: 3px solid #dc2626;
  animation: slideInError 0.2s ease-out;
}

@keyframes slideInError {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.erro-feedback::before {
  content: '⚠ ';
  font-weight: bold;
  margin-right: 0.3rem;
}

/* ============================================================
   CAMPOS COM SUCESSO (VALIDAÇÃO PASSOU)
   ============================================================ */

input.input-valido,
textarea.input-valido,
select.input-valido {
  border-color: #10b981;
  background-color: rgba(16, 185, 129, 0.02);
}

input.input-valido:focus,
textarea.input-valido:focus,
select.input-valido:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

.validacao-sucesso {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: #10b981;
  padding: 0.3rem 0.75rem;
  animation: slideInSuccess 0.2s ease-out;
}

.validacao-sucesso::before {
  content: '✓ ';
  font-weight: bold;
}

@keyframes slideInSuccess {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   DICAS E AJUDA INLINE
   ============================================================ */

.campo-dica,
.field-hint,
.hint-text {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #6b7280;
  font-style: italic;
}

/* ============================================================
   WRAPPER DE CAMPO COM ESTADO
   ============================================================ */

.form-group.com-erro input,
.form-group.com-erro textarea,
.form-group.com-erro select {
  border-color: #dc2626;
}

.form-group.com-sucesso input,
.form-group.com-sucesso textarea,
.form-group.com-sucesso select {
  border-color: #10b981;
}

/* ============================================================
   ALERTAS GLOBAIS DE FORMULÁRIO
   ============================================================ */

.alerta-validacao-global {
  display: none;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid;
  font-weight: 500;
  animation: slideInError 0.3s ease-out;
}

.alerta-validacao-global.erro {
  background-color: rgba(220, 38, 38, 0.1);
  border-color: #dc2626;
  color: #991b1b;
}

.alerta-validacao-global.aviso {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
  color: #92400e;
}

.alerta-validacao-global.sucesso {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: #10b981;
  color: #065f46;
}

.alerta-validacao-global.info {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  color: #1e3a8a;
}

/* ============================================================
   LISTA DE ERROS
   ============================================================ */

.lista-erros {
  display: none;
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 8px;
}

.lista-erros.visivel {
  display: block;
}

.lista-erros h3 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: #dc2626;
  font-weight: 600;
}

.lista-erros ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-erros li {
  padding: 0.5rem 0;
  color: #7f1d1d;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(220, 38, 38, 0.2);
}

.lista-erros li:last-child {
  border-bottom: none;
}

.lista-erros li::before {
  content: '✗ ';
  margin-right: 0.5rem;
  font-weight: bold;
}

/* ============================================================
   CAMPO OBRIGATÓRIO - MARCAÇÃO
   ============================================================ */

.campo-obrigatorio::after {
  content: ' *';
  color: #dc2626;
  font-weight: bold;
}

.texto-obrigatorio {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.2rem;
}

/* ============================================================
   INDICADOR DE FORÇA DE SENHA
   ============================================================ */

.indicador-forca-senha {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.indicador-forca-senha.visivel {
  display: block;
}

.forca-barra {
  width: 100%;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.forca-preenchimento {
  height: 100%;
  width: 0%;
  transition: width 0.3s ease, background-color 0.3s ease;
  background-color: #ef4444;
}

.forca-preenchimento.fraca {
  width: 25%;
  background-color: #ef4444;
}

.forca-preenchimento.media {
  width: 50%;
  background-color: #f59e0b;
}

.forca-preenchimento.boa {
  width: 75%;
  background-color: #3b82f6;
}

.forca-preenchimento.otima {
  width: 100%;
  background-color: #10b981;
}

.forca-texto {
  font-weight: 500;
}

.forca-texto.fraca {
  color: #dc2626;
}

.forca-texto.media {
  color: #f59e0b;
}

.forca-texto.boa {
  color: #3b82f6;
}

.forca-texto.otima {
  color: #10b981;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .erro-feedback {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }

  .lista-erros {
    padding: 0.75rem;
  }

  .alerta-validacao-global {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
}

/* ============================================================
   DARK MODE ADAPTATION
   ============================================================ */

@media (prefers-color-scheme: dark) {
  input.input-erro,
  textarea.input-erro,
  select.input-erro {
    border-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
  }

  .erro-feedback {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.15);
    border-left-color: #f87171;
  }

  .lista-erros {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
  }

  .lista-erros h3 {
    color: #fecaca;
  }

  .lista-erros li {
    color: #fee2e2;
  }

  .campo-dica {
    color: #9ca3af;
  }
}