:root {
    --color-nature-green: #2E7D32;      /* Verde naturaleza central */
    --color-nature-light: #4CAF50;
    --color-earth: #5D4037;             /* Tierra para fondos o pie de pagina */
    --color-yolk: #FFB300;              /* Naranja Yema para accciones */
    --color-yolk-hover: #FF8F00;
    --color-bg-light: #F9FBE7;          /* Fondo sutil */
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--color-bg-light);
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Para que el footer se hunda si hay poco contenido */
}

/* Utilidades de color personalizadas */
.bg-nature-green { background-color: var(--color-nature-green) !important; }
.text-nature-green { color: var(--color-nature-green) !important; }
.bg-earth { background-color: var(--color-earth) !important; }
.text-earth { color: var(--color-earth) !important; }

/* Yolk Button - El Botón principal */
.btn-yolk {
    background-color: var(--color-yolk);
    color: #fff;
    font-weight: 600;
    border: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-yolk:hover {
    background-color: var(--color-yolk-hover);
    color: #fff;
    transform: translateY(-2px);
}

/* Formatos generales */
.card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.form-control, .form-select {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border: 1px solid #ced4da;
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-nature-light);
    box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-earth);
    font-weight: 700;
}