/* Identidad visual de Secretaría Virtual en la pantalla de acceso. */
html:has(body .for-login),
html:has(body .for-forgot),
html:has(body .for-signup),
html:has(body .for-login-with-email-link),
body:has(.for-login),
body:has(.for-forgot),
body:has(.for-signup),
body:has(.for-login-with-email-link) {
    background: #0d0b0a !important;
}

body:has(.for-login),
body:has(.for-forgot),
body:has(.for-signup),
body:has(.for-login-with-email-link) {
    min-height: 100vh;
    color: #ffffff !important;
}

body:has(.for-login) .page-content-wrapper,
body:has(.for-forgot) .page-content-wrapper,
body:has(.for-signup) .page-content-wrapper,
body:has(.for-login-with-email-link) .page-content-wrapper {
    padding-top: 0 !important;
}

body:has(.for-login) .for-login,
body:has(.for-forgot) .for-forgot,
body:has(.for-signup) .for-signup,
body:has(.for-login-with-email-link) .for-login-with-email-link {
    min-height: 100vh;
    padding: 32px 16px;
    background: #0d0b0a !important;
}

body:has(.for-login) .login-content.page-card,
body:has(.for-forgot) .login-content.page-card,
body:has(.for-signup) .login-content.page-card,
body:has(.for-login-with-email-link) .login-content.page-card {
    width: min(100%, 430px);
    padding: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 24px !important;
    background: rgba(20, 16, 14, 0.72) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32) !important;
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
}

body:has(.for-login) .page-card-head,
body:has(.for-forgot) .page-card-head,
body:has(.for-signup) .page-card-head,
body:has(.for-login-with-email-link) .page-card-head {
    padding: 32px !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

body:has(.for-login) .page-card-head,
body:has(.for-email-login) .page-card-head {
    align-items: center !important;
    text-align: center !important;
}

body:has(.for-login) .page-card-head-text,
body:has(.for-email-login) .page-card-head-text {
    align-items: center !important;
    text-align: center !important;
}

body:has(.for-login) .app-logo,
body:has(.for-forgot) .app-logo,
body:has(.for-signup) .app-logo,
body:has(.for-login-with-email-link) .app-logo {
    max-width: 210px !important;
    max-height: 72px !important;
    object-fit: contain !important;
}

body:has(.for-login) .page-card-head-text h4,
body:has(.for-forgot) .page-card-head-text h4,
body:has(.for-signup) .page-card-head-text h4,
body:has(.for-login-with-email-link) .page-card-head-text h4,
body:has(.for-login) .form-label,
body:has(.for-forgot) .form-label,
body:has(.for-signup) .form-label,
body:has(.for-login-with-email-link) .form-label {
    color: #ffffff !important;
}

body:has(.for-login) .page-card-subtitle,
body:has(.for-forgot) .page-card-subtitle,
body:has(.for-signup) .page-card-subtitle,
body:has(.for-login-with-email-link) .page-card-subtitle {
    color: rgba(255, 255, 255, 0.72) !important;
}

body:has(.for-login) .form-control,
body:has(.for-forgot) .form-control,
body:has(.for-signup) .form-control,
body:has(.for-login-with-email-link) .form-control {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body:has(.for-login) .form-control::placeholder,
body:has(.for-forgot) .form-control::placeholder,
body:has(.for-signup) .form-control::placeholder,
body:has(.for-login-with-email-link) .form-control::placeholder {
    color: rgba(255, 255, 255, 0.52) !important;
}

body:has(.for-login) .btn-login[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    border: 1px solid #ec6e00 !important;
    border-radius: 8px !important;
    background: #ec6e00 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

body:has(.for-login) .btn-login[type="submit"]:hover,
body:has(.for-login) .btn-login[type="submit"]:focus {
    border-color: #c25200 !important;
    background: #c25200 !important;
    color: #ffffff !important;
}

body:has(.for-login) .btn-login[type="submit"] .icon {
    width: 16px;
    height: 16px;
    margin: 0;
    color: #ffffff !important;
    stroke: #ffffff !important;
}

body:has(.for-login) .btn-login[type="submit"] .icon * {
    stroke: #ffffff !important;
}

body:has(.for-login) .for-login a.btn-login-option.btn-login-with-email-link,
body:has(.for-login) .for-login a.btn-login-option.btn-login-with-email-link:hover,
body:has(.for-login) .for-login a.btn-login-option.btn-login-with-email-link:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    text-decoration: underline !important;
}

body:has(.for-login) .forgot-password-message a,
body:has(.for-forgot) .sign-up-message a,
body:has(.for-login-with-email-link) .sign-up-message a {
    color: #ffffff !important;
}

body:has(.for-login) .sign-up-message,
body:has(.for-forgot) .sign-up-message,
body:has(.for-login-with-email-link) .sign-up-message {
    color: rgba(255, 255, 255, 0.72) !important;
}

@media (max-width: 520px) {
    body:has(.for-login) .for-login,
    body:has(.for-forgot) .for-forgot,
    body:has(.for-signup) .for-signup,
    body:has(.for-login-with-email-link) .for-login-with-email-link {
        padding: 18px 10px;
    }

    body:has(.for-login) .login-content.page-card,
    body:has(.for-forgot) .login-content.page-card,
    body:has(.for-signup) .login-content.page-card,
    body:has(.for-login-with-email-link) .login-content.page-card {
        padding: 20px !important;
        border-radius: 20px !important;
    }
}