/* ============================================================
   Código Pet - PWA Login GOD
   Solo se activa cuando html tiene .codigopet-pwa-mode
============================================================ */

html.codigopet-pwa-mode,
html.codigopet-pwa-mode body {
    min-height: 100%;
    background:
        radial-gradient(circle at top left, rgba(111, 60, 255, 0.20), transparent 32%),
        radial-gradient(circle at bottom right, rgba(0, 238, 184, 0.18), transparent 34%),
        linear-gradient(180deg, #f7f8ff 0%, #eef2f9 100%) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Ocultar estructura desktop solo en PWA */
html.codigopet-pwa-mode #header-outer,
html.codigopet-pwa-mode header#top,
html.codigopet-pwa-mode #footer-outer,
html.codigopet-pwa-mode #copyright,
html.codigopet-pwa-mode .nectar-global-section,
html.codigopet-pwa-mode .page-header-no-bg,
html.codigopet-pwa-mode .woocommerce-breadcrumb,
html.codigopet-pwa-mode nav.woocommerce-MyAccount-navigation {
    display: none !important;
}

/* Reset contenedores Salient/Woo solo PWA */
html.codigopet-pwa-mode body.woocommerce-account #ajax-content-wrap,
html.codigopet-pwa-mode body.woocommerce-account .container-wrap,
html.codigopet-pwa-mode body.woocommerce-account .container.main-content,
html.codigopet-pwa-mode body.woocommerce-account .row,
html.codigopet-pwa-mode body.woocommerce-account .main-content,
html.codigopet-pwa-mode body.woocommerce-account .woocommerce {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Pantalla app */
html.codigopet-pwa-mode body.woocommerce-account .woocommerce {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top) 18px env(safe-area-inset-bottom) !important;
    box-sizing: border-box;
}

/* Wrapper login */
html.codigopet-pwa-mode body.woocommerce-account .u-columns,
html.codigopet-pwa-mode body.woocommerce-account .woocommerce-notices-wrapper + .u-columns {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Si Woo separa login/register */
html.codigopet-pwa-mode body.woocommerce-account .u-column1,
html.codigopet-pwa-mode body.woocommerce-account .u-column2 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Ocultar registro en PWA login si existe al lado */
html.codigopet-pwa-mode body.woocommerce-account .u-column2 {
    display: none !important;
}

/* Card principal */
html.codigopet-pwa-mode body.woocommerce-account form.login,
html.codigopet-pwa-mode body.woocommerce-account form.woocommerce-form-login {
    position: relative;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 34px 24px 24px !important;
    border: 1px solid rgba(255,255,255,0.78) !important;
    border-radius: 34px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,248,255,0.92)) !important;
    box-shadow:
        0 30px 80px rgba(18, 24, 39, 0.16),
        0 12px 32px rgba(111, 60, 255, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    box-sizing: border-box;
}

/* Glow superior */
html.codigopet-pwa-mode body.woocommerce-account form.login::before,
html.codigopet-pwa-mode body.woocommerce-account form.woocommerce-form-login::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 180px;
    background:
        radial-gradient(circle at top left, rgba(111, 60, 255, 0.22), transparent 36%),
        radial-gradient(circle at top right, rgba(0, 238, 184, 0.18), transparent 34%);
    pointer-events: none;
}

/* Logo app */
html.codigopet-pwa-mode body.woocommerce-account form.login::after,
html.codigopet-pwa-mode body.woocommerce-account form.woocommerce-form-login::after {
    content: "";
    display: block;
    width: 92px;
    height: 92px;
    margin: 0 auto 18px;
    border-radius: 28px;
    background:
        url("/wp-content/uploads/2024/07/logo-solo.png") center / contain no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.95), rgba(243,246,255,0.98));
    box-shadow:
        0 18px 34px rgba(111, 60, 255, 0.18),
        0 8px 18px rgba(18, 24, 39, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.95);
    position: relative;
    z-index: 1;
    animation: cpPwaLogoFloat 4.8s ease-in-out infinite;
}

@keyframes cpPwaLogoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Título Woo */
html.codigopet-pwa-mode body.woocommerce-account h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 8px !important;
    color: #21124f !important;
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.06em !important;
    text-align: center !important;
}

/* Cambiar texto visible del h2 se hará por JS si quieres, pero estilo listo */
html.codigopet-pwa-mode body.woocommerce-account form.login > p:first-of-type,
html.codigopet-pwa-mode body.woocommerce-account form.woocommerce-form-login > p:first-of-type {
    position: relative;
    z-index: 1;
}

