/* ===== Custom Login (theme-scoped) ===== Accesible, ligero y mantenible. Buenas prácticas: - No tocar clases WP salvo para estilizar. - Alto contraste y foco visible. - Evitar !important salvo casos puntuales del core. - Compatibilidad RTL por defecto (no fijas text-align innecesarios). - Soporte base para dark mode con prefers-color-scheme. */ /* Logo: usa SVG si existe; si no, PNG de fallback */ .login h1 a { background-image: url('login-logo.svg'), url('login-logo.png'); background-repeat: no-repeat; background-size: contain; width: 320px; height: 84px; text-indent: -9999px; /* oculta el texto manteniendo accesibilidad via title del link */ overflow: hidden; } /* Lienzo general */ body.login { background: #f7f9fb; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; } /* Tarjeta del formulario */ #login { padding: 24px 24px 32px; } .login form { border: 1px solid #e5e7eb; box-shadow: 0 6px 18px rgba(0,0,0,.06); border-radius: 12px; padding-top: 22px; } /* Etiquetas e inputs */ .login label { font-weight: 600; color: #111827; } .login form .input, .login input[type="text"], .login input[type="password"] { border-radius: 8px; border-color: #cbd5e1; box-shadow: none; } .login form .input:focus, .login input[type="text"]:focus, .login input[type="password"]:focus { border-color: #2e7df6; box-shadow: 0 0 0 2px rgba(46,125,246,.15); outline: none; } /* Botón principal */ .wp-core-ui .button-primary { background: #2e7df6; border-color: #2e7df6; text-shadow: none; box-shadow: none; border-radius: 8px; padding: 0 18px; height: 38px; line-height: 36px; font-weight: 600; } .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { background: #1f6de3; border-color: #1f6de3; } /* Enlaces inferiores */ .login #nav a, .login #backtoblog a { color: #374151; text-decoration: none; } .login #nav a:hover, .login #backtoblog a:hover { color: #1f6de3; text-decoration: underline; } /* Mensajes de notice/error: mejora contraste */ .login .message, .login .notice, .login #login_error { border-left-width: 4px; border-left-color: #2e7df6; border-radius: 8px; } /* Dark mode opcional: solo si el tiene la clase .has-dark-login */ @media (prefers-color-scheme: dark) { body.login.has-dark-login { background: #0b1220; color: #e5e7eb; } body.login.has-dark-login .login form { background: #0f172a; border-color: #1f2937; box-shadow: 0 6px 18px rgba(0,0,0,.45); } body.login.has-dark-login .login label { color: #e5e7eb; } body.login.has-dark-login .login form .input, body.login.has-dark-login .login input[type="text"], body.login.has-dark-login .login input[type="password"] { background: #111827; color: #e5e7eb; border-color: #374151; } body.login.has-dark-login .login #nav a, body.login.has-dark-login .login #backtoblog a { color: #cbd5e1; } }