/* =========================================================
   TIENDA JOCHY - LOGIN ADMIN SIEMPRE EN MODO CLARO
   ========================================================= */

:root,
html,
body {
    color-scheme: light !important;
}

html {
    background: #fff7fb !important;
}

body {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 213, 234, .72), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(255, 231, 207, .80), transparent 36%),
        linear-gradient(135deg, #fff7fb 0%, #ffffff 58%, #fff2f8 100%) !important;
    color: #30272d !important;
}

.login-page,
.auth-page,
.admin-login-page,
.login-shell,
.auth-shell {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 213, 234, .72), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(255, 231, 207, .80), transparent 36%),
        linear-gradient(135deg, #fff7fb 0%, #ffffff 58%, #fff2f8 100%) !important;
    color: #30272d !important;
}

.login-card,
.auth-card,
.admin-login-card {
    background: rgba(255,255,255,.94) !important;
    color: #30272d !important;
    border: 1px solid #f0dbe6 !important;
    box-shadow: 0 24px 70px rgba(230, 38, 146, .14) !important;
}

.login-card h1,
.auth-card h1,
.admin-login-card h1,
.login-card h2,
.auth-card h2,
.admin-login-card h2 {
    color: #30272d !important;
}

.login-card p,
.auth-card p,
.admin-login-card p {
    color: #786d74 !important;
}

.login-card label,
.auth-card label,
.admin-login-card label {
    color: #30272d !important;
}

.login-card input,
.auth-card input,
.admin-login-card input,
.login-card select,
.auth-card select,
.admin-login-card select,
.login-card textarea,
.auth-card textarea,
.admin-login-card textarea {
    color-scheme: light !important;
    background: #ffffff !important;
    color: #30272d !important;
    border: 1px solid #f0cfe0 !important;
    -webkit-text-fill-color: #30272d !important;
    box-shadow: none !important;
}

.login-card input:focus,
.auth-card input:focus,
.admin-login-card input:focus {
    background: #ffffff !important;
    color: #30272d !important;
    border-color: #e62692 !important;
    box-shadow: 0 0 0 4px rgba(230, 38, 146, .10) !important;
}

.login-card input:-webkit-autofill,
.auth-card input:-webkit-autofill,
.admin-login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:hover,
.admin-login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus,
.auth-card input:-webkit-autofill:focus,
.admin-login-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: #30272d !important;
    caret-color: #30272d !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

.login-card button,
.auth-card button,
.admin-login-card button,
.login-card .btn,
.auth-card .btn,
.admin-login-card .btn {
    background: linear-gradient(135deg, #e62692, #d91b82) !important;
    color: #ffffff !important;
    border: 0 !important;
}

.login-card img,
.auth-card img,
.admin-login-card img {
    filter: none !important;
    opacity: 1 !important;
}

@media (prefers-color-scheme: dark) {
    :root,
    html,
    body {
        color-scheme: light !important;
        background:
            radial-gradient(circle at 20% 20%, rgba(255, 213, 234, .72), transparent 34%),
            radial-gradient(circle at 82% 78%, rgba(255, 231, 207, .80), transparent 36%),
            linear-gradient(135deg, #fff7fb 0%, #ffffff 58%, #fff2f8 100%) !important;
        color: #30272d !important;
    }

    .login-page,
    .auth-page,
    .admin-login-page,
    .login-shell,
    .auth-shell {
        background:
            radial-gradient(circle at 20% 20%, rgba(255, 213, 234, .72), transparent 34%),
            radial-gradient(circle at 82% 78%, rgba(255, 231, 207, .80), transparent 36%),
            linear-gradient(135deg, #fff7fb 0%, #ffffff 58%, #fff2f8 100%) !important;
        color: #30272d !important;
    }

    .login-card,
    .auth-card,
    .admin-login-card {
        background: rgba(255,255,255,.94) !important;
        color: #30272d !important;
        border-color: #f0dbe6 !important;
    }
}