:root {
    /* Degradado Base del Sistema (Fondo y Menú) */
    --degradado-fondo: linear-gradient(135deg, #006400, #00a86b); 
    --verde-principal-oscuro: #006400; 
    --verde-principal-claro: #00a86b;  
    
    /* Gris oscuro para Texto Principal */
    --ujat-gris-oscuro: #333333; 
    
    /* Botón Dorado (Normal) */
    --boton-dorado-inicio: #fdd835; 
    --boton-dorado-fin: #fbc02d;

    /* Botón Dorado (Hover) */
    --hover-dorado-inicio: #fbc02d;
    --hover-dorado-fin: #f57f17;

    --blanco: #ffffff;
    --borde-suave: #e1e1e1;
}

/* Reseteo básico y tipografía */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif; 
}

body {
    background-image: var(--degradado-fondo);
    background-attachment: fixed;
    background-color: var(--verde-principal-oscuro);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- BARRA DE NAVEGACIÓN --- */
.navbar-ujat {
    background: rgba(0, 100, 0, 0.95);
    backdrop-filter: blur(5px);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* --- TARJETA DE ACCESO / LOGIN --- */
.card-ujat {
    background: var(--blanco);
    width: 100%;
    max-width: 440px;
    padding: 2.5rem;
    border-radius: 12px; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35); 
    border-top: 5px solid var(--boton-dorado-fin);
    margin-top: 60px; /* Espacio para la barra fija */
}

.header-title {
    color: var(--ujat-gris-oscuro);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Formularios y Campos */
.form-label {
    color: var(--ujat-gris-oscuro);
    font-size: 0.95rem;
    font-weight: 500;
}

.form-control, .form-select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--borde-suave);
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

.form-control:focus, .form-select:focus {
    border-color: var(--verde-principal-oscuro);
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.25);
    background-color: var(--blanco);
}

/* --- BOTONES (DEGRADADO DORADO/AMARILLO) --- */
.btn-ujat {
    width: 100%;
    padding: 14px;
    color: var(--ujat-gris-oscuro); 
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease; 
    margin-top: 1rem;
    
    /* ESTADO NORMAL */
    background-image: linear-gradient(90deg, var(--boton-dorado-inicio), var(--boton-dorado-fin));
    box-shadow: 0 4px 10px rgba(253, 216, 53, 0.4); 
}

.btn-ujat:hover {
    background-image: linear-gradient(90deg, var(--hover-dorado-inicio), var(--hover-dorado-fin));
    box-shadow: 0 6px 15px rgba(245, 127, 23, 0.5); 
    transform: translateY(-2px); 
    color: var(--ujat-gris-oscuro);
}