/*
 * ARQUIVO: components.css
 * DESCRIÇÃO: Estiliza os componentes de UI reutilizáveis (Requisito 4).
 * Cobre: Cards, Botões, Formulários, Alertas e Badges.
 */

/* --- 1. Botões (com estados visuais) --- */
.btn {
    display: inline-block;
    font-weight: bold;
    font-size: var(--tam-p);
    text-align: center;
    text-decoration: none;
    padding: var(--esp-2) var(--esp-4); /* 16px 32px */
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Botão Primário (Principal) */
.btn-primario {
    background-color: var(--cor-primaria);
    color: var(--cor-neutra-000);
}
/* Estados Visuais: :hover, :focus, :active */
.btn-primario:hover {
    background-color: var(--cor-primaria-escura);
    color: var(--cor-neutra-000);
    text-decoration: none;
}
.btn-primario:focus {
    outline: 2px solid var(--cor-primaria-escura);
    outline-offset: 2px;
}
.btn-primario:active {
    transform: scale(0.98);
}

/* Botão Secundário (Alternativo) */
.btn-secundario {
    background-color: var(--cor-neutra-000);
    color: var(--cor-secundaria);
    border-color: var(--cor-secundaria);
}
.btn-secundario:hover {
    background-color: var(--cor-secundaria);
    color: var(--cor-neutra-000);
    text-decoration: none;
}
.btn-secundario:focus {
    outline: 2px solid var(--cor-secundaria-escura);
    outline-offset: 2px;
}
.btn-secundario:active {
    transform: scale(0.98);
}

/* Estado Visual: :disabled */
.btn:disabled {
    background-color: var(--cor-neutra-300);
    color: var(--cor-neutra-700);
    border-color: var(--cor-neutra-300);
    cursor: not-allowed;
}


/* --- 2. Cards Responsivos (para projetos) --- */
.cards-container {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna no mobile */
    gap: var(--esp-3);
}

.card {
    background-color: var(--cor-neutra-000);
    border: 1px solid var(--cor-neutra-300);
    border-radius: 8px;
    overflow: hidden; /* Garante que a imagem não vaze do border-radius */
    display: flex; /* Flexbox para estrutura interna (Requisito 2) */
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.card-imagem {
    width: 100%;
    aspect-ratio: 16 / 9; /* Proporção moderna para imagens */
    object-fit: cover;
}

.card-conteudo {
    padding: var(--esp-3);
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz o card crescer para ocupar o espaço */
}

.card-titulo {
    font-size: var(--tam-h3);
    margin-bottom: var(--esp-1);
}

.card-conteudo p {
    margin-bottom: var(--esp-3);
    flex-grow: 1; /* Empurra o botão para baixo */
}

/* Ajuste responsivo dos cards */
@media (min-width: 768px) {
    .cards-container {
        grid-template-columns: 1fr 1fr; /* 2 colunas */
    }
}
@media (min-width: 1200px) {
    .cards-container {
        grid-template-columns: 1fr 1fr 1fr; /* 3 colunas */
    }
}


/* --- 3. Formulários Estilizados --- */
.form-grupo {
    border: 1px solid var(--cor-neutra-300);
    padding: var(--esp-3);
    margin-bottom: var(--esp-3);
    border-radius: 4px;
}
.form-grupo legend {
    font-size: var(--tam-h3);
    font-weight: bold;
    padding: 0 var(--esp-1);
    margin-left: var(--esp-2);
}

.form-campo {
    margin-bottom: var(--esp-3);
}
.form-campo:last-child {
    margin-bottom: 0;
}

.form-campo label {
    display: block;
    margin-bottom: var(--esp-1);
    font-weight: bold;
}

/* Estilo dos inputs */
.form-campo input[type="text"],
.form-campo input[type="email"],
.form-campo input[type="date"],
.form-campo input[type="tel"] {
    width: 100%;
    padding: var(--esp-2);
    border: 1px solid var(--cor-neutra-300);
    border-radius: 4px;
    font-size: var(--tam-p);
    font-family: var(--fonte-principal);
}
.form-campo input[type="text"]:focus,
.form-campo input[type="email"]:focus,
.form-campo input[type="date"]:focus,
.form-campo input[type="tel"]:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Validação Visual (HTML5) */
/* Estilo quando o campo é obrigatório e inválido */
.form-campo input:required:invalid:not(:placeholder-shown) {
    border-color: var(--cor-erro);
    background-color: #fff8f8;
}

.form-botoes {
    display: flex;
    justify-content: flex-end; /* Alinha botões à direita */
    gap: var(--esp-2);
}


/* --- 4. Badges e Tags --- */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em; /* Equivalente ao var(--esp-1) */
    font-size: var(--tam-pequeno);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem; /* 4px */
    
    background-color: var(--cor-secundaria);
    color: var(--cor-neutra-000);
    margin-bottom: var(--esp-1);
}

/* --- 5. Alertas (Componentes de Feedback) --- */
.alert {
    padding: var(--esp-3);
    margin-bottom: var(--esp-2);
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-sucesso {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}
.alert-erro {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}/*
 * =========================================
 * ESTILOS DA ENTREGA III (Validação)
 * =========================================
 */

/* --- 6. Avisos de Formulário --- */

/* O 'span' para a mensagem de erro. Começa escondido. */
.aviso-erro {
    display: none; /* Escondido por padrão */
    color: var(--cor-erro);
    font-size: var(--tam-pequeno);
    font-weight: bold;
    margin-top: var(--esp-1);
}

/* * Quando o campo (input) é inválido E o usuário já tentou interagir com ele (touched/dirty),
 * o JavaScript vai adicionar a classe 'invalido' ao .form-campo (o 'pai').
 * Isso vai fazer o aviso-erro aparecer.
 */
.form-campo.invalido .aviso-erro {
    display: block; /* Mostra o aviso */
}

/* Adiciona a borda vermelha no input que está dentro de um .form-campo inválido */
.form-campo.invalido input {
    border-color: var(--cor-erro);
    background-color: #fff8f8;

}
/*
 * =========================================
 * ESTILOS DA ENTREGA IV (Modo Escuro)
 * =========================================
 */
.theme-toggle {
    background: var(--cor-neutra-100);
    border: 2px solid var(--cor-neutra-300);
    color: var(--cor-neutra-900);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.theme-toggle:hover {
    background: var(--cor-neutra-300);
    border-color: var(--cor-primaria);
}