/* ===================================================================================================================== logins-vidrio-2026-10-27 · Tanda 6: los ingresos con la tarjeta de vidrio claro (pedido de Jorge, v2 aprobada el 27/10: «la tarjeta tiene que ser bien transparente, que se vea el fondo a través»). Prototipo y capturas en vetuy/logins_vidrio/ (prototipo/ingreso_vidrio.css, capturas_v2/). La enlaza templates/_v3_head.html SOLO en estas pantallas (por su endpoint), así ninguna otra cambia: - Programa de la clínica: /login, /recuperar, /restablecer/, /mi-cuenta/clave, /registro. - VetUyPet (socio), con el fondo de VetUyPro: /socio, /socio/recuperar, /socio/restablecer/, /socio/invitacion/, /familia/codigo, /familia/aceptar/. Todas llevan
con .tarjeta--destacada.ingreso__tarjeta. - VetUyPro: /vet/ingresar, /vet/pin, /vet/desbloquear (.app--vet .vet-ingreso): los mismos valores, así todo es parejo. Se carga ANTES de css/vet.css: por eso las reglas de VetUyPro llevan más prioridad que las de vet.css. | Parte | Noche | Día | |--------------|---------------------------------------------------|--------------------------------------------------| | Relleno | blanco 20 % → 12 % (+ un toque de azul de marca) | blanco 42 % → 32 % (+ un toque de azul de marca) | | Desenfoque | 10 px, saturación 135 % | 10 px, saturación 125 % | | Borde | anillo de 1,5 px con el degradado de la marca (cian → verde), igual que VetUyPro | | Sombra | sombra suave + halo azul + halo del acento (igual que VetUyPro) | | Campos | azul muy oscuro al 74 % | blanco al 78 % | | Textos | etiquetas #E4E8F1, enlaces #8CF5E0, + sombrita | etiquetas #26314A, enlaces #075A49, + brillo | | Fondo | imagen fondo_vetuy al 45 % + 3 luces | la imagen «dada vuelta» al 50 % sobre el crema | Contraste medido (vetuy/logins_vidrio/prototipo/medir_contraste.py): todo AA en 1280 y 390 px, noche y día. No cambia ninguna plantilla, texto, logo, campo ni comportamiento: solo la tarjeta, sus textos y el fondo. Opaco (como hasta hoy) con: alto contraste de la app (.alto-contraste / a11y-hc-*), "más contraste" o "menos transparencia" del sistema, colores forzados; al imprimir, sin imagen. ===================================================================================================================== */ /* ---- tokens del vidrio claro ---- */ .app--ingreso, .app--vet .vet-ingreso { --ing-vidrio: linear-gradient(140deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .12) 60%), linear-gradient(160deg, color-mix(in srgb, var(--marca-azul) 10%, transparent), rgba(19, 28, 51, .10)); --ing-desenfoque: blur(10px) saturate(135%); --ing-campo: rgba(10, 16, 30, .74); --ing-etiqueta: #E4E8F1; --ing-enlace: #8CF5E0; --ing-sombra-texto: 0 1px 2px rgba(5, 10, 20, .55); --ing-sombra-alta: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 18px 40px -22px rgba(0, 0, 0, .75), 0 26px 60px -40px color-mix(in srgb, var(--marca-azul) 85%, transparent); } html[data-modo="dia"] :is(.app--ingreso, .app--vet .vet-ingreso) { --ing-vidrio: linear-gradient(140deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .32) 60%), linear-gradient(160deg, color-mix(in srgb, var(--marca-azul) 6%, transparent), rgba(250, 248, 243, .06)); --ing-desenfoque: blur(10px) saturate(125%); --ing-campo: rgba(255, 255, 255, .78); --ing-etiqueta: #26314A; --ing-enlace: #075A49; --ing-sombra-texto: 0 1px 1px rgba(255, 255, 255, .7); --ing-sombra-alta: 0 1px 0 rgba(255, 255, 255, .75) inset, 0 16px 36px -22px rgba(14, 22, 38, .30), 0 26px 60px -42px color-mix(in srgb, var(--marca-azul) 65%, transparent); } /* ---- fondo: el arte con el logo de VetUy y las luces de la paleta (el de VetUyPro), más presente que en VetUyPro para que se vea a través del vidrio; de día sobre el papel crema. VetUyPro ya trae las luces (vet.css): acá solo sube la imagen. ---- */ body:has(.app--ingreso)::before, html:not([data-modo="dia"]):not(.alto-contraste):not([class*="a11y-hc-"]) body:has(.app--ingreso)::before { inset: 0; background-color: var(--fondo); background-size: auto; background-position: 0 0; background-repeat: no-repeat; background-image: radial-gradient(520px 380px at 100% 0%, color-mix(in srgb, var(--marca-cian) 22%, transparent), transparent 70%), radial-gradient(560px 460px at 0% 35%, color-mix(in srgb, var(--marca-azul) 30%, transparent), transparent 72%), radial-gradient(480px 360px at 85% 95%, color-mix(in srgb, var(--marca-verde) 14%, transparent), transparent 70%); } html:not([data-modo="dia"]):not(.alto-contraste):not([class*="a11y-hc-"]) body:has(.app--ingreso)::before { opacity: 1; filter: none; } body:has(.app--ingreso)::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("/img/fondo_vetuy.jpg"); background-image: image-set(url("/img/fondo_vetuy.webp") type("image/webp"), url("/img/fondo_vetuy.jpg") type("image/jpeg")); background-size: cover; background-position: left bottom; background-repeat: no-repeat; opacity: .45; } html[data-modo="dia"] body:has(.app--ingreso)::before { display: block; } /* VetUyPro: vet.css pone la imagen al 20 % (8,5 % de día); en el ingreso, la misma del resto */ body:has(.app--vet .vet-ingreso)::after { opacity: .45; filter: none; } /* de día, la misma imagen "dada vuelta" (claro por oscuro, mismos tonos): el azul noche pasa a celeste muy claro y los hexágonos quedan en azul suave; así no agrisa el papel crema y se reconoce a través del vidrio */ html[data-modo="dia"] body:is(:has(.app--ingreso), :has(.app--vet .vet-ingreso))::after { opacity: .5; filter: invert(1) hue-rotate(180deg) saturate(1.3); mix-blend-mode: multiply; } /* ---- la tarjeta: vidrio claro con el anillo del degradado de la marca (máscara: el vidrio no se tiñe) ---- */ /* (los tres :not(#…) suben la prioridad por encima del vidrio de noche de ajustes_3b8.css, que lleva :not(#_3b7):not(#_3b8) y !important, y del de vet.css, que se carga después) */ html body :is(.app--ingreso, .app--vet .vet-ingreso) .tarjeta--destacada.ingreso__tarjeta:not(#_ing1):not(#_ing2):not(#_ing3) { position: relative; border-radius: 20px; border: 1px solid transparent; background: var(--ing-vidrio) !important; box-shadow: var(--ing-sombra-alta), 0 22px 50px -38px color-mix(in srgb, var(--acc) 80%, transparent); -webkit-backdrop-filter: var(--ing-desenfoque); backdrop-filter: var(--ing-desenfoque); } /* (los :not(#…) solo suben la prioridad para ganarle al anillo de 1 px de ajustes_3b7.css, que lleva :not(#_3b7)) */ html body :is(.app--ingreso, .app--vet .vet-ingreso) .tarjeta--destacada.ingreso__tarjeta:not(#_ing1):not(#_ing2)::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; opacity: .95; } /* los campos: un poco más tapados que la tarjeta para que lo que se escribe se lea siempre */ html body :is(.app--ingreso, .app--vet .vet-ingreso) .ingreso__tarjeta .entrada { background: var(--ing-campo); border-radius: 14px; } /* los textos sobre el vidrio: etiquetas más firmes y una sombrita (de noche oscura, de día un brillo) para el contraste */ :is(.app--ingreso, .app--vet .vet-ingreso) .ingreso__tarjeta :is(.campo > label, .campo > .lbl, .ingreso__sub, .ingreso__nota, .ayuda-campo) { color: var(--ing-etiqueta); } :is(.app--ingreso, .app--vet .vet-ingreso) .ingreso__tarjeta :is(h1, h2, .palabra, label, .lbl, .ingreso__sub, .ingreso__nota, .ayuda-campo, .ingreso__enlaces a, .ingreso__enlaces .btn-enlace) { text-shadow: var(--ing-sombra-texto); } /* los enlaces: el acento de la marca, más claro de noche y más oscuro de día, para que pasen AA sobre la parte más clara del fondo que se ve a través (con el cian de siempre daba 3,7:1 de noche a 1280 px) */ :is(.app--ingreso, .app--vet .vet-ingreso) .ingreso__tarjeta .ingreso__enlaces :is(a, .btn-enlace) { color: var(--ing-enlace); } /* sin transparencias: alto contraste de la app, "más contraste" o "menos transparencia" del sistema, colores forzados */ html:is(.alto-contraste, [class*="a11y-hc-"]) body :is(.app--ingreso, .app--vet .vet-ingreso) .ingreso__tarjeta:not(#_ing1):not(#_ing2):not(#_ing3):not(#_ing4) { background: var(--sup) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } html:is(.alto-contraste, [class*="a11y-hc-"]) :is(.app--ingreso, .app--vet .vet-ingreso) .ingreso__tarjeta * { text-shadow: none !important; } html:is(.alto-contraste, [class*="a11y-hc-"]) body:is(:has(.app--ingreso), :has(.app--vet .vet-ingreso))::after { display: none; } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) { html body :is(.app--ingreso, .app--vet .vet-ingreso) .tarjeta--destacada.ingreso__tarjeta:not(#_ing1):not(#_ing2):not(#_ing3):not(#_ing4) { background: var(--sup) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } html body :is(.app--ingreso, .app--vet .vet-ingreso) .ingreso__tarjeta .entrada { background: var(--sup-hundida); } :is(.app--ingreso, .app--vet .vet-ingreso) .ingreso__tarjeta * { text-shadow: none !important; } body:is(:has(.app--ingreso), :has(.app--vet .vet-ingreso))::after { display: none; } } @media print { body:is(:has(.app--ingreso), :has(.app--vet .vet-ingreso))::after { display: none; } }