/* Pantallas públicas: registro, contraseña nueva y avisos. Sigue la forma de la pantalla de alta de tailadmin: formulario a la izquierda, panel de marca a la derecha. Es autónomo a propósito: NO carga login.css. Ese archivo estiliza `input[type=text]` y `[type=password]` a nivel global —centrados, 85% de ancho, sin etiqueta— y esas reglas peleaban con todo lo de acá. El login viejo sigue usándolo tal cual; el día que se unifiquen, este archivo es la base. Tiene los dos temas. El interruptor de la aplicación vive en el bundle y estas pantallas se sirven antes de que exista sesión, así que traen el suyo (`views/login/_tema.ejs`) — pero comparten con él la clave de localStorage y la clase `dark` en , de modo que lo que se elige acá sigue puesto al entrar, y al revés. El CSS NO mira `prefers-color-scheme`: quien decide es el script, que ya cae en la preferencia del sistema cuando no hay nada guardado. Con la media query puesta además, un sistema en oscuro pisaría el "claro" que la persona eligió a mano. */ /* Claro. */ :root { --auth-bg: #f8fafc; --auth-panel: #eef2f7; --auth-surface: #ffffff; --auth-border: #d7dfea; --auth-text: #0f172a; --auth-muted: #64748b; --auth-placeholder: #94a3b8; --auth-accent: #2563eb; --auth-accent-hover: #1d4ed8; --auth-danger: #d92d20; --auth-danger-text: #b42318; --auth-danger-soft: rgb(217 45 32 / .07); --auth-danger-line: rgb(217 45 32 / .25); --auth-ok: #087443; --auth-ok-soft: rgb(18 183 106 / .12); /* La retícula del panel de marca y el fondo del bloque que descubre la casilla de empresa: en claro tienen que oscurecer, no aclarar. */ --auth-veil: rgb(15 23 42 / .045); --auth-grid: rgb(15 23 42 / .05); } /* Oscuro. La clase la pone el script del antes de pintar, así que no hay un cuadro en claro antes de oscurecerse. */ :root.dark { --auth-bg: #0b1120; --auth-panel: #101828; --auth-surface: #1a2436; --auth-border: #344054; --auth-text: #e7ecf3; --auth-muted: #98a2b3; --auth-placeholder: #667085; --auth-accent: #2563eb; --auth-accent-hover: #1d4ed8; --auth-danger: #f97066; --auth-danger-text: #fda29b; --auth-danger-soft: rgb(249 112 102 / .09); --auth-danger-line: rgb(249 112 102 / .35); --auth-ok: #32d583; --auth-ok-soft: rgb(18 183 106 / .13); --auth-veil: rgb(255 255 255 / .02); --auth-grid: rgb(255 255 255 / .028); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--auth-bg); color: var(--auth-text); font-family: "Outfit", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased; } a { color: var(--auth-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* --- armazón de dos columnas --- */ .tp-auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .tp-auth-form { display: flex; flex-direction: column; justify-content: center; padding: 40px 24px; } .tp-auth-inner { width: 100%; max-width: 460px; margin: 0 auto; } /* El panel de marca es decoración: debajo de 1024px se va entero en vez de apretarse, porque el formulario necesita todo el ancho para que los dos campos de nombre entren uno al lado del otro. */ .tp-auth-brand { position: relative; display: grid; place-items: center; padding: 40px; background: var(--auth-panel); overflow: hidden; } @media (max-width: 1023px) { .tp-auth { grid-template-columns: 1fr; } .tp-auth-brand { display: none; } } /* La retícula del fondo, dibujada con gradientes en vez de una imagen: son dos líneas de CSS contra un archivo más que copiar a mano a dist/public/resources. */ .tp-auth-brand::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--auth-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--auth-grid) 1px, transparent 1px); background-size: 68px 68px; /* Se apaga hacia el centro para que el logo no compita con la grilla. */ mask-image: radial-gradient(ellipse at center, transparent 12%, #000 62%); } .tp-auth-brand-inner { position: relative; text-align: center; max-width: 340px; } .tp-auth-logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; } /* El cuadrado azul redondeado con el icono adentro, igual que el de la barra lateral de la aplicación. */ .tp-auth-marca { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: var(--auth-accent); color: #fff; } .tp-auth-logo span { font-size: 34px; font-weight: 700; letter-spacing: .01em; } .tp-auth-brand p { margin: 0; color: var(--auth-muted); font-size: 14.5px; line-height: 1.6; } /* --- encabezado del formulario --- */ .tp-auth-volver { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 34px; color: var(--auth-muted); font-size: 14px; } .tp-auth-volver:hover { color: var(--auth-text); text-decoration: none; } .tp-auth h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -.01em; } .tp-auth-sub { margin: 0 0 26px; color: var(--auth-muted); font-size: 14.5px; } /* --- campos --- */ .tp-auth-campo { margin-bottom: 16px; } /* Dos por fila (nombres/apellidos). Se apilan en pantalla angosta. */ .tp-auth-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .tp-auth-fila { grid-template-columns: 1fr; } } .tp-auth-campo label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 500; color: var(--auth-text); } /* El asterisco de obligatorio, para no repetirlo en cada etiqueta del HTML. */ .tp-auth-campo label.req::after { content: "*"; margin-left: 3px; color: var(--auth-danger); } .tp-auth-campo input { width: 100%; height: 46px; padding: 0 15px; border: 1px solid var(--auth-border); border-radius: 8px; background: var(--auth-surface); color: var(--auth-text); font-family: inherit; font-size: 14.5px; transition: border-color .15s ease-out, box-shadow .15s ease-out; } .tp-auth-campo input::placeholder { color: var(--auth-placeholder); } .tp-auth-campo input:focus { outline: none; border-color: var(--auth-accent); box-shadow: 0 0 0 3px rgb(37 99 235 / .22); } /* El navegador pinta de rojo cualquier campo que no cumpla el `pattern` apenas se envía el formulario, no mientras se escribe: :user-invalid y no :invalid, que marcaría en rojo un campo vacío que la persona ni tocó. */ .tp-auth-campo input:user-invalid { border-color: var(--auth-danger); } .tp-auth-nota { margin: 8px 0 0; color: var(--auth-muted); font-size: 12.5px; line-height: 1.5; } /* --- casilla de empresa y el bloque que descubre --- */ .tp-auth-check { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 4px; } .tp-auth-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--auth-accent); flex: 0 0 auto; cursor: pointer; } .tp-auth-check label { font-size: 14px; color: var(--auth-text); cursor: pointer; } /* Lo abre el CSS, sin una línea de JavaScript. Con `:has()` la casilla puede quedar donde corresponde —dentro de su fila, junto a la etiqueta— en vez de tener que ser hermana del bloque. El primer intento usó `#esEmpresa:checked ~ .tp-auth-empresa`, que obliga a sacar la casilla de su contenedor y deja un marcado retorcido para que el selector funcione. */ .tp-auth-empresa { display: none; margin-top: 16px; padding: 16px; border: 1px solid var(--auth-border); border-radius: 10px; background: var(--auth-veil); } .tp-auth-check:has(input:checked) + .tp-auth-empresa { display: block; } /* --- botón y pie --- */ .tp-auth-btn { width: 100%; height: 48px; margin-top: 22px; border: 0; border-radius: 8px; background: var(--auth-accent); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s ease-out; } .tp-auth-btn:hover { background: var(--auth-accent-hover); } .tp-auth-pie { margin: 22px 0 0; text-align: center; color: var(--auth-muted); font-size: 14px; } /* --- errores del servidor --- */ .tp-auth-errores { margin: 0 0 20px; padding: 13px 16px; border: 1px solid var(--auth-danger-line); border-radius: 10px; background: var(--auth-danger-soft); color: var(--auth-danger-text); font-size: 13.5px; } .tp-auth-errores ul { margin: 0; padding-left: 18px; } .tp-auth-errores li { margin: 3px 0; } /* --- pantalla de aviso (revise su correo / confirmada / enlace vencido) --- */ .tp-auth-icono { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 22px; border-radius: 50%; font-size: 27px; line-height: 1; } .tp-auth-ok .tp-auth-icono { background: var(--auth-ok-soft); color: var(--auth-ok); } .tp-auth-error .tp-auth-icono { background: var(--auth-danger-soft); color: var(--auth-danger); } .tp-auth-mensaje { margin: 0 0 28px; color: var(--auth-muted); font-size: 15px; line-height: 1.6; } .tp-auth-enlace { display: inline-block; padding: 13px 30px; border-radius: 8px; background: var(--auth-accent); color: #fff; font-weight: 600; font-size: 14.5px; } .tp-auth-enlace:hover { background: var(--auth-accent-hover); text-decoration: none; } /* --- interruptor de tema ----------------------------------------------------- Fijo en la esquina, porque en escritorio la mitad derecha es el panel de marca y no hay una barra donde apoyarlo. Lleva fondo propio para que se lea sobre las dos columnas, que son de colores distintos. Los dos iconos están siempre en el DOM y el CSS elige cuál se ve según el tema: así el script solo tiene que alternar una clase y no reescribir el botón. Se muestra el icono de a DÓNDE se va, no el del tema actual. */ .tp-tema { position: fixed; top: 20px; right: 20px; z-index: 10; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--auth-border); border-radius: 10px; background: var(--auth-surface); color: var(--auth-muted); cursor: pointer; transition: color .15s ease-out, border-color .15s ease-out; } .tp-tema:hover { color: var(--auth-text); border-color: var(--auth-accent); } .tp-tema .tp-tema-luna { display: block; } .tp-tema .tp-tema-sol { display: none; } :root.dark .tp-tema .tp-tema-luna { display: none; } :root.dark .tp-tema .tp-tema-sol { display: block; }