/* Finca Canarias login design system. */
:root {
    --loginPrimary: #699822;
    --loginOnPrimary: #ffffff;
    --loginBackground: #ffffff;
    --loginText: #000000;
    --loginBorder: #dfe8d4;
    --loginSoft: #f7faf3;
    --loginFontDisplay: "Varela Round", "Trebuchet MS", Arial, sans-serif;
    --loginFontHeading: Roboto, "Segoe UI", Arial, sans-serif;
    --loginRadiusSm: 10px;
    --loginRadiusMd: 14px;
    --loginShadowCard: 0 1px 2px rgba(0, 0, 0, 0.05);
    --loginShadowElevated: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

html,
body {
    background: var(--loginBackground);
    color: var(--loginText);
    font-family: var(--loginFontDisplay);
    font-size: 12px;
}

body {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100%;
    padding: 24px 16px 88px;
}

#brickwall,
#background {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(247, 250, 243, 0.52)),
        url("../logo.php?backdrop&v=20260918") center center / cover no-repeat;
    background-attachment: scroll;
}

#loginBox {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--loginBorder);
    border-radius: var(--loginRadiusMd);
    box-shadow: var(--loginShadowElevated);
    left: auto;
    margin: 0;
    max-width: 440px;
    padding: 32px;
    position: relative;
    top: auto;
    width: min(100%, 440px);
}

#logo a {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

#logo a img {
    max-height: 68px;
    max-width: min(320px, 76vw);
}

h1,
h2,
h3 {
    color: var(--loginText);
    font-family: var(--loginFontHeading);
    font-weight: 700;
    letter-spacing: 1.2px;
}

h3 {
    color: var(--loginPrimary);
    font-size: 14px;
    margin-bottom: 18px;
}

fieldset input,
input[type=text],
input[type=password] {
    background: var(--loginBackground);
    border: 1px solid var(--loginBorder);
    border-radius: var(--loginRadiusSm);
    color: var(--loginText);
    font-family: var(--loginFontDisplay);
    font-size: 12px;
    min-height: 42px;
    padding: 10px 12px;
}

fieldset input:focus,
input:focus {
    border-color: var(--loginPrimary);
    box-shadow: 0 0 0 3px rgba(105, 152, 34, 0.2);
    outline: none;
}

input[type=submit],
input[type=reset],
input[type=button],
button,
.button,
.action-button {
    background: var(--loginPrimary);
    border: 1px solid var(--loginPrimary);
    border-radius: var(--loginRadiusSm);
    box-shadow: var(--loginShadowCard);
    color: var(--loginOnPrimary);
    font-family: var(--loginFontDisplay);
    font-size: 12px;
    font-weight: 700;
    min-height: 42px;
    padding: 10px 16px;
    text-shadow: none;
}

input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover,
button:hover,
.button:hover,
.action-button:hover {
    background: #4e7418;
    border-color: #4e7418;
    box-shadow: var(--loginShadowElevated);
    color: var(--loginOnPrimary);
}

#company .content,
#poweredBy {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--loginBorder);
    border-radius: var(--loginRadiusSm);
    box-shadow: var(--loginShadowCard);
    color: var(--loginText);
    text-shadow: none;
}

@media (max-width: 560px) {
    body {
        padding: 16px 10px 76px;
    }

    #loginBox {
        padding: 24px 16px;
    }

    #poweredBy {
        left: 10px;
        right: 10px;
    }
}
#login-message {
    color: #b42318;
}
#loginBox .error,
#loginBox .warning,
#loginBox .alert-error,
#loginBox .alert-warning,
#loginBox [role="alert"],
#loginBox .banner.error,
#loginBox .banner.warning {
    color: #b42318 !important;
}