/* Acceso de WordPress con la identidad visual de la academia.
   Solo presentación: el formulario, sus campos y su flujo siguen siendo los de
   WordPress, que conserva autenticación, nonces y recuperación. */
:root {
    /* D26: fondo blanco con paneles de vidrio. Los mismos tokens en app.css,
       shop.css y login.css, porque cada pantalla carga solo las suyas. */
    /* Rosado pastel: el vidrio blanco necesita un fondo con color para
       despegarse; sobre blanco se confundía. */
    --ac-canvas:
        radial-gradient(38rem 30rem at 108% -6%, rgba(255, 150, 140, .45), transparent 62%),
        radial-gradient(34rem 30rem at -14% 20rem, rgba(255, 196, 176, .55), transparent 62%),
        radial-gradient(30rem 26rem at 96% 46rem, rgba(120, 200, 255, .28), transparent 62%),
        #fbe4df;
    --ac-bg: #fbe4df;
    --ac-ink: #0e1320;
    --ac-ink-soft: #2b3342;
    --ac-muted: #5f6878;
    --ac-faint: #a8afba;
    --ac-on-ink: #ffffff;
    --ac-line: rgba(14, 19, 32, .10);
    --ac-hover: rgba(14, 19, 32, .05);
    --ac-panel: rgba(255, 255, 255, .64);
    --ac-panel-strong: rgba(255, 255, 255, .86);
    --ac-glass-edge: rgba(255, 255, 255, .92);
    --ac-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 4px 12px -4px rgba(120, 40, 40, .14), 0 20px 44px -16px rgba(120, 40, 40, .32);
    --ac-blur: blur(18px) saturate(170%);
    --ac-field: rgba(255, 255, 255, .92);
    --ac-field-line: rgba(14, 19, 32, .16);
    --ac-accent: #5cc8ff;
    --ac-accent-strong: #0a8fd6;
    /* El acento es vidrio transparente: sin tinte propio, deja ver el color
       del fondo a través. Un tinte celeste sobre el rosado se veía gris. Lo que
       lo hace vidrio es el brillo que se apaga hacia abajo, el canto y la sombra. */
    --ac-accent-glass: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .12) 58%, rgba(255, 255, 255, .24) 100%);
    --ac-accent-edge: rgba(255, 255, 255, .95);
    --ac-accent-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(255, 255, 255, .4) inset, 0 10px 24px -10px rgba(120, 40, 40, .42);
    --ac-accent-blur: blur(10px) saturate(190%) brightness(1.06);
    --ac-focus: #2563eb;
    --ac-ok: #15803d;
    --ac-ok-bg: #ecfdf3;
    --ac-ok-line: #86efac;
    --ac-warn: #b45309;
    --ac-warn-bg: #fffbeb;
    --ac-warn-line: #fcd34d;
    --ac-danger: #b91c1c;
    --ac-danger-bg: #fef2f2;
    --ac-danger-line: #fca5a5;
    /* Vencimientos: verde flúor con tiempo, rojo a siete días o menos. */
    --ac-fluor: #39ff14;
    --ac-alert: #dc2626;
    color-scheme: light;
}

body.login {
    background: var(--ac-canvas);
    color: var(--ac-ink);
    font: 16px/1.5 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    /* En columna: el selector de idioma es hermano de #login y en fila se
       colocaba a su lado, estrujando el formulario contra el borde. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    padding-top: max(24px, env(safe-area-inset-top, 0px));
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

body.login {
    /* Ningun nombre de academia, por largo que sea, debe desbordar la pantalla. */
    overflow-x: hidden;
}

body.login #login,
body.login #login * {
    box-sizing: border-box;
}

body.login #login {
    width: 100%;
    max-width: 400px;
    padding: 0;
    margin: 0;
}

/* Marca: el nombre del sitio, no una marca fija en el código. */
body.login h1 a,
body.login .wp-login-logo a {
    background: none;
    width: auto;
    height: auto;
    text-indent: 0;
    margin: 0 0 24px;
    padding: 0;
    display: block;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ac-ink);
    text-decoration: none;
    overflow: visible;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

