/* Auth Gateway — estilos propios. Tema "Atlas": B2B SaaS premium sobre una foto real de espacio profundo (assets/space-bg.webp, servida en same-origin por el propio gateway vía /auth/static/ — sin CDN ni host externo, cumple img-src 'self' de la CSP). Comprimida a propósito (WebP q65, 1280×853, ~45KB) para que cargue rápido. El acento morado de marca (logo/botones) se mantiene; solo cambia la imagen de fondo. */ :root { --bg-0: #020306; --bg-1: #060a16; --bg-2: #0b1224; --card: rgba(18, 24, 46, 0.30); --card-2: rgba(10, 14, 30, 0.46); --line: rgba(168, 139, 250, 0.22); --line-strong: rgba(196, 181, 253, 0.45); --text: #eef1fb; --muted: #9aa6c8; /* Token propio para la línea bajo el rótulo de marca. --muted se eligió sobre la foto de espacio, que es muy oscura; sobre la foto de otro sitio (una parrilla con humo claro) el mismo gris se queda en 4.4:1 y no llega al mínimo de WCAG. Un tono más claro cumple con margen en CUALQUIER fondo sin tener que oscurecer cada foto hasta apagarla. */ --brand-tag: #bcc4dc; --accent: #a855f7; --accent-2: #7c3aed; --accent-soft: #c4b5fd; --accent-dark: #6d28d9; --danger: #ff6b81; --ok: #4ce0a0; --glow: rgba(168, 85, 247, 0.4); } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { overflow-x: hidden; } body { margin: 0; min-height: 100vh; color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ── Fondo: foto real de espacio (planeta con anillos, asteroides, destello solar, Vía Láctea) + oscurecido para que el texto/tarjeta lean bien. ──── */ .auth-body { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; isolation: isolate; overflow: hidden; background-color: var(--bg-0); /* Ruta relativa a esta hoja de estilos (que ya vive bajo /static/), NO al documento — "static/..." aquí apuntaría a /static/static/... (404). --auth-bg lo inyecta el propio gateway en el del login según el sitio (brand.background de authgateway.json); si el sitio no declara ninguno, se queda el espacio profundo genérico. */ background-image: var(--auth-bg, url("space-bg.webp")); background-size: cover; background-position: center 38%; background-repeat: no-repeat; } /* Oscurecido + viñeta sobre la foto: profundidad fotográfica y contraste suficiente para que la tarjeta (semitransparente) y el texto sigan siendo legibles encima de una imagen con zonas muy brillantes (el sol). */ .auth-body::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(150% 105% at 50% 42%, transparent 35%, rgba(1, 1, 3, 0.55) 100%), linear-gradient(180deg, rgba(2, 3, 8, 0.35) 0%, rgba(2, 3, 8, 0.55) 100%); } /* ── Tarjeta de autenticación (glass premium) ─────────────────────────── */ .login-card, .account-card { position: relative; z-index: 1; width: 100%; max-width: 920px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 0; /* Menos blur/opacidad que antes: se ve el fondo (nebulosa/partículas/ondas) a través de la tarjeta, sigue siendo "glass" pero más transparente. */ backdrop-filter: blur(11px) saturate(150%); -webkit-backdrop-filter: blur(11px) saturate(150%); box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.06), 0 0 50px rgba(109, 40, 217, 0.22), 0 0 120px rgba(168, 85, 247, 0.14), 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); overflow: hidden; } .login-card { min-height: 560px; } .account-card { max-width: 780px; padding: 32px; } /* ── Split: marca a la izquierda, formulario a la derecha ─────────────── */ .login-split { display: grid; grid-template-columns: 0.92fr 1.08fr; } .brand-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 64px 34px; background: radial-gradient(420px 300px at 50% 0%, rgba(139, 92, 246, 0.30), transparent 70%), linear-gradient(160deg, rgba(109, 40, 217, 0.26), rgba(30, 27, 75, 0.32) 62%, rgba(10, 14, 30, 0.35)); border-right: 1px solid var(--line); text-align: center; } .brand-panel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(240px 120px at 50% 108%, rgba(168, 85, 247, 0.28), transparent 70%); pointer-events: none; } .brand-logo { position: relative; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: linear-gradient(145deg, rgba(168, 85, 247, 0.18), rgba(109, 40, 217, 0.10)); border: 1px solid var(--line-strong); box-shadow: 0 0 26px rgba(168, 85, 247, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .brand-logo svg { width: 44px; height: 44px; display: block; filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5)); } .brand-name { position: relative; margin: 0; font-size: 26px; font-weight: 800; letter-spacing: 0.06em; background: linear-gradient(90deg, var(--accent-soft), var(--accent) 55%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-tag { position: relative; margin: 0; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-tag); } /* ── Panel del formulario ─────────────────────────────────────────────── */ .form-panel { padding: 64px 46px; display: flex; flex-direction: column; justify-content: center; } .welcome { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } .welcome-sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; } .field { display: block; margin-bottom: 16px; } .field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.01em; } .field input, .field select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: inherit; transition: border-color .15s ease, box-shadow .15s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .field input::placeholder { color: var(--muted); } .field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22), 0 0 18px rgba(168, 85, 247, 0.18); } /* Fila Recuérdame / contraseña olvidada */ .field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 16px; flex-wrap: wrap; } .remember { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; } .remember input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; } /* Texto de "¿Olvidaste tu contraseña?": deliberadamente inerte (no es un , no navega ni ejecuta nada) — pendiente de flujo real. */ .forgot-link { font-size: 13px; color: var(--muted); cursor: default; } /* Selector .btn perdido en un cambio anterior (quedaban las declaraciones huérfanas sin selector = CSS inválido, el navegador las descartaba: el botón perdía forma/relleno y caía al botón nativo). Reset explícito del estilo nativo también: sin appearance:none algunos navegadores ignoran el gradiente/box-shadow de