/* ==========================================================================
   ELEMENTOS PADRÃO DE UI (Botões, Inputs, Selects)
   ========================================================================== */

/* --- CONFIGURAÇÃO BASE DE BOTÕES --- */
.btn {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
    
}

.btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* --- TIPOS DE BOTÃO (Formato) --- */

/* Botão com Label (Texto + Icone) */
.btn.label {
    padding: 10px 20px;
    gap: 8px; /* Espaço entre icone e texto */
    font-weight: 600;
}

/* Botão Apenas Ícone (Quadrado/Redondo) */
.btn.icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%; /* Opcional: 4px para quadrado, 50% para redondo */
    font-size: 1rem;
    background: none;
}

/* ==========================================================================
   INPUTS E SELECTS
   ========================================================================== */

.campo-input, .campo-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.campo-input:focus, .campo-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); /* Glow suave */
}

/* --- ESTILOS ESPECÍFICOS DE INPUT --- */

/* Input de Lista (Para uso dentro de tabelas/grids) 
   Remove bordas para limpar o visual, mostra apenas ao focar/passar mouse */

.campo-input.list:hover {
    border-color: var(--border-color);
    background-color: var(--input-bg);
}
.campo-input.list:focus {
    border-color: var(--color-accent);
    background-color: var(--input-bg);
}

/* Input Numérico (Alinhado à direita para valores monetários/qtd) */
.campo-input.number {
    text-align: right;
    font-family: 'Consolas', 'Monaco', monospace; /* Fonte monoespaçada ajuda a alinhar numeros */
}

/* Select customizado (Remove seta padrão do navegador e põe uma bonita) */
.campo-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 10px auto;
    padding-right: 30px; /* Espaço para a seta */
}

/* ... (Mantenha o código base de .btn, .btn.label, .btn.icon) ... */

/* --- CORES E MAPEAMENTO SEMÂNTICO --- */

/* 1. PRIMÁRIOS (Ação Principal / Adicionar / Iniciar) - Azul Escuro/Brand */

/* ... (Mantenha o código de botões anterior) ... */

/* ==========================================================================
   FORMULÁRIOS E CAMPOS
   ========================================================================== */

/* Wrapper para Label + Input (Espaçamento Padrão) */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

/* Estilo do Label */
.form-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}
.form-label small {
    font-weight: normal;
    font-size: 0.8rem;
    color: #999;
}

/* --- TEXTAREA --- */
.campo-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    
    min-height: 100px; /* Altura mínima */
    resize: vertical;  /* Permite redimensionar apenas altura */
    font-family: inherit;
}

.campo-textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* --- ESTADOS DE VALIDAÇÃO --- */
.campo-input.error, .campo-select.error, .campo-textarea.error {
    border-color: var(--color-danger);
    background-color: #fce4e4; /* Fundo levemente vermelho */
}

.campo-input.success, .campo-select.success {
    border-color: var(--color-success);
}

/* --- AJUSTES DE SELECT (Revisitado) --- */
.campo-select {
    cursor: pointer;
    line-height: 1.3;
}

/* ==========================================================================
   UPLOAD COM PREVIEW
   ========================================================================== */

/* Container do Input (esconde o input original) */
.upload-wrapper {
    width: 100%;
    margin-bottom: 20px;
}

/* O input real fica invisível, mas acessível via Label */
.upload-input-file {
    display: none;
}

/* Área clicável (Label) */
.upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 150px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-body); /* Fundo leve */
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.upload-area:hover {
    border-color: var(--color-accent);
    background-color: rgba(52, 152, 219, 0.05); /* Azul bem clarinho */
}

/* --- ESTADOS DO PREVIEW --- */

/* 1. Estado Inicial (Texto + Icone Upload) */
.upload-placeholder {
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.upload-placeholder i { font-size: 2rem; color: var(--text-secondary); }
.upload-placeholder span { font-size: 0.9rem; }

/* 2. Estado Imagem (Preview) */
.upload-preview-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: none; /* Oculto por padrão */
    object-fit: contain;
}

/* 3. Estado Arquivo (Ícone + Nome) */
.upload-file-info {
    display: none; /* Oculto por padrão */
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.upload-file-info i {
    font-size: 3rem; /* Ícone Grande */
}
.upload-file-info span {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
    word-break: break-all; /* Quebra nome longo */
}

/* Cores específicas para tipos de arquivo */
.file-icon-pdf { color: #e74c3c; } /* Vermelho */
.file-icon-doc { color: #3498db; } /* Azul */
.file-icon-xls { color: #27ae60; } /* Verde */
.file-icon-zip { color: #f39c12; } /* Laranja */
.file-icon-default { color: #7f8c8d; } /* Cinza */

/* ==========================================================================
   ALERTA FLUTUANTE (TOAST)
   ========================================================================== */

#toast-container {
    position: fixed;
    top: 80px; /* Abaixo do Header */
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast-message {
    min-width: 300px;
    max-width: 400px;
    background-color: var(--bg-component);
    color: var(--text-primary);
    padding: 15px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-left: 5px solid #ccc; /* Cor padrão */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    
    /* Animação de Entrada */
    animation: slideInRight 0.4s ease-out forwards;
    opacity: 0;
    transform: translateX(100%);
}

.toast-message.hide {
    animation: fadeOutRight 0.4s ease-in forwards;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
}

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.1rem;
}
.toast-close:hover { color: var(--text-primary); }

/* --- VARIAÇÕES DE COR --- */

/* Sucesso */
.toast-message.success {
    border-left-color: var(--color-success);
}
.toast-message.success i.icon-status { color: var(--color-success); }

/* Erro / Falha */
.toast-message.error {
    border-left-color: var(--color-danger);
}
.toast-message.error i.icon-status { color: var(--color-danger); }

/* Aviso / Alerta */
.toast-message.warning {
    border-left-color: #f39c12; /* Laranja */
}
.toast-message.warning i.icon-status { color: #f39c12; }

/* Info */
.toast-message.info {
    border-left-color: #3498db; /* Azul */
}
.toast-message.info i.icon-status { color: #3498db; }

/* Keyframes */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

/* Fundo escuro que cobre a tela toda */
#modal-aguarde {
    display: none; /* Começa invisível */
    position: fixed;
    z-index: 9999; /* Fica acima de tudo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Preto com transparência */
    backdrop-filter: blur(2px); /* Efeito de desfoque moderno (opcional) */
    
    /* Centraliza o conteúdo */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    font-family: sans-serif;
    font-size: 1.2rem;
}

/* Animação de Carregamento (Spinner) */
.spinner-loading {
    border: 6px solid #f3f3f3; /* Cinza claro */
    border-top: 6px solid #3498db; /* Azul (Mude para a cor do seu sistema) */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.campo-list-invalido {
    border: 2px solid #ff0000 !important;
    
  }
  .campo-list-valido{
      border: 1px solid #00cc00 !important;
  }
  #aviso-list {
    color: red;
    font-size: 0.9em;
    margin-top: 4px;
  }
  
   .campo-valido {
    border: 2px solid #00cc00 !important; /* verde */
  }
  .campo-invalido {
    border: 2px solid #ff0000 !important; /* vermelho */
  }
  .mensagem-erro {
    color: #ff0000;
    font-size: 0.9em;
    margin-top: 4px;
  }
.select-busca {
    position: relative;
}

.dropdown-list {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.dropdown-item {
    padding: 8px;
    cursor: pointer;
}

.dropdown-item:hover {
    background: #f0f0f0;
}