/* Campos */
html.codigopet-pwa-mode body.woocommerce-account .form-row {
    position: relative;
    z-index: 1;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

html.codigopet-pwa-mode body.woocommerce-account label {
    display: block !important;
    margin: 0 0 8px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
}

html.codigopet-pwa-mode body.woocommerce-account input.input-text,
html.codigopet-pwa-mode body.woocommerce-account input[type="text"],
html.codigopet-pwa-mode body.woocommerce-account input[type="email"],
html.codigopet-pwa-mode body.woocommerce-account input[type="password"] {
    width: 100% !important;
    min-height: 56px !important;
    padding: 0 17px !important;
    border: 1px solid rgba(111, 60, 255, 0.12) !important;
    border-radius: 19px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.98)) !important;
    color: #172033 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    outline: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 10px 20px rgba(18, 24, 39, 0.04) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    box-sizing: border-box;
}

html.codigopet-pwa-mode body.woocommerce-account input.input-text:focus,
html.codigopet-pwa-mode body.woocommerce-account input[type="text"]:focus,
html.codigopet-pwa-mode body.woocommerce-account input[type="email"]:focus,
html.codigopet-pwa-mode body.woocommerce-account input[type="password"]:focus {
    border-color: rgba(111, 60, 255, 0.34) !important;
    box-shadow:
        0 0 0 5px rgba(111, 60, 255, 0.08),
        0 16px 28px rgba(111, 60, 255, 0.08) !important;
    transform: translateY(-1px);
}

/* Recordarme */
html.codigopet-pwa-mode body.woocommerce-account .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 4px 0 18px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html.codigopet-pwa-mode body.woocommerce-account .woocommerce-form-login__rememberme input {
    width: 18px !important;
    height: 18px !important;
    accent-color: #6f3cff;
}

/* Botón */
html.codigopet-pwa-mode body.woocommerce-account button.button,
html.codigopet-pwa-mode body.woocommerce-account .woocommerce-button,
html.codigopet-pwa-mode body.woocommerce-account button.woocommerce-form-login__submit {
    width: 100% !important;
    min-height: 58px !important;
    margin: 6px 0 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    background:
        linear-gradient(135deg, #6f3cff 0%, #8f47ff 48%, #00d9b8 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    box-shadow:
        0 18px 34px rgba(111, 60, 255, 0.24),
        0 8px 18px rgba(0, 238, 184, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.28) !important;
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

html.codigopet-pwa-mode body.woocommerce-account button.button:hover,
html.codigopet-pwa-mode body.woocommerce-account .woocommerce-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
    box-shadow:
        0 22px 42px rgba(111, 60, 255, 0.30),
        0 10px 22px rgba(0, 238, 184, 0.16) !important;
}

/* Link recuperar clave */
html.codigopet-pwa-mode body.woocommerce-account .lost_password {
    position: relative;
    z-index: 1;
    margin: 18px 0 0 !important;
    text-align: center !important;
}

html.codigopet-pwa-mode body.woocommerce-account .lost_password a {
    color: #6f3cff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

/* Notices */
html.codigopet-pwa-mode body.woocommerce-account .woocommerce-notices-wrapper {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
}

html.codigopet-pwa-mode body.woocommerce-account .woocommerce-error,
html.codigopet-pwa-mode body.woocommerce-account .woocommerce-message,
html.codigopet-pwa-mode body.woocommerce-account .woocommerce-info {
    margin: 0 0 16px !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.92) !important;
    color: #172033 !important;
    box-shadow: 0 12px 28px rgba(18, 24, 39, 0.08) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
}

/* Footer visual mini */
html.codigopet-pwa-mode body.woocommerce-account .woocommerce::after {
    content: "Código Pet · Protección inteligente para mascotas";
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: max(14px, env(safe-area-inset-bottom));
    color: rgba(33, 18, 79, 0.46);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    pointer-events: none;
}

/* Mobile ultra small */
@media (max-width: 380px) {
    html.codigopet-pwa-mode body.woocommerce-account form.login,
    html.codigopet-pwa-mode body.woocommerce-account form.woocommerce-form-login {
        padding: 28px 18px 20px !important;
        border-radius: 28px !important;
    }

    html.codigopet-pwa-mode body.woocommerce-account h2 {
        font-size: 30px !important;
    }

    html.codigopet-pwa-mode body.woocommerce-account form.login::after,
    html.codigopet-pwa-mode body.woocommerce-account form.woocommerce-form-login::after {
        width: 82px;
        height: 82px;
        border-radius: 24px;
    }
}

/* ============================================================
   Código Pet PWA Login - Fix real basado en HTML actual
   Se activa con body.codigopet-pwa-body
============================================================ */

body.codigopet-pwa-body {
    min-height: 100vh !important;
    background:
        radial-gradient(circle at top left, rgba(111, 60, 255, 0.20), transparent 34%),
        radial-gradient(circle at bottom right, rgba(0, 238, 184, 0.18), transparent 34%),
        linear-gradient(180deg, #f7f8ff 0%, #eef2f9 100%) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body.codigopet-pwa-body #header-space,
body.codigopet-pwa-body #header-outer,
body.codigopet-pwa-body header#top,
body.codigopet-pwa-body #footer-outer,
body.codigopet-pwa-body #footer-widgets,
body.codigopet-pwa-body #copyright,
body.codigopet-pwa-body #slide-out-widget-area,
body.codigopet-pwa-body #slide-out-widget-area-bg,
body.codigopet-pwa-body #to-top {
    display: none !important;
}

body.codigopet-pwa-body #ajax-content-wrap,
body.codigopet-pwa-body .blurred-wrap,
body.codigopet-pwa-body .container-wrap,
body.codigopet-pwa-body .container.main-content,
body.codigopet-pwa-body .row,
body.codigopet-pwa-body #primary,
body.codigopet-pwa-body #main,
body.codigopet-pwa-body .woocommerce {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.codigopet-pwa-body .woocommerce {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 26px 18px !important;
    box-sizing: border-box !important;
}

body.codigopet-pwa-body .woocommerce h2 {
    margin: 0 0 22px !important;
    color: #21124f !important;
    font-size: 36px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.055em !important;
    text-align: center !important;
}

body.codigopet-pwa-body .woocommerce h2::before {
    content: "";
    display: block;
    width: 92px;
    height: 92px;
    margin: 0 auto 18px;
    border-radius: 28px;
    background:
        url("/wp-content/uploads/2024/07/logo-solo.png") center / contain no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.95), rgba(243,246,255,0.98));
    box-shadow:
        0 18px 34px rgba(111, 60, 255, 0.18),
        0 8px 18px rgba(18, 24, 39, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.95);
}

body.codigopet-pwa-body form.login,
body.codigopet-pwa-body form.woocommerce-form-login {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 28px 22px 24px !important;
    border: 1px solid rgba(255,255,255,0.78) !important;
    border-radius: 34px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,248,255,0.94)) !important;
    box-shadow:
        0 30px 80px rgba(18, 24, 39, 0.16),
        0 12px 32px rgba(111, 60, 255, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-sizing: border-box !important;
}

