/* ============================================================================ PANTALLA DE INGRESO — hoja compartida por los dos sistemas. ┌─ ESTE ARCHIVO ES GEMELO ──────────────────────────────────────────────┐ │ C:\Build\HistorialPreciosWeb\wwwroot\lib\css\login-sistema.css │ │ C:\Build\RetailWeb\wwwroot\css\login.css │ │ │ │ Son BYTE A BYTE IDENTICOS. Al tocar uno, copiar el otro y verificar │ │ con Get-FileHash. Antes divergian porque la copia de ML tenia la │ │ regla de `body` recortada; ahora ninguna de las dos toca `body`, asi │ │ que el archivo es literalmente el mismo y no hay nada que adaptar. │ └────────────────────────────────────────────────────────────────────────┘ Dos identidades sobre la MISMA estructura, para que el conmutador del logo se lea como una transicion y no como un salto entre dos sitios: data-sistema="pvp" -> MercadoLibre. Carmin. Valores espejados de hh-theme.css (--hh-primary, --hh-accent-dark). data-sistema="retail" -> Retail. Teal profundo con acento ambar. POR QUE TOKENS PROPIOS Y NO --hh-*: retail NO carga hh-theme.css (es otra app, con CSP 'self'), asi que var(--hh-primary) no resolveria. Los tokens de abajo son el espejo local de hh-theme: mismos valores, declarados una sola vez. Si cambia la marca en hh-theme, se actualizan aca y en ningun otro lado de la pantalla. TIPOGRAFIA: stack del sistema a proposito. hh-theme importa Inter desde Google Fonts, pero la CSP de retail es 'self' y ahi no cargaria: las dos pantallas terminarian con tipografias distintas. La jerarquia se construye con escala, peso y tracking, no con la familia. ============================================================================ */ /* ══════════════════════════════════════════════════════════════════════════ 0. LA BASE DE LOS rem, IGUAL EN LAS DOS APPS Toda esta hoja mide en rem, y rem sale del font-size del . En ML el layout carga site.css, que baja el html a 14px por debajo de 768px; retail no carga esa hoja y se queda en los 16px del navegador. Resultado: en el celular los dos logins tenian espaciados distintos —12,5% de diferencia en todo— y el logo dejaba de caer en el mismo punto al conmutar. El selector engancha con data-sistema, que las DOS pantallas ponen en el (pvp / retail) y ninguna otra pagina usa: asi el resto del sistema conserva su escala legacy intacta. ══════════════════════════════════════════════════════════════════════════ */ html[data-sistema]{ font-size:16px; } /* ══════════════════════════════════════════════════════════════════════════ 1. TOKENS BASE — geometria, movimiento y escala ══════════════════════════════════════════════════════════════════════════ */ :root{ /* Radios */ --lg-radio:16px; --lg-radio-sm:10px; --lg-radio-pill:999px; /* Movimiento. Una sola familia de duraciones para toda la pantalla: la guia de motion pide ritmo unificado. */ --lg-t-rapida:140ms; --lg-t-media:240ms; --lg-t-identidad:520ms; /* cambios de paleta al conmutar */ --lg-giro:620ms; /* vuelta y media de la moneda */ --lg-ease:cubic-bezier(.22,.61,.36,1); --lg-ease-peso:cubic-bezier(.22,.8,.3,1); /* Espaciado */ --lg-sp-1:.35rem; --lg-sp-2:.6rem; --lg-sp-3:.9rem; --lg-sp-4:1.25rem; --lg-sp-5:1.75rem; /* Escala tipografica fluida: sin media queries para el tamano, y sin saltos bruscos entre un notebook y un monitor grande. */ --lg-txt-xs:clamp(.72rem, .68rem + .18vw, .79rem); --lg-txt-sm:clamp(.81rem, .78rem + .16vw, .87rem); --lg-txt-md:clamp(.88rem, .85rem + .18vw, .95rem); --lg-txt-lg:clamp(1.28rem, 1.12rem + .78vw, 1.6rem); /* Ancho de la columna del formulario. Igual en las dos pantallas: de aca sale la posicion horizontal del logo. */ --lg-col:400px; } /* ══════════════════════════════════════════════════════════════════════════ 2. IDENTIDADES — lo unico que cambia entre los dos sistemas ══════════════════════════════════════════════════════════════════════════ */ /* --boton se separa de --acento a proposito: el acento es decorativo (halos, bordes, vinetas) y sobre texto blanco no llega a 4.5:1. Medido: carmin 350 72% 48% da 3.9:1 y el teal 174 72% 36% da 3.65:1. Los tonos de --boton si cumplen AA. No unificar. */ html[data-sistema="pvp"]{ --lg-acento:350 72% 48%; /* = --hh-primary */ --lg-acento-2:350 72% 40%; /* = --hh-primary-strong */ --lg-boton:350 72% 38%; --lg-fondo-a:220 24% 14%; /* = --hh-accent-dark */ --lg-fondo-b:350 45% 20%; } html[data-sistema="retail"]{ --lg-acento:174 72% 36%; --lg-acento-2:38 92% 52%; --lg-boton:174 78% 26%; --lg-fondo-a:196 45% 10%; --lg-fondo-b:174 55% 16%; } /* Sin data-sistema: cae a la identidad de ML en vez de quedar sin color. */ :root{ --lg-acento:350 72% 48%; --lg-acento-2:350 72% 40%; --lg-boton:350 72% 38%; --lg-fondo-a:220 24% 14%; --lg-fondo-b:350 45% 20%; } /* ══════════════════════════════════════════════════════════════════════════ 3. SUPERFICIES — dual-mode real El fondo es SIEMPRE el degradado oscuro de identidad: la pantalla de ingreso es inmersiva en los dos temas y de ahi sale su caracter. Lo que cambia con el tema es la TARJETA. Antes estaba clavada en blanco y el boton de tema no producia ningun efecto visible: existia y no hacia nada. Ahora el cambio se nota donde el usuario esta mirando. ══════════════════════════════════════════════════════════════════════════ */ :root, html[data-theme="light"]{ --lg-tarjeta:0 0% 100%; --lg-tarjeta-alpha:.97; --lg-campo:0 0% 100%; --lg-texto:220 25% 14%; --lg-texto-suave:220 10% 45%; --lg-borde:220 15% 88%; --lg-peligro:0 72% 42%; --lg-peligro-bg:0 70% 97%; --lg-peligro-borde:0 65% 88%; --lg-aviso:38 70% 26%; --lg-aviso-bg:38 92% 50%; --lg-aviso-borde:38 92% 40%; } html[data-theme="dark"]{ --lg-tarjeta:220 20% 13%; --lg-tarjeta-alpha:.94; --lg-campo:220 20% 17%; --lg-texto:220 10% 95%; --lg-texto-suave:220 10% 68%; --lg-borde:220 15% 26%; --lg-peligro:0 72% 72%; --lg-peligro-bg:0 45% 18%; --lg-peligro-borde:0 55% 34%; --lg-aviso:38 92% 76%; --lg-aviso-bg:38 60% 22%; --lg-aviso-borde:38 55% 38%; } /* Sombras en capas: una sola sombra grande se lee como una mancha; dos capas (contacto corta + difusion larga) leen como elevacion real. */ :root{ --lg-sombra-tarjeta: 0 1px 2px hsl(var(--lg-fondo-a) / .28), 0 18px 48px hsl(var(--lg-fondo-a) / .46); --lg-sombra-moneda: 0 8px 26px hsl(var(--lg-fondo-a) / .55), 0 0 0 5px hsl(var(--lg-acento) / .2); } /* ══════════════════════════════════════════════════════════════════════════ 4. NEUTRALIZAR LOS ENVOLTORIOS DEL LAYOUT DE ML En retail la pantalla ES el . En ML vive dentro del layout general, que le pone fondo propio al body y envuelve todo en .hh-app > main. Antes esto se resolvia sacando la pantalla del flujo con `position:fixed; inset:0; z-index:50`, y ese hack traia el bug del alto: la pantalla media exactamente el viewport, sobraban 2 px, y al aparecer un mensaje de error el contenido se corria SIN barra visible (esta oculta a proposito). Se lee como "se rompio la pagina". Ahora la pantalla fluye normal y crece si hace falta. Estas reglas apagan los envoltorios. Son inocuas en retail: alli no existe .hh-body. */ html[data-theme] body.hh-body.hh-body--fullscreen{ background:none; } html[data-theme] body.hh-body.hh-body--fullscreen .hh-app, html[data-theme] body.hh-body.hh-body--fullscreen main[role="main"]{ margin:0;padding:0;max-width:none;background:none; } /* ══════════════════════════════════════════════════════════════════════════ 5. EL LIENZO .hh-login-page es en retail y un
en ML: por eso nunca se estiliza `body` directamente y todo cuelga de esta clase. ══════════════════════════════════════════════════════════════════════════ */ .hh-login-page{ box-sizing:border-box; margin:0; /* dvh y no vh: en el navegador movil la barra de direcciones cambia el vh y la pantalla saltaba al aparecer el teclado. */ min-height:100dvh; width:100%; /* Este padding define donde cae el logo. Es el mismo archivo en las dos pantallas, asi que ya no puede desincronizarse. */ padding:1.4rem 1.5rem 1.6rem; display:grid; grid-auto-rows:min-content; justify-items:center; align-content:start; gap:1rem; font-family:"Segoe UI Variable Text","Segoe UI",-apple-system, BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-size:var(--lg-txt-md); line-height:1.5; color:hsl(var(--lg-texto)); -webkit-font-smoothing:antialiased; background: radial-gradient(1200px 600px at 15% -10%, hsl(var(--lg-acento) / .30), transparent 60%), radial-gradient(900px 500px at 110% 110%, hsl(var(--lg-acento-2) / .24), transparent 55%), linear-gradient(160deg, hsl(var(--lg-fondo-a)), hsl(var(--lg-fondo-b))); /* Sin background-attachment:fixed: en movil fuerza repintado en cada scroll y era el punto mas caro de la pantalla. Con el degradado en un contenedor que ya cubre todo el alto, se ve igual y no cuesta nada. */ background-color:hsl(var(--lg-fondo-a)); transition:background var(--lg-t-identidad) var(--lg-ease); /* La barra queda oculta pero el scroll sigue vivo (rueda, teclado, touch). Si una pantalla la muestra y la otra no, cambia el ancho util y el logo se corre al conmutar. */ scrollbar-width:none;-ms-overflow-style:none; } .hh-login-page::-webkit-scrollbar{width:0;height:0} .hh-login-page *, .hh-login-page *::before, .hh-login-page *::after{box-sizing:border-box} .hh-login-page .pantalla{width:100%;max-width:var(--lg-col);text-align:center} /* ══════════════════════════════════════════════════════════════════════════ 6. LOGO CONMUTADOR — la moneda Concepto intacto: gira SIEMPRE en el mismo sentido y acumula vueltas, como una moneda real. Se conserva tal cual estaba; solo cambian los tokens. ══════════════════════════════════════════════════════════════════════════ */ /* login-cabecera y no cabecera a secas: site.css define .cabecera para las grillas del sistema, con fondo oscuro !important, y dibujaba una caja negra detras del logo. */ .hh-login-page .login-cabecera{margin-bottom:1.5rem} /* El marco aporta la PERSPECTIVE: sin ella el rotateY se renderiza plano y el giro no se percibe. Ademas aloja el halo, que dentro del boton quedaria atrapado en su contexto 3D. */ .hh-login-page .logo-marco{ position:relative;width:104px;height:104px;margin:0 auto .85rem; perspective:900px; } .hh-login-page .halo{ position:absolute;inset:-11px;border-radius:50%; border:2px solid hsl(var(--lg-acento) / .55); animation:lg-latir 2.6s ease-in-out infinite; transition:border-color var(--lg-t-identidad) var(--lg-ease); pointer-events:none; } /* Segundo anillo desfasado: hace el latido claramente visible */ .hh-login-page .halo::before{ content:"";position:absolute;inset:-9px;border-radius:50%; border:1px solid hsl(var(--lg-acento) / .35); animation:lg-latir 2.6s ease-in-out infinite .6s; } @keyframes lg-latir{ 0%,100%{transform:scale(.94);opacity:.75} 50% {transform:scale(1.12);opacity:.12} } /* El enlace solo maneja hover, foco y clic. No rota: si compartiera transform con la moneda, una animacion pisaria a la otra. */ .hh-login-page .logo-boton{ position:relative;width:100%;height:100%;padding:0;margin:0; display:block;cursor:pointer;background:none;border:0;border-radius:50%; transition:transform 220ms cubic-bezier(.34,1.4,.64,1); text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent; } .hh-login-page .logo-boton:focus-visible{ outline:3px solid hsl(var(--lg-acento) / .85);outline-offset:8px; } .hh-login-page .logo-boton:hover{transform:scale(1.06)} .hh-login-page .logo-boton:active{transform:scale(.96)} /* El angulo se aplica como transform INLINE desde el JS, no via variable CSS: `transition` no interpola custom properties salvo que se registren con @property, y con var(--giro) el giro saltaba de golpe. */ .hh-login-page .moneda{ position:absolute;inset:0;display:block; transform-style:preserve-3d; transform:rotateY(0deg); transition:transform var(--lg-giro) var(--lg-ease-peso); } .hh-login-page .logo-cara{ position:absolute;inset:0;display:grid;place-items:center; border-radius:50%;backface-visibility:hidden; background:hsl(0 0% 100% / .97); box-shadow:var(--lg-sombra-moneda); transition:box-shadow var(--lg-t-identidad) var(--lg-ease); /* translateZ(0) fuerza capa propia: sin esto el navegador rasteriza la cara al tamano en pantalla y la escala, y el logo se ve borroso al rotar. */ transform:translateZ(0); } .hh-login-page .logo-dorso{transform:rotateY(180deg) translateZ(0)} .hh-login-page .logo-cara img{ width:74%;height:auto;display:block; image-rendering:auto;backface-visibility:hidden; } html[data-sistema="retail"] .hh-login-page .logo-cara, html[data-sistema="retail"].hh-login-page .logo-cara{ box-shadow: 0 8px 26px hsl(var(--lg-fondo-a) / .55), 0 0 0 5px hsl(var(--lg-acento) / .4); } .hh-login-page .logo-boton:hover .logo-cara{ box-shadow: 0 12px 34px hsl(var(--lg-fondo-a) / .65), 0 0 0 8px hsl(var(--lg-acento) / .3); } /* Canto: el borde metalico que asoma cuando la moneda pasa de perfil. */ .hh-login-page .canto{ position:absolute;inset:0;border-radius:50%; transform:rotateY(90deg); background:linear-gradient(90deg, hsl(var(--lg-acento) / .95) 0%, hsl(var(--lg-acento) / .55) 22%, hsl(0 0% 100% / .85) 50%, hsl(var(--lg-acento) / .55) 78%, hsl(var(--lg-acento) / .95) 100%); box-shadow:0 0 22px hsl(var(--lg-acento) / .6); transition:background var(--lg-t-identidad) var(--lg-ease); pointer-events:none; } /* Destello que barre la cara: refuerza la lectura de material solido */ .hh-login-page .brillo{ position:absolute;inset:0;border-radius:50%;pointer-events:none; background:linear-gradient(115deg, transparent 30%, hsl(0 0% 100% / .55) 47%, transparent 62%); opacity:0; } .hh-login-page .moneda.girando .brillo{animation:lg-destello var(--lg-giro) ease-out} @keyframes lg-destello{ 0% {opacity:0; transform:translateX(-45%)} 35% {opacity:.85} 70% {opacity:.25} 100%{opacity:0; transform:translateX(45%)} } /* Mientras gira se levanta y vuelve a apoyar: da peso al movimiento. El salto va en el MARCO porque la moneda ya usa transform para rotar. */ .hh-login-page .logo-marco.girando{animation:lg-saltito var(--lg-giro) var(--lg-ease-peso)} @keyframes lg-saltito{ 0% {transform:translateY(0) scale(1)} 30% {transform:translateY(-9px) scale(1.08)} 60% {transform:translateY(-4px) scale(1.04)} 100%{transform:translateY(0) scale(1)} } .hh-login-page .logo-marco.girando .halo{animation:lg-halo var(--lg-giro) var(--lg-ease-peso)} @keyframes lg-halo{ 0% {transform:scale(.94);opacity:.75} 35% {transform:scale(1.3); opacity:.15} 100%{transform:scale(.94);opacity:.75} } /* ══════════════════════════════════════════════════════════════════════════ 7. TEXTOS DEL SISTEMA ══════════════════════════════════════════════════════════════════════════ */ .hh-login-page .sistema{transition:opacity var(--lg-t-media) ease} .hh-login-page .sistema.cambiando{opacity:0} /* Usa --boton (tono oscuro ya verificado) y no --acento: con texto blanco el acento se queda en 3.65:1 en la identidad teal. */ .hh-login-page .pill{ display:inline-block;padding:.24rem .82rem;border-radius:var(--lg-radio-pill); background:hsl(var(--lg-boton) / .92); color:hsl(0 0% 100%); border:1px solid hsl(var(--lg-acento) / .75); font-size:var(--lg-txt-xs);font-weight:600; letter-spacing:.06em;text-transform:uppercase; transition:background var(--lg-t-identidad) var(--lg-ease), border-color var(--lg-t-identidad) var(--lg-ease); } /* Especificidad reforzada en el h1: hh-theme pinta los titulos con `html[data-theme] body.hh-body h1` (0,2,3) y le ganaba a un `.sistema h1`, dejandolos gris oscuro e ilegibles sobre el degradado. Se iguala el peso del selector en vez de recurrir a !important. */ .hh-login-page .sistema h1, html[data-theme] body.hh-body .hh-login-page .sistema h1{ margin:.6rem 0 .25rem; font-size:var(--lg-txt-lg); font-weight:700; letter-spacing:-.015em; line-height:1.15; color:hsl(0 0% 100%); text-shadow:0 2px 14px hsl(var(--lg-fondo-a) / .85); } .hh-login-page .sistema .sub, html[data-theme] body.hh-body .hh-login-page .sistema .sub{ margin:0;color:hsl(0 0% 100% / .72);font-size:var(--lg-txt-sm); } .hh-login-page .pista{ margin:.9rem 0 0;color:hsl(0 0% 100% / .5);font-size:var(--lg-txt-xs); display:flex;align-items:center;justify-content:center;gap:var(--lg-sp-1); } .hh-login-page .pista .flecha{display:inline-block;animation:lg-subir 1.9s ease-in-out infinite} @keyframes lg-subir{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} /* ══════════════════════════════════════════════════════════════════════════ 8. TARJETA DEL FORMULARIO ══════════════════════════════════════════════════════════════════════════ */ .hh-login-page .tarjeta{ background:hsl(var(--lg-tarjeta) / var(--lg-tarjeta-alpha)); border:1px solid hsl(0 0% 100% / .1); border-radius:var(--lg-radio); padding:var(--lg-sp-5); box-shadow:var(--lg-sombra-tarjeta); text-align:left; color:hsl(var(--lg-texto)); transition:box-shadow var(--lg-t-identidad) var(--lg-ease), background var(--lg-t-media) ease; } .hh-login-page .tarjeta label{ display:block; font-size:var(--lg-txt-sm); font-weight:500; color:hsl(var(--lg-texto-suave)); margin:var(--lg-sp-3) 0 var(--lg-sp-1); } .hh-login-page .tarjeta label:first-of-type{margin-top:0} /* min-height 48px: el minimo tactil es 44 y los campos median 43. */ .hh-login-page .tarjeta input:not([type="checkbox"]){ width:100%;font:inherit;font-size:var(--lg-txt-md); padding:.72rem .8rem;min-height:48px; border:1px solid hsl(var(--lg-borde)); border-radius:var(--lg-radio-sm); background:hsl(var(--lg-campo)); color:hsl(var(--lg-texto)); transition:border-color var(--lg-t-rapida) ease, box-shadow var(--lg-t-rapida) ease; } .hh-login-page .tarjeta input::placeholder{color:hsl(var(--lg-texto-suave) / .7)} .hh-login-page .tarjeta input:not([type="checkbox"]):focus{ outline:none; border-color:hsl(var(--lg-acento)); box-shadow:0 0 0 3px hsl(var(--lg-acento) / .26); } /* El navegador pinta el autofill con un amarillo fijo que ignora el tema y en modo oscuro deja texto negro sobre celeste. El inset lo tapa. */ .hh-login-page .tarjeta input:-webkit-autofill{ -webkit-text-fill-color:hsl(var(--lg-texto)); box-shadow:0 0 0 100px hsl(var(--lg-campo)) inset; } /* ── Campo con icono ────────────────────────────────────────────────────── El icono es decorativo (aria-hidden): el