/* Solo los formularios de acceso son panel. El selector de idioma tambien es
   un <form> y convertirlo en panel lo desbordaba fuera de la pantalla. */
body.login #loginform,
body.login #lostpasswordform,
body.login #registerform,
body.login #resetpassform {
    background: var(--ac-panel);
    border: 1px solid var(--ac-glass-edge);
    border-radius: 20px;
    padding: 26px;
    -webkit-backdrop-filter: var(--ac-blur);
    backdrop-filter: var(--ac-blur);
    box-shadow: var(--ac-shadow);
    margin: 0;
    overflow: hidden;
}

body.login form label,
body.login .forgetmenot label {
    color: var(--ac-muted);
    font-size: 12px;
    line-height: 1.5;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
    /* 16px evita que Safari haga zoom al enfocar el campo en iPhone. */
    font: 400 16px/1.4 system-ui, sans-serif;
    width: 100%;
    min-height: 46px;
    padding: 12px;
    background: var(--ac-field);
    color: var(--ac-ink);
    border: 1px solid var(--ac-field-line);
    border-radius: 10px;
    box-shadow: none;
    margin: 0 0 14px;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
    border-color: var(--ac-focus);
    box-shadow: none;
}

body.login :focus-visible {
    outline: 3px solid var(--ac-focus);
    outline-offset: 4px;
}

body.login .wp-pwd {
    position: relative;
}

body.login .wp-hide-pw {
    top: 0;
    right: 1px;
    height: 46px;
    width: 46px;
    color: var(--ac-muted);
}

body.login .wp-hide-pw:hover {
    color: var(--ac-ink);
}

body.login .submit .button-primary,
body.login .button-primary {
    float: none;
    width: 100%;
    min-height: 44px;
    margin: 4px 0 0;
    padding: 11px 18px;
    font: 650 14px/1.4 Inter, system-ui, sans-serif;
    background: var(--ac-ink);
    color: var(--ac-on-ink);
    border: 1px solid var(--ac-ink);
    border-radius: 30px;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
    background: var(--ac-ink);
    color: var(--ac-on-ink);
    filter: brightness(.9);
}

body.login .forgetmenot {
    float: none;
    display: block;
    margin: 14px 0 4px;
}

body.login .forgetmenot input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    vertical-align: -4px;
    background: var(--ac-field);
    border: 1px solid var(--ac-field-line);
    border-radius: 5px;
}

body.login .forgetmenot input[type="checkbox"]:checked::before {
    content: "\f147";
    color: var(--ac-ink);
    margin: -3px 0 0 -4px;
}

/* Enlaces bajo el formulario: recuperar contraseña y volver al sitio. */
body.login #nav,
body.login #backtoblog {
    margin: 16px 0 0;
    padding: 0;
    text-align: center;
    font-size: 13px;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-link {
    color: var(--ac-muted);
    text-decoration: none;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-link:hover {
    color: var(--ac-ink);
    text-decoration: underline;
}

/* Avisos y errores: el texto lo escribe WordPress; aquí solo cambia el aspecto. */
body.login .notice,
body.login .message,
body.login #login_error,
body.login .success {
    background: var(--ac-panel);
    border: 1px solid var(--ac-line);
    border-left-width: 3px;
    border-radius: 12px;
    color: var(--ac-ink);
    font-size: 13px;
    padding: 12px 14px;
    margin: 0 0 18px;
    box-shadow: none;
}

body.login #login_error {
    border-left-color: var(--ac-danger-line);
}

body.login .message,
body.login .success {
    border-left-color: var(--ac-focus);
}

body.login .notice a,
body.login #login_error a,
body.login .message a {
    color: var(--ac-ink);
}

/* Fila discreta bajo los enlaces; nunca un panel ni algo que desborde. */
body.login .language-switcher {
    margin: 18px 0 0;
    max-width: 100%;
}

