:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary1: 221.2 83.2% 53.3%;
    --primary1-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
}

.bg-background {
    background-color: hsl(var(--background));
}

.text-foreground {
    color: hsl(var(--foreground));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.text-destructive {
    color: hsl(var(--destructive));
}

.text-primary {
    color: hsl(var(--primary));
}

.text-primary-hover:hover {
    color: hsl(var(--primary));
    filter: brightness(90%);
}

.bg-image {
    background-image: url('/images/fondo-egrid-oscuro.jpg');
    background-size: cover;
    background-position: center;
}

.custom-input {
    border-radius: var(--radius);
    border: 1px solid hsl(var(--input));
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

    .custom-input:focus {
        border-color: hsl(var(--ring));
        box-shadow: 0 0 0 2px hsla(var(--ring), 0.3);
        outline: 0;
    }

.custom-button {
    background-color: hsl(var(--primary1));
    border-color: hsl(var(--primary1));
    color: hsl(var(--primary1-foreground));
    border-radius: var(--radius);
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

    .custom-button:hover {
        background-color: hsl(var(--primary1));
        border-color: hsl(var(--primary1));
        filter: brightness(90%);
    }

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: hsl(var(--muted-foreground));
}

.custom-input {
    padding-right: 2.5rem;
}


@media (max-width: 767.98px) {
    .bg-image {
        display: none;
    }
}