body.codigopet-pwa-body form.login .form-row {
    margin: 0 0 16px !important;
    padding: 0 !important;
}

body.codigopet-pwa-body form.login label {
    display: block !important;
    margin: 0 0 8px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
}

body.codigopet-pwa-body form.login input.input-text,
body.codigopet-pwa-body form.login input[type="text"],
body.codigopet-pwa-body form.login input[type="email"],
body.codigopet-pwa-body form.login input[type="password"] {
    width: 100% !important;
    min-height: 56px !important;
    padding: 0 17px !important;
    border: 1px solid rgba(111, 60, 255, 0.14) !important;
    border-radius: 19px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.98)) !important;
    color: #172033 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    outline: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 10px 20px rgba(18, 24, 39, 0.04) !important;
    box-sizing: border-box !important;
}

body.codigopet-pwa-body form.login input.input-text:focus,
body.codigopet-pwa-body form.login input[type="text"]:focus,
body.codigopet-pwa-body form.login input[type="email"]:focus,
body.codigopet-pwa-body form.login input[type="password"]:focus {
    border-color: rgba(111, 60, 255, 0.34) !important;
    box-shadow:
        0 0 0 5px rgba(111, 60, 255, 0.08),
        0 16px 28px rgba(111, 60, 255, 0.08) !important;
}

body.codigopet-pwa-body .password-input {
    display: block !important;
    width: 100% !important;
}

body.codigopet-pwa-body .woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 6px 0 18px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.codigopet-pwa-body #rememberme {
    width: 18px !important;
    height: 18px !important;
    accent-color: #6f3cff;
}

body.codigopet-pwa-body form.login button.button,
body.codigopet-pwa-body form.login button[type="submit"],
body.codigopet-pwa-body form.login .woocommerce-button {
    width: 100% !important;
    min-height: 58px !important;
    margin: 8px 0 0 !important;
    border: 0 !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, #6f3cff 0%, #8f47ff 48%, #00d9b8 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    text-transform: none !important;
    box-shadow:
        0 18px 34px rgba(111, 60, 255, 0.24),
        0 8px 18px rgba(0, 238, 184, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

body.codigopet-pwa-body .lost_password {
    margin: 18px 0 0 !important;
    text-align: center !important;
}

body.codigopet-pwa-body .lost_password a {
    color: #6f3cff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

body.codigopet-pwa-body .woocommerce::after {
    content: "Código Pet · Protección inteligente para mascotas";
    margin-top: 22px;
    color: rgba(33, 18, 79, 0.48);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}