/* css/new-login.css — Standalone login page for Intra Line. Design ported from sites/sonrisasmedicas/css/login.css (mesh-gradient blobs + glass card + juicy button), re-tokenized to the SOFT LINE / Intra Line brand: blue #005AA8 (brand_color_txt_alt) + magenta #E0007A (brand_color). Loaded AFTER the compiled CSS bundle (bootstrap-niceadmin), so its `body` and form rules win by source order. Icons use the already-bundled Font Awesome 6 instead of Material Symbols so the page has no icon-font CDN dependency. */ :root { --nl-page: rgb(255 255 255 / 0.14); /* navy profundo: base sobre la que hacen "screen" los blobs */ --nl-ink: #12202f; --nl-ink-2: #3c4d61; --nl-ink-3: #7b8b9e; --nl-line: #e3e9f1; /* Texto que va DIRECTAMENTE sobre el fondo, fuera de .glass-card */ --nl-on-page: #eef3fc; --nl-on-page-dim: rgba(238, 243, 252, .78); --nl-brand: #005aa8; /* Intra Line blue — button, focus, links */ --nl-brand-hover: #0069c6; --nl-brand-deep: #003f78; --nl-accent: #e0007a; /* Intra Line magenta */ --nl-sky: #7ec8f5; /* Paleta de los blobs del fondo animado */ --nl-blob-purple: rgb(225 54 120 / 0.53); --nl-blob-pink-light: rgb(225 54 120 / 0.53); --nl-blob-pink-neon: rgb(225 54 120 / 0.53); --nl-blob-blue-bright: rgb(3 77 150 / 0.53); --nl-blob-blue-deep: rgb(3 77 150 / 0.53); --nl-bad: #ba1a1a; --nl-bad-container: #ffdad6; --nl-bad-on-container: #93000a; --nl-good-container: #e2f0e4; --nl-good-on-container: #14532d; --nl-font-display: 'Quicksand', 'Nunito Sans', 'Open Sans', sans-serif; --nl-font-body: 'Inter', 'Nunito Sans', 'Open Sans', 'Helvetica Neue', sans-serif; } /* ---- Reset / page ---- */ .new-login * { box-sizing: border-box; } html.new-login, body.new-login { height: 100%; } body.new-login { margin: 0; background: var(--nl-page) none; font-family: var(--nl-font-body); font-size: 16px; line-height: 1.5; color: var(--nl-ink); overflow: hidden; } /* LOGOS INTRA/CRM Y SL */ .sl-logo { width: 100%; position: absolute; scale: 0.02; left: -48%; bottom: 10%; z-index: 1; } .big-logo-intra { width: 100%; position: absolute; scale: 0.25; right: -41%; top: -20%; z-index: 1; opacity: 0.5; rotate: 13deg; } .sl-logo img, .big-logo-intra img { width: 100%; height: auto; } /* ---- Layout ---- */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-main { position: relative; z-index: 1; width: 100%; max-width: 460px; animation: nlSlideUp .8s cubic-bezier(.16, 1, .3, 1) forwards; } /* ---- Fondo animado: blobs sobre navy ----------------------------------------- .mesh-bg pinta el navy Y crea contexto de apilamiento (position:fixed + z-index), así que es el "backdrop" real del mix-blend-mode del hijo: los blobs hacen `screen` contra ese navy y lo aclaran. Si el color estuviera solo en el , el grupo quedaría aislado y el blend no tendría nada que aclarar. Las keyframes animan `transform`; el parallax de cursor de new-login.tpl usa la propiedad `translate` (independiente), por lo que ambos se suman en vez de pisarse. */ .mesh-bg { position: fixed; inset: 0; z-index: 0; background-color: var(--nl-page); overflow: hidden; pointer-events: none; } .mesh-gradient { position: absolute; inset: 0; opacity: .8; mix-blend-mode: screen; } .blob { position: absolute; border-radius: 50%; will-change: transform, translate; } /* vw en ancho Y alto a propósito: mantiene los blobs circulares */ .blob-1 { top: -20%; left: -10%; width: 30vw; height: 30vw; background: var(--nl-blob-purple); filter: blur(120px); animation: nlFloatSlow 25s ease-in-out infinite; } .blob-2 { bottom: -10%; right: -5%; width: 20vw; height: 20vw; background: var(--nl-blob-blue-bright); filter: blur(100px); animation: nlFloatMedium 20s ease-in-out infinite; } .blob-3 { top: 20%; left: 10%; width: 40vw; height: 40vw; background: var(--nl-blob-blue-bright); filter: blur(140px); animation: nlFloatFast 15s ease-in-out infinite; } .blob-4 { top: 0; right: 10%; width: 30vw; height: 30vw; background: var(--nl-blob-pink-neon); filter: blur(80px); animation: nlFloatSlow 25s ease-in-out infinite; } .blob-5 { bottom: 10%; left: 30%; width: 10vw; height: 10vw; background: var(--nl-blob-blue-deep); filter: blur(110px); animation: nlFloatMedium 20s ease-in-out infinite; } @keyframes nlFloatSlow { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, 60px) scale(1.1); } 66% { transform: translate(-20px, 40px) scale(.9); } } @keyframes nlFloatMedium { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-50px, 30px) scale(.95); } 66% { transform: translate(30px, -20px) scale(1.05); } } @keyframes nlFloatFast { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -40px) scale(1.1); } 66% { transform: translate(-40px, 20px) scale(.9); } } @keyframes nlSlideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .login-main, .blob { animation: none; } } /* ---- Test-environment corner ribbon ---------------------------------------- Diagonal band folded over the top-right corner of .glass-card. The 45º band is wider than the corner box on purpose; the box's overflow:hidden is what clips it into the corner shape. Needs .glass-card { position:relative }. */ .login-testenv { position: absolute; top: 0; left: 0px; width: 132px; height: 132px; overflow: hidden; pointer-events: none; z-index: 3; border-top-right-radius: 24px; transform: rotate(-90deg); } .login-testenv span { position: absolute; top: 15px; right: -61px; width: 171px; padding: 6px 0; transform: rotate(45deg); background: linear-gradient(135deg, #e33678, #e33678); color: #fff; text-align: center; font-family: var(--nl-font-display); font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; } /* ---- Brand header ---- */ .login-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 36px; text-align: center; } .login-brand img.login-brand-logo { height: 104px; width: auto; margin-bottom: 22px; transition: transform .5s; } .login-brand img.login-brand-logo:hover { transform: scale(1.05); } /* El header de marca va SOBRE el fondo navy (fuera de .glass-card): tinta clara + sombra suave para que no se pierda cuando pasa un blob claro por detrás. */ .login-brand h1 { margin: 0 0 8px; font-family: var(--nl-font-display); font-weight: 700; font-size: 34px; line-height: 1.2; letter-spacing: -.01em; color: var(--nl-on-page); text-shadow: 0 2px 14px rgba(12, 20, 40, .45); } .login-brand p { margin: 0; font-family: var(--nl-font-body); font-size: 16px; font-weight: 500; color: var(--nl-on-page-dim); text-shadow: 0 1px 10px rgba(12, 20, 40, .4); } /* Client logo (img/logosc/.png) shown under the Intra Line lockup */ .login-client-logo { margin-top: 20px; padding: 10px 18px; border-radius: 18px; width: 100%; } .login-client-logo img { display: block; width: 100%; height: auto; } /* ---- Glass card ---- */ .glass-card { position: relative; /* anchor para .login-testenv */ overflow: hidden; /* recorta la cinta en la esquina */ background: rgba(255, 255, 255, .7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .4); box-shadow: 0 8px 32px 0 rgba(18, 32, 47, .07); border-radius: 24px; padding: 32px; } @media (min-width: 768px) { .glass-card { padding: 44px; } } /* ---- Alert banner ---- */ .login-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 16px; font-family: var(--nl-font-body); font-size: 14px; font-weight: 500; line-height: 1.45; margin-bottom: 24px; } .login-alert i { margin-top: 2px; font-size: 16px; } .login-alert--error { background: var(--nl-bad-container); color: var(--nl-bad-on-container); } .login-alert--success { background: var(--nl-good-container); color: var(--nl-good-on-container); } /* ---- Form ------------------------------------------------------------------ `nl-login-form` y NO `login-form`: css/style.css trae el tema de login heredado de NiceAdmin, con ~20 reglas bajo `.login-form` (ancho fijo, .btn, p, a...). La que rompía el diseño era esta, en style.css:216 — .login-form input[type="text"], .login-form input[type="password"] { border: none; box-shadow: none; border-radius: 0; } (0,2,1), o sea que le ganaba a `.field-input` (0,1,0): los inputs salían cuadrados y sin borde. Cambiar el nombre de la clase mata de raíz esa familia de colisiones, en vez de ir peleando especificidad regla a regla. */ .nl-login-form { display: flex; flex-direction: column; gap: 28px; margin: 0; } .field { display: flex; flex-direction: column; gap: 8px; } .field-label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 4px; } .field-label { margin: 0; padding: 0 4px; font-family: var(--nl-font-display); font-size: 14px; font-weight: 600; color: rgba(18, 32, 47, .8); } .field-label-row .field-label { padding: 0; } .field-forgot { font-size: 12px; font-weight: 700; color: var(--nl-brand); text-decoration: none; } .field-forgot:hover, .field-forgot:focus { color: var(--nl-brand-hover); text-decoration: none; } .field-wrap { position: relative; } .field-icon-wrap { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); line-height: 1; background: rgb(3 77 150 / 0.1); padding: var(--sl-space-4); border-radius: var(--sl-radius-md); filter: grayscale(1); transition: filter 0.2s ease; /* optional smooth transition */ } /* Remove grayscale when the sibling input is focused */ .field-wrap:has(.field-input:focus) .field-icon-wrap { filter: grayscale(0); } /* 20px = tamaño óptico de los Material Symbols del diseño de referencia; los glifos de Font Awesome 6 son más estrechos, así que se igualan en tamaño. */ .field-icon { font-size: 20px; color: var(--sl-blue); transition: color .2s ease; pointer-events: none; z-index: 2; } .field-wrap:focus-within .field-icon { color: var(--nl-brand); } field-icon-wrap:focus-within .field-icon { color: var(--sl-pink) !important; } .field-input { width: 100%; height: auto; padding: 16px 16px 16px 64px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(18, 32, 47, .08); border-radius: var(--sl-radius-md); box-shadow: none; font-family: var(--nl-font-body); font-size: 16px; line-height: 1.35; color: var(--nl-ink); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } .field-input::placeholder { color: rgba(123, 139, 158, .55); } .field-input:focus { background: #fff; border-color: var(--nl-brand); box-shadow: 0 0 0 4px rgba(0, 90, 168, .12); outline: none; } /* Solo mayúsculas visuales (los ID de usuario del sistema lo son). Sin bold ni letter-spacing extra: así el campo se lee igual que el del diseño original. */ .field-input--user { text-transform: uppercase; } .field-input--password { padding-right: 48px; } /* ---- Blindaje del input frente al bundle admin ------------------------------ new-login.tpl incluye layout/head.tpl, así que css/crunch/compiled.css se carga ANTES que este archivo y trae tres reglas que se comían el diseño de los inputs. En sonrisasmedicas no ocurre porque su login es standalone. bootstrap-niceadmin-bundle-theme.css:1522 (0,2,1) input[type=text]:focus, textarea:focus, select:focus -> box-shadow cian rgba(81,203,238,1) + border cian -> solo afectaba al campo usuario (type=text), no al de contraseña style.css:4466 (0,3,1) + !important input:focus:invalid:focus -> border-color #00a0df; ambos inputs son `required`, así que mientras están vacíos hacen match con :invalid y se ponían cian LOS DOS bootstrap-niceadmin-bundle-theme.css:1514 (0,1,1) input[type=text] { transition: all .30s ease-in-out } -> ganaba a .field-input (0,1,0): usuario y contraseña animaban distinto `body.new-login input.field-input:focus` da (0,3,2), que gana a la regla de style.css (0,3,1) por la columna de elementos, y necesita !important para empatarle el nivel. Se hace aquí en lugar de tocar el bundle porque el bundle lo comparten las ~57 pantallas de la app. */ body.new-login input.field-input { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } body.new-login input.field-input:focus { border: 1px solid var(--nl-brand) !important; box-shadow: 0 0 0 4px rgba(0, 90, 168, .12) !important; } /* Autofill de Chrome: pinta un fondo amarillo con `background-image` que rompe el efecto glass. No se puede sobreescribir `background-color` en el pseudo-elemento, pero sí taparlo con un inset shadow del color deseado. */ body.new-login input.field-input:-webkit-autofill, body.new-login input.field-input:-webkit-autofill:hover { -webkit-text-fill-color: var(--nl-ink); box-shadow: 0 0 0 100px #fff inset !important; caret-color: var(--nl-ink); } /* Con foco hay que repintar también el anillo: el bloque de arriba lleva !important, así que un solo box-shadow tiene que llevar las dos sombras. */ body.new-login input.field-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--nl-ink); box-shadow: 0 0 0 100px #fff inset, 0 0 0 4px rgba(0, 90, 168, .12) !important; } .field-toggle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; border-radius: 10px; color: var(--nl-ink-3); cursor: pointer; transition: color .2s ease, background-color .2s ease; z-index: 2; } .field-toggle:hover { color: var(--nl-brand); background: rgba(0, 90, 168, .07); } /* Caps-lock warning. login.tpl.js toggles it with jQuery .show()/.hide(), which writes `display:block` inline — so the flex row lives on the inner

, not on .warn-caps itself, or .show() would clobber it. */ .warn-caps { display: none; margin: -8px 0 0; padding: 10px 14px; border-radius: 14px; background: #fff4d6; color: #7a4c00; } .warn-caps p { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--nl-font-body); font-size: 13px; font-weight: 600; color: inherit; } /* ---- Checkbox row (reused by "forzar cambio cliente") ---- */ .field-check { display: flex; align-items: center; gap: 12px; padding: 0 4px; } .field-check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--nl-brand); cursor: pointer; } .field-check label { margin: 0; font-family: var(--nl-font-body); font-size: 13px; font-weight: 500; color: rgba(18, 32, 47, .7); cursor: pointer; user-select: none; } /* ---- Toggle "carita" de field-check (checkbox #force) -------------------- Origen: toy switch de CodePen, medido en rem absolutos por dentro (el "face" y sus hijos no escalan con el padre). Por eso .force-toggle fija el tamaño final ya reducido y .force-toggle-inner --que sí mide los 12.25rem x 5.5rem originales-- se encoge entero con transform:scale(), conservando intactas las proporciones y las animaciones. Todo bajo el prefijo force-toggle- para no chocar con clases sueltas de mismo nombre (.toggle, #container...) del resto del bundle CSS del sitio. */ .force-toggle { --ft-scale: 0.42; position: relative; width: calc(12.25rem * var(--ft-scale)); height: calc(5.5rem * var(--ft-scale)); flex: 0 0 auto; } .force-toggle-inner { position: absolute; top: 0; left: 0; width: 12.25rem; height: 5.5rem; transform: scale(var(--ft-scale)); transform-origin: top left; } .force-toggle-checkbox { display: none; } .force-toggle-label { display: block; position: absolute; inset: 0; width: 12.25rem; height: 5.5rem; margin: 0; border: none; border-radius: 3rem; background: #d7d7d7; cursor: pointer; overflow: hidden; user-select: none; box-sizing: border-box; } .force-toggle-bg { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to left, #f39ab6, #f39af3); opacity: 0; transition: opacity .45s ease-in-out; } .force-toggle-checkbox:checked + .force-toggle-label .force-toggle-bg { opacity: 1; } .force-toggle-face { display: block; position: absolute; top: .45rem; right: 7.25rem; width: 4.5rem; height: 4.5rem; border-radius: 3rem; background: linear-gradient(45deg, #dedede 0%, #fff 70%); box-shadow: 0 .3rem .3rem 0 rgba(0, 0, 0, .25); overflow: hidden; transition: right .45s ease-in-out; } .force-toggle-face-container { position: absolute; width: 4.5rem; height: 4.5rem; } .force-toggle-eye { position: absolute; top: 2.25rem; height: .25rem; width: .625rem; background: #8e8e8e; border-radius: 0 0 100% 50%; } .force-toggle-eye.left { left: .75rem; } .force-toggle-eye.right { left: 2.125rem; } .force-toggle-mouth { position: absolute; top: 3.125rem; left: 1.45rem; width: .475rem; height: .25rem; background: #8e8e8e; border-radius: 40% 40% 100% 50%; } /* Estado "unchecked": deja todo en su sitio (las keyframes *Reverse solo importan cuando SE DEStoggle-a, ver override :checked de abajo) */ .force-toggle-checkbox + .force-toggle-label .force-toggle-face-container { animation: forceToggleRotateReverse forwards .3s; } .force-toggle-checkbox + .force-toggle-label .force-toggle-eye { animation: forceToggleFaceReverse forwards .3s; } .force-toggle-checkbox + .force-toggle-label .force-toggle-mouth { animation: forceToggleMouthReverse forwards .3s; } /* Estado "checked": la carita se desliza a la izquierda y cambia de cara */ .force-toggle-checkbox:checked + .force-toggle-label .force-toggle-face { right: .6rem; } .force-toggle-checkbox:checked + .force-toggle-label .force-toggle-face-container { animation: forceToggleRotate forwards .3s; } .force-toggle-checkbox:checked + .force-toggle-label .force-toggle-eye { animation: forceToggleFace forwards .3s .075s; } .force-toggle-checkbox:checked + .force-toggle-label .force-toggle-eye.left { left: 1rem; } .force-toggle-checkbox:checked + .force-toggle-label .force-toggle-eye.right { left: 2.5rem; } .force-toggle-checkbox:checked + .force-toggle-label .force-toggle-mouth { animation: forceToggleMouth forwards .3s .075s; } @keyframes forceToggleRotate { 0% { left: 0; } 25% { left: 4rem; } 30% { opacity: 0; } 50% { opacity: 0; left: -4rem; } 90% { opacity: 1; } 100% { left: 1rem; opacity: 1; } } @keyframes forceToggleRotateReverse { 0% { left: 0; } 25% { left: -4rem; } 30% { opacity: 0; } 50% { opacity: 0; left: 4rem; } 90% { opacity: 1; } 100% { left: 0; opacity: 1; } } @keyframes forceToggleFace { 100% { top: 1.7rem; width: .375rem; height: .375rem; background: #8e8e8e; border-radius: 100%; } } @keyframes forceToggleFaceReverse { 0% { top: 1.7rem; width: .375rem; height: .375rem; border-radius: 100%; background: #8e8e8e; } } @keyframes forceToggleMouth { 100% { top: 2.55rem; left: 1.125rem; height: .625rem; width: 1.625rem; background: linear-gradient(to bottom, #8e8e8e, #a4a4a4); border-radius: .2rem .2rem 1rem 1rem; } } @keyframes forceToggleMouthReverse { 0% { top: 2.55rem; left: .9rem; height: .625rem; width: 1.625rem; background: linear-gradient(to bottom, #8e8e8e, #a4a4a4); border-radius: .2rem .2rem 1rem 1rem; } 25% { left: 1.125rem; } } /* ---- Submit button ---- */ #login-form-button-container { display: flex; align-items: center; justify-content: center; min-height: 56px; } #login-form-button-container .loading-dummy { color: var(--nl-brand) !important; } .btn-juicy { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; border: none; border-radius: 16px; background-color: var(--nl-brand); color: #fff; font-family: var(--nl-font-display); font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px 0 rgba(0, 90, 168, .28); transition: transform .3s cubic-bezier(.175, .885, .32, 1.275), box-shadow .3s ease, background-color .3s ease; } .btn-juicy:hover, .btn-juicy:focus { transform: scale(1.02); box-shadow: none !important; background-color: var(--nl-brand-hover); color: #fff; outline: none; } .btn-juicy:active { transform: scale(.98); } .btn-juicy i { font-size: 17px; transition: transform .2s; } .btn-juicy:hover i { transform: translateX(4px); } /* ---- Footer ---- */ .login-footer { margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(18, 32, 47, .07); text-align: center; } .login-footer p { margin: 0; font-family: var(--nl-font-body); font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--nl-ink-2); } .login-footer a { color: var(--nl-brand); font-weight: 700; text-decoration: none; } .login-footer a:hover { text-decoration: underline; text-underline-offset: 4px; } /* ---- Localhost client switcher ------------------------------------------- El oculto */ margin-bottom: 24px; padding: 16px; border-radius: 18px; } .login-devbox .field-label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--nl-brand-deep); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; } .login-devbox .field-check { margin-top: 14px; padding: 0; } /* El