/* =========================================================================== * LA PUERTA · la hoja propia de `entrada.html` (20 de agosto de 2026) * =========================================================================== * Maqueta aprobada: `Ali/Designs/ali-entrada-y-correo-v2.html`. * * ⚠️ POR QUÉ EXISTE ESTA HOJA. Hasta hoy la puerta colgaba de `/styles.css`, * la hoja del clásico, que es de ANTES de que existiera el lenguaje. Mientras * cargue esa hoja, la limpieza que la retira no puede tocarla sin dejar sin * pantalla de acceso a todo el mundo: la puerta es lo único que usa TODA * persona que entra en Ali, incluida una clínica nueva el primer día. * * ⚠️ LO QUE CAMBIA NO ES EL COLOR, ES QUE NO HAY CAJA. La tarjeta con sombra * sobre crema desaparece: papel oscuro a sangre, una columna de 336px, y el * aire haciendo el trabajo que hacía el borde. Es la forma de la puerta del * panel de operación, que es la referencia que eligió Joe. * * ⚠️ UNA SOLA COSA CORAL, Y ES EL BOTÓN. Los dos enlaces («Entrar con tu * huella», «Crea tu espacio») eran coral sobre papel: 2.83, que no pasa AA. * Pasan a tinta subrayada, 15.66. El subrayado hace el trabajo que hacía el * color y NO SE QUITA. Con tres corales el coral deja de querer decir «esto es * lo que haces aquí». * * ⚠️ ESTA PANTALLA ES SIEMPRE DE NOCHE, y no por gusto: no carga `tema.js`, así * que nunca lleva `data-tema="olivo"` y se queda con el `:root` de * `tokens.css`. Los contrastes de abajo están medidos contra esos valores. El * día que alguien enlace `tema.js` aquí, `--necesita-suave` pasa a valer * `--tinta` (tinta OSCURA) y el error de un paso desaparece sobre el cromo. * * Los contrastes NO se copian de aquí: los recalcula `test/entrada-puerta.test.js` * leyendo `tokens.css`. Un comentario se queda viejo; una prueba no. * =========================================================================== */ /* ⚠️ ESTA LÍNEA VA LA PRIMERA, Y LE COSTÓ TRES DESPLIEGUES AL BACK OFFICE. `entrada.js` esconde y enseña los tres pasos con el ATRIBUTO `hidden`. La regla del navegador es `[hidden]{display:none}`, que es un selector de ATRIBUTO: cualquier regla de CLASE de esta hoja le gana y el paso escondido se queda encima del que toca. No falla nada, sólo salen dos formularios apilados. Ver la lápida de `web-operador/bo.css`. */ [hidden]{display:none !important} *{margin:0;padding:0;box-sizing:border-box} /* `color-scheme` para que la barra de scroll y el relleno del navegador salgan oscuros: sin esto el móvil pinta una franja blanca al rebotar el scroll. */ :root{color-scheme:dark} html,body{min-height:100%} body{ /* ⚠️ EL LIENZO, NO EL CROMO (2026-09-11). El cromo es el color del MUEBLE: el raíl, la barra, el menú. Una pantalla entera pintada de mueble se lee como un panel flotando sin página detrás, y era parte de por qué la puerta no parecía del mismo producto que lo que hay al otro lado. */ background:var(--lienzo); color:var(--riel-tinta); font-family:var(--f-cuerpo); font-size:14px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* ---- la columna ---------------------------------------------------------- */ /* ═══ LA AURORA ═══════════════════════════════════════════════════════════ La puerta «C», elegida por Joe y calcada de la de Stripe: una atmósfera enorme entrando por la esquina de arriba a la derecha, cayendo a lavanda y muriendo en teal abajo, y encima un formulario deliberadamente sobrio. Ninguna ilustración, ninguna frase de marca, ningún mensaje. Color, tamaño y silencio, que es lo único que hace Stripe y por eso funciona. ⚠️ LOS CUATRO TONOS SON FICHAS (`--puerta-1..4`) Y CAMBIAN CON LA HORA. Esta hoja no escribe ni un color a mano; los valores y los cuatro momentos viven en `tokens.css`. Y sólo pintan FONDO: ni una decisión de contraste cuelga de la hora (§13.1 del lenguaje). ⚠️ `mix-blend-mode:screen` ES LO QUE HACE QUE SEA LUZ Y NO PINTURA. Sin él, cuatro capas translúcidas sobre un fondo oscuro se suman a barro gris. Con él, se comportan como focos: donde se cruzan, aclaran. ⚠️ VA EN UN PSEUDOELEMENTO DETRÁS (`z-index:-1`) Y NO EN EL FONDO DE `.auth`, porque un `background` no puede llevar blend contra su propio elemento. El `isolation:isolate` mantiene la mezcla dentro de la puerta. */ .auth{ min-height:100dvh; display:flex; justify-content:center; position:relative; isolation:isolate; overflow:hidden; /* ⚠️ EN COLUMNA, Y LA MARCA ARRIBA FUERA DE LA TARJETA: es lo que hacen las seis puertas que fuimos a mirar. La tarjeta sigue centrándose con `margin:auto`, no con `align-items`, por el motivo de siempre (el paso del alta son seis campos y en una ventana baja `align-items:center` se lleva el título por encima del principio del scroll y no hay forma de llegar a él). ⚠️ Y AL CENTRO, NO A LA IZQUIERDA (Joe, 2026-09-11: *"actually lets center it all"*). Estuvo a la izquierda unas horas, calcado de Stripe, donde la composición pide que el formulario viva en la parte tranquila de la pantalla. Con la aurora de esta casa —que entra por la esquina y cruza toda la pantalla en diagonal— no hay parte tranquila a la izquierda: sólo hay fondo vacío, y la puerta se veía descolgada. ⚠️ EL LOGOTIPO SE CENTRA CON LA TARJETA, no con la página: los dos son hijos de la misma columna, así que comparten eje sin que nadie mida nada. */ flex-direction:column; align-items:center; /* ⚠️ EL RELLENO ES SIMÉTRICO, Y ANTES NO. Venía de la maqueta con 52 arriba y 44 abajo, que ahí daba igual porque era una caja dentro de una página. Con la columna centrada NO da igual: el hueco que sobra se reparte a partes iguales entre los dos márgenes, así que esos 8px de diferencia se quedan enteros y la pantalla se ve alta. Medido en vivo: 52 arriba, 34 abajo. */ padding:48px 24px; } .auth::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; mix-blend-mode:screen; /* ⚠️ LA TRANSICIÓN ES LARGA A PROPÓSITO: el cambio de luz ocurre UNA vez, en punto. Medio segundo parpadea; dos segundos respiran. */ transition:background 1.8s ease; background: radial-gradient(78% 120% at 104% -18%, var(--puerta-1) 0%, transparent 66%), radial-gradient(62% 96% at 84% -6%, var(--puerta-2) 0%, transparent 58%), radial-gradient(72% 104% at 116% 38%, var(--puerta-3) 0%, transparent 68%), radial-gradient(64% 86% at 96% 88%, var(--puerta-4) 0%, transparent 62%); } /* Quien pide menos movimiento no pierde la luz, pierde el cambio. */ @media (prefers-reduced-motion:reduce){ .auth::before{transition:none} } /* ⚠️ `.auth-card` YA NO DIBUJA NINGUNA TARJETA. El nombre se queda porque es el contrato de marcado (ver §1.3 del handover y `test/entrada-puerta.test.js`): renombrarlo no rompe nada visible hoy y rompe la prueba que lo vigila. Aquí sólo es la columna. */ /* ⚠️ SE CENTRA CON `margin:auto`, Y NO CON `align-items:center` (2026-08-20). Las dos centran igual mientras el contenido quepa. La diferencia sale en el paso del alta, que son seis campos y NO cabe en una ventana baja: con `align-items:center` lo que sobra se reparte arriba y abajo, y lo de arriba se sale POR ENCIMA del principio del scroll, así que el título y los dos primeros campos quedan fuera y no hay forma de llegar a ellos. Un margen automático de flex sólo reparte el hueco que SOBRA: si no sobra, vale cero y la columna se pega arriba y se scrollea entera. */ /* ⚠️ Y DESDE EL 2026-09-11 SÍ DIBUJA UNA TARJETA OTRA VEZ, que es lo que pide la puerta «C»: con una atmósfera detrás, un formulario suelto sobre el degradado no se lee. Es la tarjeta de Stripe: ancha, con mucho aire, filo de 1px y sombra difusa. El `backdrop-filter` deja pasar la luz sin dejar que compita con el texto. ⚠️ EL FONDO ES `--cromo` CON ALFA, y por eso la ficha translúcida existe: una tarjeta opaca tapa la aurora justo donde más se ve. */ .auth-card{ width:100%;max-width:388px;margin:auto; background:var(--puerta-caja); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid var(--raya); border-radius:var(--r-panel); padding:30px 32px 28px; box-shadow:var(--sombra-capa); } /* ---- la marca ------------------------------------------------------------ */ /* ⚠️ EL LOGOTIPO VA FUERA DE LA TARJETA, que es lo que hacen las seis puertas que fuimos a mirar (Vercel, Mercury, Stripe, Ramp, Attio): la marca vive en la PÁGINA, no dentro del formulario. Lo que NO copiamos de ellas es el sitio: ahí va arriba a la izquierda, y aquí va centrado sobre la tarjeta, por lo que dice el bloque de `.auth` de más arriba. */ .auth-head{flex:none;margin-bottom:0;align-self:center} .rbrand{display:block;width:max-content} .rbrand img{display:block;height:30px;width:auto} /* ═══ AQUÍ VIVÍA EL LOGOTIPO DE ALI, Y SE FUE EL 2026-09-11 ════════════════ `.ali-mark`, `.ali-face`, `.ali-word`, el latido del punto y `.auth-sub` («tu aliada clínica»). Joe: *"you know we have moved to remind"*. El armazón de la app carga el logotipo de Remind desde el 10 de septiembre, así que la puerta enseñaba un producto y la pantalla siguiente otro. ⚠️ NO SE «LIMPIA» DEVOLVIÉNDOLO: Ali dejó de venderse a otras clínicas el 9 de septiembre (`CLINIC-OS-ROADMAP.md`), o sea que no hay una segunda marca a la que servir aquí. Si algún día la hay, la marca sale de la clínica y no de un archivo, y eso se decide antes de tocar esto. El canon del logotipo de Ali (`server/lib/aliStyles.js`) se retiró el 2026-09-14 con la portada de holaali.app, y está en la historia de git; la prueba que comparaba esta copia con aquel canon ya se había retirado con su lápida en `test/entrada-puerta.test.js`. `git show HEAD -- web-staff/entrada.css` tiene las reglas enteras. */ /* ---- el paso ------------------------------------------------------------- */ /* ⚠️ LA TARJETA DE LA HUELLA VA EN ESTA MISMA REGLA, y no es un detalle: su h2 no cuelga de `.auth-card`, así que con la regla sólo en `.auth-card h2` se quedaba con la fuente del cuerpo (Manrope) mientras los otros tres títulos de la pantalla salen en Libre Franklin. No falla nada; sólo es el único título de la puerta con otra letra, que es la clase de fallo que nadie reporta. */ .auth-card h2, .ali-gate-card h2{ font-family:var(--f-cromo);font-weight:700;font-size:17px; letter-spacing:-.02em;color:var(--riel-tinta); } .lead{font-size:13.5px;line-height:1.55;color:var(--riel-apagado);margin:6px 0 20px} /* El correo al que salió el código, dentro de la frase: es el dato que decide si vuelves atrás a corregirlo, así que se lee en tinta, no en apagado. */ .lead strong{color:var(--riel-tinta);font-weight:600} /* ---- los campos ---------------------------------------------------------- */ .field{margin-bottom:12px} .field label{ display:block; /* El mismo peso que el rótulo de la marca: es la misma voz, y ahorra bajarse un tercer archivo de la mono en la puerta de todo el mundo. */ font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.09em; text-transform:uppercase;color:var(--riel-apagado);margin-bottom:6px; } .field input{ width:100%; background:var(--riel-campo); border:1px solid var(--riel-raya); border-radius:12px; color:var(--riel-tinta); font-family:var(--f-cuerpo); /* ⚠️ 16px NO ES UN GUSTO: por debajo de 16 el Safari de iPhone hace zoom solo al tocar el campo, y en la puerta eso descoloca la pantalla entera justo cuando alguien está escribiendo su correo. */ font-size:16px; padding:12px 15px; } .field input::placeholder{color:var(--riel-apagado);opacity:1} .field input:focus{ outline:none; border-color:var(--necesita-persona); /* Un aro de verdad, no sólo el borde: sobre el cromo un borde de 1px que cambia de color no se ve, y quien navega con teclado pierde de vista en qué campo está. El aro es coral porque es la única señal fuerte que tiene esta pantalla, y aquí no compite con el botón: sólo hay uno a la vez. */ outline:2px solid var(--necesita-persona); outline-offset:1px; } /* ⚠️ EL AUTORRELLENO DE CHROME PINTA EL CAMPO DE BLANCO, y sobre el cromo eso es una mancha con el texto ilegible dentro. No se arregla con `background` (el navegador gana): se arregla aplazando su transición para siempre y forzando el color del texto, que es lo único que sí obedece. */ .field input:-webkit-autofill, .field input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--riel-tinta); caret-color:var(--riel-tinta); transition:background-color 100000s ease-in-out 0s; } /* El código: mono, grande y separado. El relleno de la derecha compensa el tracking de la última cifra, que si no deja el número descentrado. */ .code-input{ font-family:var(--f-mono) !important; font-weight:700; font-size:26px !important; letter-spacing:.34em; text-align:center; padding:14px 10px 14px 22px !important; } /* ---- ¿cómo trabajas? · el segmentado del alta ---------------------------- */ .field-segm{margin-bottom:12px} .segm{ display:flex;gap:6px; background:var(--riel-campo); border:1px solid var(--riel-raya); border-radius:99px;padding:3px; } .segm-b{ flex:1;text-align:center; font-family:var(--f-cromo);font-weight:700;font-size:13px; border:none;background:none;color:var(--riel-apagado); padding:8px 6px;border-radius:99px;cursor:pointer; } /* ⚠️ `.on` LA PONE `entrada.js`, y es lo que estampa `orgs.plan_tier` desde el minuto uno: la elección vive en la clase, no en el `.value` de un input. */ .segm-b.on{background:var(--necesita-persona);color:var(--sobre-coral)} .conn-hint{ display:block;font-size:12px;line-height:1.5; color:var(--riel-apagado);margin:8px 2px 0; } /* ---- el error de cada paso ----------------------------------------------- */ /* ⚠️ SIN `min-height`: los tres huecos están vacíos casi siempre y reservar sitio para un mensaje que no está mete un salto en blanco en cada paso. */ .formerr{font-size:12.5px;line-height:1.5;color:var(--necesita-suave);margin:2px 0 8px} .formerr:empty{margin:0} /* ---- los botones --------------------------------------------------------- */ /* `.btn` es la FORMA; `.btn-teal` es el relleno. Van separados porque `entrada.js` escribe `class="btn btn-teal"` en la tarjeta de la huella, y así esa tarjeta hereda las dos sin repetir nada. ⚠️ `btn-teal` es un nombre de la paleta vieja (no queda un solo teal aquí). Se conserva porque lo escribe el JS: renombrarlo deja el botón de la huella sin estilo y no falla nada, que es la peor forma de romperse. */ .btn{ display:block;width:100%; border:none;border-radius:99px; font-family:var(--f-cromo);font-weight:700;font-size:15px; padding:13px 20px;margin-top:6px;cursor:pointer; } /* ⚠️ LA ETIQUETA NO ES BLANCA, Y ESO ES EL ARREGLO. Blanco sobre coral mide 2.88 y parece correcto; `--sobre-coral` parece raro en una muestra y mide 6.33. Lo mide la prueba, no este comentario. */ /* ⚠️⚠️ Y VUELVE A SER TEAL, QUE ES LO QUE SU NOMBRE DECÍA (2026-09-11). Estaba pintado con `--necesita-persona`, o sea el coral que el lenguaje reserva para **esto necesita a una persona**. Esa señal sólo sirve si no se gasta en nada más: cero coral en pantalla quiere decir que nadie te necesita, y el botón principal de la primera pantalla se la fundía entera. El mando que actúa va en `--riel-cta`, como el `Nueva cita` de la barra. */ .btn-teal{background:var(--riel-cta);color:var(--riel-cta-tinta)} .btn-teal:hover:not([disabled]){filter:brightness(.94)} .btn[disabled]{opacity:.55;cursor:default} /* El enlace de debajo del botón. Subrayado SIEMPRE: es lo que sustituye al coral que tenía y no pasaba AA. */ .linkbtn{ display:block;width:100%; background:none;border:none; font-family:var(--f-cuerpo);font-weight:600;font-size:13px; color:var(--riel-tinta); text-decoration:underline;text-underline-offset:3px; padding:13px 0 0;text-align:center;cursor:pointer; } .linkbtn[disabled]{opacity:.55;cursor:default} /* ---- el pie de cada paso ------------------------------------------------- */ /* ⚠️ EL PIE VIVE DENTRO DE SU PASO, no debajo de los tres. Antes era uno solo al final de la tarjeta: «¿Clínica nueva? Crea tu espacio» seguía delante mientras tecleabas tu código, y también durante el alta, que es literalmente lo que acababas de tocar. */ .tie{ font-size:12px;line-height:1.55;color:var(--riel-apagado);text-align:center; margin-top:30px;padding-top:18px;border-top:1px solid var(--riel-raya); } .tie .linkbtn{ display:inline;width:auto;padding:0; font-size:inherit;font-weight:600;color:var(--riel-tinta); } /* ---- el aviso de un momento --------------------------------------------- */ .toast{ position:fixed;left:50%;bottom:24px;transform:translateX(-50%); z-index:40; max-width:min(420px,calc(100vw - 32px)); background:var(--riel-superficie); border:1px solid var(--riel-raya); border-radius:14px; color:var(--riel-tinta); font-size:13.5px;line-height:1.5;text-align:center; padding:12px 18px; } /* =========================================================================== LA TARJETA DE LA HUELLA · la escribe `entrada.js`, no el HTML =========================================================================== ⚠️ ESTA ES LA TRAMPA DE LA MUDANZA. `pkOferta()` (entrada.js:297) construye esta tarjeta con `innerHTML` EN TIEMPO DE EJECUCIÓN, así que sus clases no aparecen en `entrada.html` y una hoja que sólo cubra lo que se ve en el HTML la deja sin estilo. Y encima casi no se ve: sólo la mira quien acaba de meter bien su código, en un dispositivo sin llave, y como mucho una vez por semana. En la prueba manual normal no aparece NUNCA. Por eso hay una prueba que afirma estas tres clases contra el JS. Los tres estilos escritos a mano dentro de ese `innerHTML` y el `#1D9E75` suelto se mudaron aquí en el mismo cambio. */ .ali-gate{ position:fixed;inset:0;z-index:9999; display:flex;align-items:center;justify-content:center; padding:20px; /* Opaco, no un velo: la sesión YA está abierta y el formulario de detrás está muerto. Enseñarlo medio traslúcido invita a tocarlo. */ background:var(--cromo); } .ali-gate-card{ width:100%;max-width:400px; background:var(--riel-superficie); border:1px solid var(--riel-raya); border-radius:20px; padding:34px 30px; text-align:center; } /* ⚠️ `.pk-gate` NO ES DECORACIÓN: marca la ÚNICA capa que aparece en marcha, con la sesión ya abierta y la pantalla de acceso todavía detrás. Sin la entrada, aparece de golpe y se lee como que algo falló. */ .pk-gate{animation:pk-entra .18s ease-out} @keyframes pk-entra{from{opacity:0}to{opacity:1}} .ali-gate-card h2{margin:12px 0 8px} .ali-gate-card p{font-size:13.5px;line-height:1.55;color:var(--riel-apagado)} .ali-gate-card .btn{width:auto;padding:12px 24px;margin:18px auto 0} .ali-gate-card .linkbtn{display:block;width:auto;margin:14px auto 0;padding:0} .pk-emoji{font-size:34px;line-height:1} /* El ✓ de «tu huella quedó activada». Una confirmación que no se puede perder de vista: el toast callado dejó a Joe sin saber si había funcionado. */ .pk-ok{font-size:40px;line-height:1;color:var(--est-bien)} @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }