/* ===== Variables CSS - Colores de Marca ===== */
:root {
    --color-bg-primary: #000000;
    --color-brand-green: #71db77;
    --color-text-light: #ffffff;
    --color-text-dark: #000000;
    --color-error: #ff6b6b;
    --color-brand-green-opacity: rgba(113, 219, 119, 0.5);
    --border-radius-base: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;
    --transition-base: all 0.3s ease;
}

/* ===== Estilos Base ===== */
body {
    font-family: 'Quicksand', sans-serif;
    background-color: var(--color-bg-primary);
}

/* ===== Estilos de Formulario ===== */
.form-container {
    background-color: var(--color-bg-primary);
    border: 2px solid var(--color-brand-green);
}

.input-field {
    border: 2px solid var(--color-brand-green);
    color: var(--color-text-dark);
    background-color: var(--color-text-light);
    transition: var(--transition-base);
    text-align: center;
}

.input-field:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-brand-green-opacity);
}

.input-field:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f3f4f6;
}

.btn-primary {
    background-color: var(--color-brand-green);
    color: var(--color-text-dark);
    border: 2px solid var(--color-brand-green);
    box-shadow: 0 4px 24px 0 var(--color-brand-green-opacity);
    transition: var(--transition-base);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px 0 var(--color-brand-green-opacity);
}

.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.upload-icon {
    transition: var(--transition-base);
}

.upload-icon:hover {
    transform: scale(1.1);
}

/* ===== Mensajes de Estado ===== */
.message-success {
    color: var(--color-text-dark);
    background-color: var(--color-brand-green);
    border: 2px solid var(--color-brand-green);
}

.message-error {
    color: var(--color-text-dark);
    background-color: var(--color-error);
    border: 2px solid var(--color-error);
}

.text-brand {
    color: var(--color-brand-green);
}

.text-error {
    color: var(--color-error);
}

.text-light {
    color: var(--color-text-light);
}

/* ===== Animaciones ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 1s linear infinite;
}