/** * LM Contable — Pagina de login — Design System v3.0 * Requiere haber cargado antes styles/index.css. */ /* Fondo de la pantalla de login: foto de oficina + dashboard de LM Contable (fuente: Documents\Mejoras\inicio-sesionv2.png, 1672x941, 2.2MB -- v2, reemplaza a Inicio-sesion.png) optimizada a WebP -- login-bg.webp (1680px, calidad 78, ~172KB) para escritorio/tablet, login-bg-mobile.webp (900px, calidad 72, ~62KB) para movil, en vez de servir el PNG completo (~9x-13x mas liviano). background-color de respaldo evita un flash blanco mientras la imagen carga o si falla. El degradado en ::before (no sobre la imagen misma, para no perder calidad) oscurece la foto lo suficiente para que la tarjeta blanca lea con buen contraste sin importar en qué zona de la composición caiga. */ .auth-screen { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; isolation: isolate; padding: var(--ds-space-2); background-color: var(--ds-primary-950); background-image: url('assets/branding/backgrounds/login-bg.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } .auth-screen::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, rgba(13,17,23,.80), rgba(17,24,39,.62) 50%, rgba(15,23,42,.74)); } @media (min-width: 768px) and (max-width: 1023px) { /* Tablet: el retrato/paisaje intermedio deja menos ancho para respirar -- se recorta un poco mas hacia el centro-derecha (laptop) sin perder el logo de la foto, que sigue cayendo dentro del encuadre. */ .auth-screen { background-position: 60% center; } } @media (max-width: 767px) { /* Movil: en retrato, "cover" recortaria el logo/tagline de la izquierda de la foto para llenar el alto -- se prioriza el laptop/dashboard (mas reconocible recortado) y se sirve la imagen mas liviana. La tarjeta ya trae su propio logo, así que no se pierde marca. */ .auth-screen { background-image: url('assets/branding/backgrounds/login-bg-mobile.webp'); background-position: 68% center; } .auth-screen::before { background: linear-gradient(180deg, rgba(13,17,23,.82), rgba(15,23,42,.86)); } } .auth-card { position: relative; z-index: 1; width: 100%; max-width: 380px; background: var(--ds-card-bg); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-lg); padding: var(--ds-space-4) var(--ds-space-3); } .auth-logo { display: block; max-width: 180px; height: auto; margin: 0 auto var(--ds-space-2); border-radius: var(--ds-radius-input); box-shadow: var(--ds-shadow-md); } /* Logo v6 (lockup "cinta LM"): .auth-card usa --ds-card-bg (blanco en claro, #262626 en oscuro, ver core.css) -- por eso necesita swap, igual que el sidebar. Es un PNG/SVG con fondo transparente (no una tarjeta solida como el v2 viejo), asi que sin el border-radius/box-shadow de .auth-logo, que quedaban raros alrededor de un logo transparente. */ .auth-logo-adaptive { display: flex; justify-content: center; margin: 0 auto var(--ds-space-2); } .auth-logo-adaptive .auth-logo { max-width: 220px; height: 44px; width: auto; margin: 0; border-radius: 0; box-shadow: none; } /* Solo en el login (index.html): el lockup horizontal a 44px de alto no quedaba bien ajustado a lo largo (mucho ancho variable/vacío según el viewport, ver .auth-logo-adaptive arriba) -- se reemplaza por el app icon (cuadrado, fondo/esquinas redondeadas/profundidad ya resueltos dentro del propio asset), sin necesidad de swap claro/oscuro porque no es transparente como el lockup. Sin box-shadow/border-radius acá a propósito: agregarlos encima de un icono que ya trae su propia forma redondeada se veía como una tarjeta encapsulando al icono (dos capas), no como el icono solo. Tamaño fijo nada más. */ .auth-logo-icon { display: block; width: 90px; height: 90px; margin: 0 auto var(--ds-space-2); } .auth-card h1 { font-size: 19px; font-weight: var(--ds-fw-bold); margin: 0 0 4px; color: var(--ds-text); text-align: center; } .auth-card .sub { font-size: 12.5px; color: var(--ds-text-secondary); margin-bottom: var(--ds-space-3); text-align: center; } .auth-field { margin-bottom: var(--ds-space-2); } .auth-field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ds-text-muted); font-weight: var(--ds-fw-semibold); display: block; margin-bottom: 5px; } .auth-field input { width: 100%; height: 48px; padding: 0 14px; border-radius: var(--ds-radius-input); border: 1px solid var(--ds-input-border); font-size: 14px; background: var(--ds-surface); color: var(--ds-text); font-family: var(--ds-font); transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast); } .auth-field input:focus { outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 4px rgba(37,99,235,.15); } .auth-error { background: var(--ds-danger-bg); color: var(--ds-danger); border-radius: var(--ds-radius-input); padding: 9px 12px; font-size: 12.5px; margin-bottom: var(--ds-space-2); display: none; } .auth-error.show { display: block; } .auth-card .ds-btn { width: 100%; justify-content: center; padding: 13px; font-size: 13.5px; margin-top: var(--ds-space-half); } .hidden { display: none !important; } /* Mostrar/ocultar contraseña -- mismo patron que .ds-search de forms.css (input con icono superpuesto), pero a la derecha y clicable en vez de decorativo. */ .auth-password-wrap { position: relative; display: flex; } .auth-password-wrap input { padding-right: 44px; } .auth-password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--ds-radius-btn); cursor: pointer; color: var(--ds-text-muted); padding: 0; } .auth-password-toggle:hover { color: var(--ds-text); background: var(--ds-bg-secondary); } .auth-password-toggle:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 1px; } .auth-password-toggle svg, .auth-password-toggle i { width: 18px; height: 18px; } /* Shell propia sobre Cloudflare Turnstile (ver auth.js): Turnstile corre en modo appearance:'interaction-only' + execution:'execute' -- el widget real (#turnstileWidget) no ocupa espacio ni se ve en el caso comun (>95% de los usuarios pasan el chequeo en segundo plano sin reto interactivo); lo que se ve siempre es ESTA UI propia, que sí se adapta a --ds-* (antes el widget de Cloudflare quedaba fijo en theme:'light', sin adaptarse a oscuro -- reportado). .hidden (ver auth-shell.css linea 84) sigue el mismo patrón que #forgotForm más abajo -- JS decide qué se muestra, no :empty (el contenedor ahora SIEMPRE tiene markup propio, nunca queda vacío aunque Turnstile no esté configurado). */ .auth-turnstile { margin: var(--ds-space-2) 0; } .auth-turnstile.hidden { display: none; margin: 0; } /* Estado "Verificando…": el disabled nativo ya cubre opacidad/cursor (.ds-btn:disabled en buttons.css) -- aria-busy es solo semantico aca. */ .auth-turnstile-verified { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-1); width: 100%; padding: 12px 14px; border-radius: var(--ds-radius-button); background: var(--ds-success-bg); color: var(--ds-success-badge-text); border: 1px solid var(--ds-success-badge-border); font-size: 13.5px; font-weight: var(--ds-fw-semibold); } .auth-turnstile-verified.hidden { display: none; } .auth-turnstile-verified-label { display: inline-flex; align-items: center; gap: var(--ds-space-half); } .auth-turnstile-verified-label svg, .auth-turnstile-verified-label i { width: 17px; height: 17px; } .auth-turnstile-refresh { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: none; padding: 0; background: transparent; color: inherit; cursor: pointer; flex-shrink: 0; transition: background var(--ds-transition-fast); } .auth-turnstile-refresh:hover { background: color-mix(in srgb, currentColor 14%, transparent); } .auth-turnstile-refresh svg, .auth-turnstile-refresh i { width: 15px; height: 15px; } /* Reto interactivo real de Cloudflare (excepcional): cuando aparece, que no quede pegado al boton/chip de arriba. */ #turnstileWidget:not(:empty) { margin-top: var(--ds-space-1); display: flex; justify-content: center; } .auth-link { display: block; text-align: center; margin-top: var(--ds-space-2); font-size: 12.5px; color: var(--ds-text-secondary); text-decoration: none; } .auth-link:hover { color: var(--ds-accent); text-decoration: underline; } .auth-forgot-intro { font-size: 12.5px; color: var(--ds-text-secondary); margin: 0 0 var(--ds-space-2); line-height: 1.5; } .auth-success { background: var(--ds-success-bg); color: var(--ds-success); border-radius: var(--ds-radius-input); padding: 9px 12px; font-size: 12.5px; margin-bottom: var(--ds-space-2); display: none; } .auth-success.show { display: block; } /* ============================================================ Login (index.html) -- layout "split", a pedido del usuario con foto de referencia: panel de marca + panel de formulario. verify-email.html/ set-password.html adoptan el mismo layout (ver auth-brand.js) -- ambas se abren desde un enlace de correo transaccional y necesitan la misma identidad de marca que el login real (reportado: se habían quedado con la tarjeta centrada vieja cuando index.html paso a split). Las 3 paginas comparten .auth-screen--split y las clases de abajo; .auth-screen/ .auth-card SIN el modificador --split (reglas de arriba) queda como fallback generico, sin pagina que lo use hoy. El panel de marca (izquierda) usa un fondo navy FIJO que no cambia con el tema -- misma decisión que el header de los correos transaccionales: es identidad de marca, no una superficie de la app. El panel de formulario (derecha) sí sigue el tema real (--ds-bg/--ds-text/etc.). En móvil el panel de marca se oculta entero y su lugar lo toma el icono chico dentro de la tarjeta (.auth-mobile-brand-icon). ============================================================ */ .auth-screen--split { padding: 0; display: grid; /* El panel de marca (izquierda) es el que debe tener protagonismo -- logo, mensaje, accesos -- el de formulario (derecha) solo aloja 2 campos y un botón, no necesita tanto ancho. 60/40 a pedido del usuario. */ grid-template-columns: minmax(420px, 60%) 1fr; align-items: stretch; background-image: none; } .auth-screen--split::before { display: none; } .auth-brand-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--ds-space-6) var(--ds-space-5) var(--ds-space-4); /* Sin degradado de fondo por defecto a propósito (reportado): con un degradado ya puesto acá, la foto que el admin sube en Configuración (ver applyLoginBackground en auth.js) quedaba compitiendo/mezclada con él en vez de reemplazarlo limpio. Color solido nada más -- si nadie subió foto, el panel queda liso; si subieron una, es lo único que se ve (más el degradado de oscurecimiento que agrega el JS solo en ese caso, para que el texto siga legible). */ background-color: var(--ds-primary-950); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--ds-white); } /* Isotipo enorme y tenue de fondo (variante "for-dark": mark claro), igual idea que la foto de referencia -- puramente decorativo, nunca cambia con el tema porque el panel tampoco cambia. Se oculta cuando hay una foto personalizada (.has-custom-bg, la agrega applyLoginBackground() en auth.js) -- con una foto real detrás, este listón se sumaba encima de lo que ya haya en la foto (más notorio todavía si la foto también tiene un listón/isotipo, como la primera que se probó) y se veía como "una foto encima de otra" (reportado). Sin foto personalizada sigue igual que siempre. */ .auth-brand-panel.has-custom-bg::after { display: none; } .auth-brand-panel::after { content: ''; position: absolute; z-index: 0; right: -18%; bottom: -20%; width: 85%; aspect-ratio: 1; background: url('assets/branding/logos_v6/lm-isotipo-v6.svg') center / contain no-repeat; opacity: .14; pointer-events: none; } /* Cuadrícula de referencia -- solo en modo editor (pedido: "adicionar una cuadrícula... para que no queden las cosas sin centrar"), puramente visual, nunca aparece en el login real. Puntos, no líneas: mismo efecto de guía que una cuadrícula de Canva/Figma sin competir visualmente con el listón/la foto de fondo de detrás. z-index entre el listón (0) y el contenido (2) -- siempre visible pero nunca tapa logo/texto/íconos. */ .lm-editor-mode .auth-brand-panel::before { content: ''; position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; } .auth-brand-content { position: relative; z-index: 2; } .auth-brand-logo-wrap { display: block; width: fit-content; margin-bottom: var(--ds-space-6); } .auth-brand-logo { display: block; height: 100px; width: auto; } /* width: fit-content en headline/features (y welcomeTitle/subtitle más abajo) -- a pedido: sin esto, al ser bloques de ancho completo por default, la caja del bloque movible (el outline punteado + el cálculo de centrado en setupMovableBlock, admin.js) medía todo el ancho del panel en vez del contenido real (4 íconos, o el texto), así que "el centro de la caja" casi nunca coincidía con "el centro visual del contenido" -- no se podía centrar bien por más que la guía dijera que sí. Con fit-content la caja se ajusta exacto a lo que hay adentro. */ .auth-brand-headline { width: fit-content; font-size: 38px; line-height: 1.2; font-weight: var(--ds-fw-bold); letter-spacing: -0.01em; margin: 0 0 var(--ds-space-6); } /* Las 2 líneas del titular son independientes (ver index.html, #authHeadlineLine1/2 -- applyAuthPageContent() en auth.js les cambia el texto) para poder editar cada una por separado desde Configuración; ambas quedan display:block para el salto de línea, pero el color solo va en la segunda (.accent). blue-500, no blue-400: al subir los íconos a blue-500 (más saturado) este texto se quedaba atrás luciendo más opaco en comparación (reportado) -- mismo tono en los dos ahora. */ .auth-brand-headline span { display: block; } .auth-brand-headline .accent { color: var(--ds-blue-500); } .auth-brand-features { width: fit-content; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--ds-space-3) 0; } /* Línea divisoria entre accesos (a pedido, con foto de referencia) -- border-left en vez de un ::before/::after aparte: no necesita cálculo de alto, hereda el del propio li. Se saca del primer ítem (nada a la izquierda de "Finanzas") y de cualquiera que empiece una fila nueva al envolver en pantallas angostas (:first-child del wrap con flex-wrap ya cubre el caso simple; con 4 ítems nunca envuelve antes del panel móvil, donde este bloque entero se oculta). Ícono y texto centrados en su columna -- antes quedaban pegados a la izquierda, descentrados respecto al ancho real del ícono/label (reportado). */ .auth-brand-features li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 var(--ds-space-3); border-left: 1px solid rgba(255, 255, 255, .14); text-align: center; } .auth-brand-features li:first-child { padding-left: 0; border-left: none; } /* blue-500, no blue-400 (el mismo tono de "en un solo lugar"): a ese trazo fino de Lucide contra el navy, el pastel de blue-400 se veía deslavado/ grisáceo -- se necesita un azul más saturado para que efectivamente lea como azul, no que el texto sólido y el ícono de trazo fino se sientan de dos colores distintos aunque compartan el token (reportado). */ .auth-brand-features [data-lucide] { width: 27px; height: 27px; color: var(--ds-blue-500); stroke-width: 2.25; } .auth-brand-features span { font-size: 13.5px; font-weight: var(--ds-fw-medium); color: rgba(255, 255, 255, .82); } /* Línea corta arriba del copyright, a pedido con foto de referencia -- ::before en vez de un
/
aparte en el markup, es puramente decorativo. */ .auth-brand-footer { position: relative; z-index: 2; margin: 0; padding-top: var(--ds-space-2); font-size: 11.5px; color: rgba(255, 255, 255, .45); } .auth-brand-footer::before { content: ''; position: absolute; top: 0; left: 0; width: 32px; height: 2px; background: var(--ds-blue-500); border-radius: 1px; } .auth-form-panel { position: relative; /* ancla para .lm-editor-center-guide en modo editor */ display: flex; align-items: center; /* flex-start, no center: con el panel de marca a ~50% el de formulario queda muy ancho -- centrar la tarjeta angosta ahí la dejaba flotando en medio de un montón de vacío a la derecha, todo se leía descuadrado (reportado). Pegada a la izquierda (con aire vía padding-left, no pegada a la línea divisoria) todo el panel -- título, campos, botón -- lee alineado en un solo eje. */ justify-content: flex-start; padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-3) clamp(48px, 7vw, 100px); /* --ds-card-bg, no --ds-bg: en oscuro --ds-bg (#171717) es casi el mismo tono que el panel de marca (#0D1117/#111827) -- sin borde entre los dos paneles, se fundían en una sola masa oscura sin límite visible, y angostar el panel de marca (probado antes) solo corría ese límite invisible más a la derecha, sin arreglar el problema real (reportado: "lo hiciste al revés"). --ds-card-bg (#262626) da contraste real contra el navy sin salirse de los tokens del sistema -- mismo criterio que separa .ds-modal de --ds-bg detrás. */ background: var(--ds-card-bg); min-width: 0; } /* La tarjeta reutiliza .auth-card (mismo padding/max-width que el resto de pantallas de auth) pero sin el fondo/borde/sombra de "tarjeta flotando sobre foto" -- acá el panel entero ya es la superficie. */ .auth-screen--split .auth-card { background: none; box-shadow: none; padding: 0; } .auth-mobile-brand-icon { display: none; } .auth-screen--split .auth-card h1 { font-size: 32px; text-align: left; margin-bottom: 6px; } .auth-screen--split .auth-card .sub { font-size: 14.5px; text-align: left; margin-bottom: var(--ds-space-4); } .auth-screen--split .auth-field label { text-transform: none; letter-spacing: 0; font-size: 13px; } /* Icono a la izquierda del campo (correo/contraseña) -- mismo criterio que .auth-password-toggle (svg via [data-lucide], resiste antes/después de que Lucide hidrate el a , ver auth.js). */ .auth-input-icon-wrap { position: relative; display: flex; } .auth-input-icon-wrap input { padding-left: 42px; } .auth-input-icon-wrap > [data-lucide] { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ds-text-muted); pointer-events: none; } @media (max-width: 860px) { .auth-screen--split { grid-template-columns: 1fr; } .auth-brand-panel { display: none; } .auth-form-panel { justify-content: center; padding: var(--ds-space-3); background: var(--ds-primary-950); background-image: url('assets/branding/backgrounds/login-bg-mobile.webp'); background-size: cover; background-position: 68% center; } .auth-form-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,17,23,.82), rgba(15,23,42,.86)); } .auth-form-panel { position: relative; isolation: isolate; } .auth-form-panel .auth-card { position: relative; z-index: 1; background: var(--ds-card-bg); box-shadow: var(--ds-shadow-lg); border-radius: var(--ds-radius-card); padding: var(--ds-space-4) var(--ds-space-3); max-width: 380px; width: 100%; } .auth-mobile-brand-icon { display: block; } /* width:auto acá (contra el fit-content de arriba, pensado para el bloque movible del editor de escritorio): en el fallback móvil estos vuelven a ser bloques de ancho completo centrados por text-align, el mismo criterio de siempre -- fit-content los hubiera dejado del ancho exacto del texto, y ahí text-align:center ya no tiene caja de sobra donde centrar nada. */ .auth-screen--split .auth-card h1, .auth-screen--split .auth-card .sub { width: auto; text-align: center; } } /* ============================================================ Modo editor visual ("Personalizar inicio de sesión", Configuración > Identidad & General) -- admin.js carga esta misma página dentro de un