body.login .language-switcher form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

body.login .language-switcher label {
    margin: 0;
    font-size: 12px;
}

body.login .language-switcher label > span {
    display: none;
}

body.login .language-switcher select {
    max-width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
    background: var(--ac-field);
    color: var(--ac-ink);
    border: 1px solid var(--ac-field-line);
    border-radius: 10px;
}

body.login .language-switcher .button {
    min-height: 40px;
    padding: 8px 16px;
    font: 650 13px/1.4 Inter, system-ui, sans-serif;
    background: transparent;
    color: var(--ac-muted);
    border: 1px solid var(--ac-line);
    border-radius: 30px;
    text-shadow: none;
    box-shadow: none;
}

body.login .language-switcher .button:hover {
    color: var(--ac-ink);
    border-color: var(--ac-ink);
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    body.login * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Registro y nueva contraseña (D25). WordPress trae estas piezas con el
   aspecto de su escritorio: barra de fuerza verde claro, botón azul y una
   sugerencia en letra de cuerpo. */
body.login #reg_passmail,
body.login .indicator-hint,
body.login .pw-weak label {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ac-muted);
}

body.login #pass-strength-result {
    margin: 8px 0 0;
    padding: 8px 12px;
    background: var(--ac-hover);
    border: 1px solid var(--ac-line);
    border-radius: 10px;
    color: var(--ac-muted);
    font: 600 13px/1.4 Inter, system-ui, sans-serif;
    text-align: left;
    box-shadow: none;
}

body.login #pass-strength-result.short,
body.login #pass-strength-result.bad {
    background: var(--ac-danger-bg);
    border-color: var(--ac-danger-line);
    color: var(--ac-danger);
}

body.login #pass-strength-result.good {
    background: var(--ac-warn-bg);
    border-color: var(--ac-warn-line);
    color: var(--ac-warn);
}

body.login #pass-strength-result.strong {
    background: var(--ac-ok-bg);
    border-color: var(--ac-ok-line);
    color: var(--ac-ok);
}

body.login .reset-pass-submit {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.login .button.wp-generate-pw {
    float: none;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 11px 18px;
    background: transparent;
    color: var(--ac-ink);
    border: 1px solid var(--ac-line);
    border-radius: 30px;
    font: 650 14px/1.4 Inter, system-ui, sans-serif;
    box-shadow: none;
}

body.login .button.wp-generate-pw:hover,
body.login .button.wp-generate-pw:focus {
    background: var(--ac-hover);
    color: var(--ac-ink);
    border-color: var(--ac-line);
}

/* D26: botones y avisos del acceso sobre fondo claro. */
body.login .button-primary:hover,
body.login .button-primary:focus {
    background: var(--ac-ink-soft);
    color: var(--ac-on-ink);
    filter: none;
}

body.login .notice,
body.login .message,
body.login #login_error,
body.login .success {
    background: var(--ac-panel-strong);
    border-color: var(--ac-glass-edge);
    box-shadow: var(--ac-shadow);
    color: var(--ac-ink);
}

body.login .message,
body.login .success {
    border-left-color: var(--ac-accent-strong);
}

body.login #login_error {
    border-left-color: var(--ac-danger-line);
}

body.login .language-switcher .button:hover {
    background: var(--ac-panel-strong);
}

/* Los campos marcan el foco con su propio borde oscuro. El contorno azul de
   3 px, separado del campo, invadía la etiqueta de arriba y tapaba el texto. */
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login input[type="text"]:focus-visible,
body.login input[type="password"]:focus-visible,
body.login input[type="email"]:focus-visible,
body.login select:focus-visible {
    outline: none;
    border-color: var(--ac-ink);
    box-shadow: 0 0 0 1px var(--ac-ink);
}

/* Registro (D30): la contraseña se elige al registrarse, así que el aviso
   de «recibirás un correo para crearla» ya no corresponde. */
body.login #reg_passmail {
    display: none;
}