/* ===================================================================== Tu Daia ID — la página donde se edita el perfil entero POR QUÉ NO USA `landing.css` A SECAS Comparte los tokens (`--papel`, `--tinta`, `--radio`, `--sombra`...), pero esta pantalla no es una carta de presentación: es una herramienta privada con un formulario. Los componentes de aquí (campos, franjas, la rejilla de colores) no existen en el resto del sitio y no tiene sentido cargarlos ahí. `hoja-daia-id.css` va ANTES que este archivo en el (ver `plantillas/cuenta.mjs`): la hoja trae sus propias clases `daia-id-*` y este archivo solo pone el chasis alrededor — la cabecera, las secciones del perfil, la rejilla de color. Ninguna regla de aquí toca una clase `daia-id-*` salvo para acoplar la hoja incrustada al ancho de la columna. ESTA PÁGINA ES OSCURA SIEMPRE, LA LANDING ES CLARA SIEMPRE (18 de septiembre de 2026) — y las dos comparten `landing.css`. Por eso esta página ya no puede depender del modo oscuro de `landing.css` (que se quitó por completo: la landing no lo necesita más). El bloque de aquí abajo trae sus PROPIOS valores oscuros, colgados de `html.pagina-oscura` — la clase que `plantillas/cuenta.mjs` pone en el `` — en vez de una consulta al sistema. Son los mismos tonos que antes vivían en el `@media` de `landing.css`: no se inventó nada nuevo, solo se mudó de sitio y se hizo incondicional. ===================================================================== */ html.pagina-oscura { --papel: #0E0F13; --papel-hondo: #08090C; --papel-alto: #16181D; --papel-tinta: #1D2027; --tinta: #F2F3F6; --tinta-media: #A3A9B8; --tinta-suave: #767C8C; --borde: #24262E; --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 30px -16px rgba(0, 0, 0, 0.7), inset 0 -8px 16px rgba(0, 0, 0, 0.3), inset 0 8px 16px rgba(255, 255, 255, 0.035); --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.55), 0 26px 52px -20px rgba(0, 0, 0, 0.75), inset 0 -10px 20px rgba(0, 0, 0, 0.35), inset 0 10px 20px rgba(255, 255, 255, 0.045); --sombra-hundida: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 5px 12px rgba(0, 0, 0, 0.45), inset 0 -2px 6px rgba(255, 255, 255, 0.05); } /* `[hidden]` SIEMPRE gana, y hace falta decirlo aqui. El navegador trae de fabrica `[hidden] { display: none }`, pero es una regla de las de MENOR prioridad de la cascada (la hoja de estilos del navegador, no la del sitio): CUALQUIER regla de esta pagina que le ponga un `display` a ese mismo elemento gana, aunque tenga menos especificidad. Sin este `!important` aparecieron dos fallos reales mirando la captura: el disco enseñaba la foto y la inicial a la vez (`.perfil__disco-boton img` las ponia en `display: block`), y el formulario del perfil se veia entero ANTES de entrar (`.perfil { display: flex }` le ganaba al `hidden` del `
`). La regla de aqui hace que `elemento.hidden = true` en JavaScript signifique SIEMPRE "no se ve", sin tener que acordarse de pelear la especificidad cada vez que se añade una clase nueva. */ [hidden] { display: none !important; } .pagina-cuenta { min-height: 100dvh; padding: 32px 20px 64px; display: flex; flex-direction: column; align-items: center; } .pagina-cuenta__cabecera { width: 100%; max-width: 480px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .pagina-cuenta__marca { display: flex; align-items: center; gap: 8px; font-family: var(--letra-titulo); font-weight: 800; font-size: 15px; color: var(--tinta); text-decoration: none; } .pagina-cuenta__marca img { width: 26px; height: 26px; border-radius: 8px; } /* EL MONO VA SOBRE CLARO (22 de septiembre de 2026). Es tinta casi negra sobre transparente, y esta pagina es oscura siempre: sobre ella el logo se disolvia y solo quedaban los lentes. Es la regla 3 del taller, la misma que ya cumple la landing con su cuadrado claro. */ .pagina-cuenta__marca img { background: #F2F3F6; padding: 2px; box-sizing: border-box; } .pagina-cuenta__salir { font-family: var(--letra-texto); font-size: 13px; font-weight: 600; color: var(--tinta-media); text-decoration: none; } .pagina-cuenta__salir:hover { color: var(--tinta); } /* La hoja incrustada hereda el ancho de esta columna, no el suyo propio (400px, pensado para una hoja modal). Ver el `data-incrustada` del CSS de la hoja. */ .pagina-cuenta__entrar { width: 100%; max-width: 420px; } /* --- El editor del perfil --- */ .perfil { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 18px; } .perfil__aviso { display: none; padding: 14px 18px; border-radius: var(--radio-chico); background: var(--papel-alto); box-shadow: var(--sombra); font-size: 13.5px; color: var(--tinta-media); text-align: center; } .perfil__aviso[data-visible="true"] { display: block; } .perfil__aviso[data-tipo="error"] { color: #F06A7B; } /* 5,96:1; #D93B53 no llegaba a 4,5 sobre oscuro */ .perfil__aviso[data-tipo="bien"] { color: #298252; } /* La tarjeta: la vista previa de como se ve tu perfil, no un formulario. Reusa exactamente los tonos que guarda `daia.perfil.color` — la misma paleta cerrada que la hoja, escrita una vez mas porque esta pagina no carga `hoja-daia-id.css` para pintar fuera de la hoja incrustada. */ .perfil__tarjeta { position: relative; overflow: hidden; border-radius: var(--radio); /* El hueco de arriba es de la BANDA, no relleno suelto: sin ella el disco quedaria flotando sobre un espacio vacio. */ padding: 58px 24px 22px; text-align: center; background: var(--papel-tinta); box-shadow: var(--sombra); transition: background var(--mov-rapido) var(--curva); } /* `--tarjeta-fondo` va JUNTO al color, no aparte: es el mismo hex que pone `background`, y lo lee el anillo del disco para recortarse exactamente del fondo de la tarjeta — si algun dia cambia uno de los siete, el otro seguiria automaticamente al estar en la misma regla. */ .perfil__tarjeta[data-color="tinta"] { background: #2E3140; --tarjeta-fondo: #2E3140; } .perfil__tarjeta[data-color="morado"] { background: #6C5CE7; --tarjeta-fondo: #6C5CE7; } .perfil__tarjeta[data-color="rojo"] { background: #E1292F; --tarjeta-fondo: #E1292F; } .perfil__tarjeta[data-color="verde"] { background: #298252; --tarjeta-fondo: #298252; } .perfil__tarjeta[data-color="azul"] { background: #4272CF; --tarjeta-fondo: #4272CF; } .perfil__tarjeta[data-color="naranja"] { background: #A96313; --tarjeta-fondo: #A96313; } .perfil__tarjeta[data-color="turquesa"] { background: #298080; --tarjeta-fondo: #298080; } .perfil__tarjeta[data-color] { color: #FFFFFF; } .perfil__tarjeta[data-color] .perfil__correo, .perfil__tarjeta[data-color] .perfil__desde { color: rgba(255,255,255,.74); } /* ===================================================================== LA BANDA DE LA TARJETA (19 de septiembre de 2026) Portada de uiverse.io/andrew-demchenk0/chatty-hound-50 (MIT). YA ESTABA PORTADA DENTRO DE LA HOJA, PERO SOLO AHI `daia-id-hoja.css` trae exactamente este mismo patron para la tarjeta INCRUSTADA (el paso «dentro» de la hoja). Esta pagina no depende de esas clases `daia-id-*` a proposito —son de la hoja, no del chasis de `/cuenta/`—, asi que el mismo dibujo se escribe una vez mas aqui, con las clases `perfil__*` de este archivo. POR QUE SVG Y NO UN PNG: unos 400 bytes, nitido en cualquier pantalla y toma el color de la tarjeta con `currentColor` — con una imagen harian falta siete, una por color de la paleta. ===================================================================== */ .perfil__banda { position: absolute; top: 0; left: 0; right: 0; height: 84px; /* `--tinta-suave`, no `--borde`: el borde es casi del mismo tono que el fondo de la tarjeta (los dos son grises muy oscuros) y el patron desaparecia por completo sin color elegido. */ color: var(--tinta-suave); opacity: .4; pointer-events: none; /* Se desvanece en vez de cortarse en seco (22 de septiembre de 2026), igual que la banda de la hoja: el corte dejaba una raya recta de lado a lado. */ -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); } .perfil__banda svg { display: block; width: 100%; height: 100%; } /* Con color de perfil elegido, la tarjeta entera es de ese color: los triangulos de tinta encima se ensucian, asi que pasan a blanco. */ .perfil__tarjeta[data-color] .perfil__banda { color: #FFFFFF; opacity: .3; } .perfil__disco-boton { position: relative; /* z-index por encima de `.perfil__banda`: el disco monta A CABALLO sobre la banda, no debajo de ella. */ z-index: 1; width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: var(--papel-alto); /* El anillo es lo que RECORTA el disco de la banda de atras: sin el, el circulo se confunde con el patron y parece que flota en un fondo sucio. Su color es el fondo de LA TARJETA (`--tarjeta-fondo`, junto a cada `data-color`), no un gris fijo — asi sigue al color que se elija. */ /* Y un anillo claro por dentro (22 de septiembre de 2026): los avatares traen fondos oscuros y, sin el, se leian como un agujero en la tarjeta. */ box-shadow: var(--sombra), 0 0 0 3px #F2F3F6, 0 0 0 6px var(--tarjeta-fondo, var(--papel-tinta)); overflow: visible; transition: box-shadow var(--mov-rapido) var(--curva); } /* La foto y la inicial ocupan el MISMO sitio, no uno debajo del otro: el boton es `position: relative` y las dos se ponen `position: absolute; inset: 0` para superponerse. `pintarDisco()` en `perfil.js` decide cual se ve con el atributo `hidden` de cada una. */ .perfil__disco-boton img, .perfil__disco-boton span.inicial { position: absolute; inset: 0; display: block; width: 84px; height: 84px; border-radius: 999px; object-fit: cover; } .perfil__disco-boton span.inicial { display: flex; align-items: center; justify-content: center; font-family: var(--letra-titulo); font-weight: 800; font-size: 30px; color: var(--tinta-media); background: var(--papel-tinta); } /* La camarita: se ve SIEMPRE, no solo al pasar el ratón — en el teléfono no hay "pasar por encima", y sin esto nadie sabría que el disco es un botón. */ .perfil__disco-camara { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 999px; background: var(--tinta); /* Tinta oscura, no blanco (22 de septiembre de 2026): el disco es `--tinta`, que aqui es casi blanco, y la camara blanca encima no se veia — quedaba un circulo claro vacio que nadie leia como boton. */ color: #16181D; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--papel-tinta); } .perfil__tarjeta[data-color] .perfil__disco-camara { box-shadow: 0 0 0 3px rgba(255,255,255,.18); } .perfil__nombre { font-family: var(--letra-titulo); font-weight: 800; font-size: 20px; margin: 0 0 2px; } .perfil__nombre[data-vacio="true"] { opacity: .6; font-weight: 600; } .perfil__correo { font-size: 13px; color: var(--tinta-suave); margin: 0 0 4px; } .perfil__desde { font-size: 12px; color: var(--tinta-suave); margin: 0; } /* --- El menú de avatar/foto, colgado del disco --- */ .perfil__menu-avatar { position: relative; margin: 10px auto 0; width: fit-content; } /* Portada de uiverse.io/nazar-gavrylyk/terrible-gecko-91 (MIT): 200px fijos y radio 10 —no `--radio-chico` (16px), que es el de las tarjetas grandes de esta pagina, no el de un menu contextual chico— y separador de 1.5px entre los grupos (aqui, antes del ultimo boton, que es el peligroso). */ .perfil__menu-avatar-lista { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5; width: 200px; background: var(--papel-alto); border-radius: 10px; box-shadow: var(--sombra-alta); padding: 6px; display: flex; flex-direction: column; gap: 2px; /* Aparece con un fundido y un asiento corto — antes aparecia y desaparecia en seco, sin nada entre los dos estados. `animation` y no `transition`: el atributo `hidden` pasa de golpe a `display:flex`, y una `transition` no arranca en el mismo fotograma en que el elemento empieza a existir — una `animation` si, porque corre desde su propio 0% en cuanto se pinta. */ animation: perfil-menu-asienta var(--mov-normal) var(--curva-asiento) both; } .perfil__menu-avatar-lista[hidden] { display: none; } /* Nombre propio y no `daia-id-tarjeta-asienta` de la hoja, aunque sea el mismo dibujo: este archivo no depende de las clases de la hoja a proposito (ver la cabecera), y coger prestado un `@keyframes` por su nombre seria la misma dependencia oculta con otro nombre. */ @keyframes perfil-menu-asienta { 0% { opacity: 0; transform: translateX(-50%) scale(.94); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } } .perfil__menu-avatar-lista button { all: unset; box-sizing: border-box; width: 100%; padding: 10px 14px; border-radius: 10px; font-family: var(--letra-texto); font-size: 13.5px; font-weight: 600; color: var(--tinta); cursor: pointer; /* Las filas se mueven al apuntarlas: un pixel arriba y a la derecha, y al pulsar se hunden — el mismo gesto que ya usan las filas de la hoja (`.daia-id-boton--fila`), para que el menu se sienta de la misma familia que el resto de Daia ID. */ transition: transform var(--mov-rapido) var(--curva-asiento), background-color var(--mov-rapido) var(--curva-asiento); } .perfil__menu-avatar-lista button:hover { background: var(--papel-tinta); transform: translate(1px, -1px); } .perfil__menu-avatar-lista button:active { background: var(--papel-tinta); transform: translate(0, 1px) scale(.99); } .perfil__menu-avatar-lista button[data-peligro="true"] { color: #D93B53; margin-top: 4px; padding-top: 12px; border-top: 1.5px solid var(--borde); border-radius: 0 0 10px 10px; } @media (prefers-reduced-motion: reduce) { .perfil__menu-avatar-lista { animation: none; } .perfil__menu-avatar-lista button { transition: none; } } /* --- Los 32 avatares, en rejilla --- */ .perfil__avatares { display: none; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 16px; border-radius: var(--radio-chico); background: var(--papel-alto); box-shadow: var(--sombra); } .perfil__avatares[data-abierto="true"] { display: grid; } .perfil__avatares button { all: unset; aspect-ratio: 1; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--papel-tinta); } .perfil__avatares button[aria-checked="true"] { border-color: var(--tinta); } .perfil__avatares img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Las secciones del formulario --- */ .perfil__seccion { border-radius: var(--radio); padding: 22px; background: var(--papel-alto); box-shadow: var(--sombra); } .perfil__seccion h2 { font-family: var(--letra-titulo); font-size: 14px; font-weight: 700; color: var(--tinta-media); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px; } .perfil__campo { margin-bottom: 14px; } .perfil__campo:last-child { margin-bottom: 0; } .perfil__campo label { display: block; font-family: var(--letra-texto); font-size: 12.5px; font-weight: 600; color: var(--tinta-media); margin-bottom: 6px; } .perfil__campo input[type="text"], .perfil__campo textarea, .perfil__campo select { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--borde); background: var(--papel-tinta); color: var(--tinta); font-family: var(--letra-texto); font-size: 14.5px; } /* LOS DESPLEGABLES CON LA MISMA PIEL QUE LA HOJA (22 de septiembre de 2026). Eran los del sistema: otra flecha y el texto 6px mas adentro que el de los campos de al lado, asi que la columna no alineaba. `appearance: none` quita el relleno propio del navegador y la flecha es la misma de `.daia-id-selector`, dibujada en linea. */ .perfil__campo select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23A3A9B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } /* El `textarea` es de linea por defecto y deja un hueco de base debajo: por eso el «0/160» quedaba flotando lejos de su campo. En bloque se pega. */ .perfil__campo textarea { display: block; resize: vertical; min-height: 64px; } .perfil__campo input:focus, .perfil__campo textarea:focus, .perfil__campo select:focus { outline: 2px solid var(--tinta); outline-offset: 1px; } /* EL PREFIJO @ Y SU CAMPO SON UNA SOLA PIEZA, Y NO LO ERAN. Dos fallos que se sumaban: 1. `align-items: center` con el `span` en content-box y el input en border-box: el prefijo salia 6.9 px mas alto y empezaba 3.4 px mas arriba. Con `stretch` el prefijo toma el alto del input y no hay dos numeros que mantener a mano. 2. La regla del radio NO SE APLICABA NUNCA. `.perfil__campo--usuario input` es (0,1,1) y la generica `.perfil__campo input[type="text"]` es (0,2,1), asi que ganaba la generica y el campo redondeaba sus CUATRO esquinas, incluida la que va pegada al prefijo — de ahi la costura. Anadir `[type="text"]` iguala la especificidad, y al ir despues, gana. */ .perfil__campo--usuario { display: flex; align-items: stretch; } .perfil__campo--usuario span { display: grid; place-items: center; box-sizing: border-box; padding: 0 2px 0 14px; border: 1.5px solid var(--borde); border-right: none; border-radius: 14px 0 0 14px; background: var(--papel-tinta); color: var(--tinta-suave); font-size: 14.5px; } /* `border-left: none` evita la doble linea donde se tocan las dos mitades. */ .perfil__campo--usuario input[type="text"] { border-radius: 0 14px 14px 0; border-left: none; /* El `@` y el nombre se leen juntos, como se escriben (22 de septiembre de 2026): con los 14px de relleno de todos los campos quedaba un hueco de palabra entre los dos. */ padding-left: 3px; } .perfil__contador { text-align: right; font-size: 11.5px; color: var(--tinta-suave); margin: 4px 2px 0; } .perfil__campo-error { font-size: 12.5px; color: #F06A7B; margin-top: 6px; } /* --- La rejilla de los siete colores --- Los mismos tonos que la tarjeta, en el mismo orden que la base de datos los admite. Elegirlos por el color y no por su nombre es mas rapido: nadie piensa "quiero turquesa", piensa "quiero ese". */ .perfil__colores { display: flex; flex-wrap: wrap; gap: 10px; } .perfil__colores button { all: unset; width: 38px; height: 38px; border-radius: 999px; cursor: pointer; border: 3px solid transparent; box-sizing: border-box; } .perfil__colores button[aria-checked="true"] { border-color: var(--tinta); } /* El tono «tinta» es gris casi negro sobre una tarjeta gris casi negra: se leia como un hueco vacio en la fila, no como un color que se puede elegir. Un contorno fino lo dibuja (22 de septiembre de 2026). El nombre de cada color sale al pasar por encima: lo pone `perfil.js` en el `title`. */ .perfil__colores button[data-c="tinta"]:not([aria-checked="true"]) { box-shadow: inset 0 0 0 1.5px #4A5162; } .perfil__colores button[data-c="tinta"] { background: #2E3140; } .perfil__colores button[data-c="morado"] { background: #6C5CE7; } .perfil__colores button[data-c="rojo"] { background: #E1292F; } .perfil__colores button[data-c="verde"] { background: #298252; } .perfil__colores button[data-c="azul"] { background: #4272CF; } .perfil__colores button[data-c="naranja"] { background: #A96313; } .perfil__colores button[data-c="turquesa"] { background: #298080; } /* EL MISMO «GUARDAR» QUE LA HOJA (22 de septiembre de 2026). Era una pastilla blanca pequena pegada a la izquierda; en la hoja, a dos clics de aqui, el mismo verbo es un boton morado de ancho completo. Dos formas para la misma accion en la misma cuenta hacian que se sintieran dos productos. Mismo morado que la pagina le pasa a la hoja (`acento` en `perfil.js`), mismo radio, misma letra, y apagado igual que alla: mezclado, no con opacidad. */ .perfil__guardar { display: block; width: 100%; box-sizing: border-box; margin-top: 16px; padding: 14px 16px; border: none; border-radius: 16px; background: #6C5CE7; color: #FFFFFF; font-family: var(--letra-titulo); font-weight: 700; font-size: 15px; cursor: pointer; transition: transform var(--mov-rapido) var(--curva); } .perfil__guardar:active:not(:disabled) { transform: translateY(1px) scale(.99); } .perfil__guardar:disabled { background: color-mix(in srgb, #6C5CE7 22%, #24262E); color: rgba(255, 255, 255, .45); cursor: default; } /* --- Las acciones: descargar, salir, borrar --- */ .perfil__acciones { display: flex; flex-direction: column; gap: 8px; } .perfil__accion { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 14px 18px; border: none; border-radius: var(--radio-chico); background: var(--papel-alto); box-shadow: var(--sombra); color: var(--tinta); font-family: var(--letra-texto); font-weight: 600; font-size: 14px; cursor: pointer; } /* En coral claro y no en gris (22 de septiembre de 2026): en gris se leia como un boton apagado. Es una sola fila, no una lista donde el rojo repetido se vuelve alarma. Con aire encima, para que no sea «una accion mas». */ .perfil__accion[data-peligro="true"] { color: #F06A7B; margin-top: 8px; } .perfil__accion[data-peligro="true"]:hover { background: rgba(240, 106, 123, .12); } .perfil__accion > span[aria-hidden="true"] svg { width: 17px; height: 17px; display: block; } .perfil__accion:disabled { opacity: .6; cursor: default; } /* La confirmacion de borrado: mismo tono de aviso que el resto del taller, una franja a la izquierda y no la tarjeta entera teñida. */ .perfil__confirmar { display: none; border-radius: var(--radio-chico); padding: 16px 18px; background: var(--papel-alto); box-shadow: var(--sombra); border-left: 3px solid #D93B53; } .perfil__confirmar[data-abierto="true"] { display: block; } .perfil__confirmar p { margin: 0 0 12px; font-size: 13.5px; color: var(--tinta-media); line-height: 1.5; } .perfil__confirmar-fila { display: flex; gap: 10px; } .perfil__confirmar button { border: none; border-radius: 999px; padding: 9px 16px; font-family: var(--letra-texto); font-weight: 700; font-size: 13px; cursor: pointer; } .perfil__confirmar-si { background: #D93B53; color: #fff; } .perfil__confirmar-no { background: var(--papel-tinta); color: var(--tinta); } @media (max-width: 420px) { .perfil__colores button { width: 34px; height: 34px; } } /* ===================================================================== EL INDICE LATERAL — rehecho el 24 de septiembre de 2026 Era un portado de rareui.com/components/bouncesidebar (MIT): un punto de 6px que viajaba entre las secciones por un ARCO, desviandose hacia un lado a mitad del camino, y la columna flotaba en el centro vertical de la ventana. El dueño lo vio «raro», y tenia tres motivos: 1. EL ARCO. Un punto que se sale de la linea para ir de «Perfil» a «Tus datos» no se lee como «estas aqui», se lee como algo que se escapa. Ahora es una marca del alto del rotulo que baja EN RECTO por una pista fina, como la barra lateral de los Ajustes del Mac. 2. FLOTABA EN MEDIO DE LA NADA. Centrado en la ventana quedaba a media altura del formulario, sin nada al lado. Ahora arranca a la altura de la tarjeta, que es donde empieza lo que indexa. 3. MARCABA LA SECCION EQUIVOCADA. Lo decidia un IntersectionObserver que solo miraba las secciones que ACABABAN de cambiar, no todas las visibles; y «Cuenta», la ultima, nunca llegaba a la franja del medio porque la pagina se acaba antes. Ahora se decide al bajar, con todas a la vista, y al llegar al final gana la ultima (`perfil.js`). SOLO EN PANTALLA ANCHA La columna de /cuenta/ ya ocupa el telefono entero; el indice necesita sitio a un lado, y por eso solo aparece desde 1000px — el mismo umbral que ya usa el riel de la landing para lo mismo. ===================================================================== */ .perfil__indice { position: fixed; /* -340 y no -280. Con -280 el indice terminaba en `50% - 203px` y la tarjeta del formulario empieza en `50% - 240px`: se pisaban 37 px EXACTOS a cualquier ancho —1000, 1100, 1200, 1280 dan los mismos 37—, asi que no era cosa del umbral y ensanchar la ventana no lo arreglaba. En pantalla se leia «Tus datNombre», con las dos palabras encimadas. Nadie lo habia visto porque `pruebas/capturas-de-la-cuenta.mjs` fotografia a 430 y 480 px de ancho y esta pieza solo existe desde 1000. */ left: calc(50% - 340px); /* A la altura de la tarjeta: 32 de relleno de la pagina + la cabecera (unos 44) + sus 28 de margen. */ top: 104px; z-index: 20; display: none; flex-direction: column; align-items: flex-start; gap: 2px; } @media (min-width: 1000px) { .perfil__indice:not([hidden]) { display: flex; } } /* La pista: la linea fina por la que baja la marca. */ .perfil__indice::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.09); } /* La marca: del alto del rotulo activo y encima de la pista. `perfil.js` le pone `top` y `height`; la transicion hace el viaje, en recto. */ .perfil__indice-punto { position: absolute; left: -0.5px; top: 0; width: 2px; height: 20px; border-radius: 2px; background: var(--tinta); transition: top var(--mov-normal) var(--curva-asiento), height var(--mov-normal) var(--curva-asiento); } .perfil__indice-item { display: block; padding: 6px 0 6px 16px; font-size: 13.5px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; color: var(--tinta-suave); text-decoration: none; transition: color var(--mov-rapido) var(--curva-asiento); } .perfil__indice-item:hover { color: var(--tinta-media); } .perfil__indice-item[data-activo="true"] { color: var(--tinta); } .perfil__indice-item:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .perfil__indice-punto { transition: none; } } /* ===================================================================== LA CAPA PREMIUM (24 de septiembre de 2026) La misma que la hoja (`hoja-daia-id.css`, bloque «LA CAPA PREMIUM», donde esta el porque entero), traducida a las clases `perfil__*` de esta pagina: la hoja y la pagina de la cuenta son la misma cuenta, y si una se viera de carnet y la otra de formulario se sentirian dos productos. Sigue oscura y con su relieve (`--sombra`); lo que se suma es la luz de arriba, el filo fino, menos peso en la letra y la tarjeta convertida en carnet. Todo cuelga de `html.pagina-oscura` para ganarle a las reglas de arriba sin pelear una por una la especificidad, y se quita entero borrando el bloque. El archivo de antes esta en `archivo/respaldo-daia-id-premium-2026-09-24/`. ===================================================================== */ /* La luz de la cuenta, arriba: el mismo morado que la pagina le pasa a la hoja (`acento` en `perfil.js`), al 16%. Sin ella la pagina era un negro plano de arriba abajo con una tarjeta flotando. */ html.pagina-oscura body { background: radial-gradient(80% 460px at 50% -140px, rgba(108, 92, 231, .16), transparent 100%), radial-gradient(120% 520px at 50% -200px, rgba(255, 255, 255, .05), transparent 100%), var(--papel); -moz-osx-font-smoothing: grayscale; } html.pagina-oscura .pagina-cuenta__marca { font-weight: 700; letter-spacing: -0.01em; } /* --- La tarjeta, convertida en carnet (ver la hoja, punto 3) --- `--tarjeta-base` y no `--tarjeta-fondo`, por lo mismo que alla: la de fondo la escriben los siete `[data-color]` y redefinirla aqui les ganaria. */ html.pagina-oscura .perfil__tarjeta { --tarjeta-base: var(--tarjeta-fondo, #2A2D37); border-radius: 26px; background: radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, .17), transparent 52%), linear-gradient(155deg, var(--tarjeta-base), color-mix(in srgb, var(--tarjeta-base) 70%, #000)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .24), 0 28px 50px -26px rgba(0, 0, 0, .9), 0 16px 40px -22px color-mix(in srgb, var(--tarjeta-base) 80%, transparent); } html.pagina-oscura .perfil__banda, html.pagina-oscura .perfil__tarjeta[data-color] .perfil__banda { inset: 0; height: auto; opacity: 1; background: repeating-radial-gradient( circle at 100% 0%, rgba(255, 255, 255, .11) 0, rgba(255, 255, 255, .11) .7px, transparent 1.5px, transparent 8px ); -webkit-mask-image: radial-gradient(95% 110% at 100% 0%, #000, transparent 72%); mask-image: radial-gradient(95% 110% at 100% 0%, #000, transparent 72%); } html.pagina-oscura .perfil__banda svg { display: none; } html.pagina-oscura .perfil__tarjeta::before { content: "DAIA ID"; content: "DAIA ID" / ""; position: absolute; top: 20px; left: 24px; z-index: 1; font-family: var(--letra-texto); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; color: rgba(255, 255, 255, .6); pointer-events: none; } html.pagina-oscura .perfil__disco-boton { box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 16px 30px -10px rgba(0, 0, 0, .65); } html.pagina-oscura .perfil__tarjeta .perfil__disco-camara, html.pagina-oscura .perfil__tarjeta[data-color] .perfil__disco-camara { box-shadow: 0 3px 10px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .08); } html.pagina-oscura .perfil__nombre { font-weight: 700; font-size: 22px; letter-spacing: -0.022em; } html.pagina-oscura .perfil__desde { letter-spacing: .01em; } /* --- Las secciones: el relieve de siempre, mas el filo y el canto --- */ html.pagina-oscura .perfil__seccion, html.pagina-oscura .perfil__avatares, html.pagina-oscura .perfil__confirmar, html.pagina-oscura .perfil__aviso { box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .05); } html.pagina-oscura .perfil__menu-avatar-lista { box-shadow: var(--sombra-alta), inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(255, 255, 255, .07); } html.pagina-oscura .perfil__seccion h2 { font-family: var(--letra-texto); font-size: 12px; font-weight: 600; letter-spacing: .07em; } html.pagina-oscura .perfil__campo label { font-weight: 500; } /* --- Los campos, hundidos y con el foco como halo (ver la hoja) --- El del @usuario son dos piezas pegadas: la sombra de dentro, puesta en cada una, dibujaba una costura justo donde se tocan. Por eso ahi la pieza es la envoltura (`.perfil__campo--usuario`) y las dos de dentro se vuelven transparentes. */ html.pagina-oscura .perfil__campo input[type="text"], html.pagina-oscura .perfil__campo textarea, html.pagina-oscura .perfil__campo select, html.pagina-oscura .perfil__campo--usuario { border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background-color: #1A1C22; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .035); transition: border-color var(--mov-rapido) var(--curva-asiento), box-shadow var(--mov-rapido) var(--curva-asiento); } html.pagina-oscura .perfil__campo--usuario span, html.pagina-oscura .perfil__campo--usuario input[type="text"] { border: none; background: transparent; box-shadow: none; } html.pagina-oscura .perfil__campo input[type="text"]:focus, html.pagina-oscura .perfil__campo textarea:focus, html.pagina-oscura .perfil__campo select:focus, html.pagina-oscura .perfil__campo--usuario:focus-within { outline: none; border-color: #6C5CE7; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 0 4px rgba(108, 92, 231, .22); } html.pagina-oscura .perfil__campo--usuario input[type="text"]:focus { outline: none; border: none; box-shadow: none; } /* --- Guardar, levantado como el principal de la hoja: el degradado baja hacia MAS oscuro para no perder el 4,5:1 de la letra blanca --- */ html.pagina-oscura .perfil__guardar:not(:disabled) { background: linear-gradient(180deg, #6C5CE7, color-mix(in srgb, #6C5CE7 82%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 10px 24px -12px rgba(108, 92, 231, .85), 0 2px 4px -1px rgba(0, 0, 0, .45); } html.pagina-oscura .perfil__guardar { font-weight: 600; } html.pagina-oscura .perfil__guardar:disabled { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); } /* --- Los siete colores, como piedras: luz arriba, sombra abajo, y el elegido con un aro separado por un hueco del color de la seccion --- */ html.pagina-oscura .perfil__colores button { border: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -3px 6px rgba(0, 0, 0, .25); transition: transform var(--mov-rapido) var(--curva-asiento), box-shadow var(--mov-rapido) var(--curva-asiento); } html.pagina-oscura .perfil__colores button:hover { transform: scale(1.06); } html.pagina-oscura .perfil__colores button[data-c="tinta"]:not([aria-checked="true"]) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -3px 6px rgba(0, 0, 0, .25), inset 0 0 0 1px #4A5162; } html.pagina-oscura .perfil__colores button[aria-checked="true"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -3px 6px rgba(0, 0, 0, .25), 0 0 0 3px var(--papel-alto), 0 0 0 5px var(--tinta); } /* --- Las acciones: la letra a 500 y la flecha apagada, como las filas --- */ html.pagina-oscura .perfil__accion { font-weight: 500; font-size: 15px; box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .05); } html.pagina-oscura .perfil__accion:not([data-peligro="true"]) > span[aria-hidden="true"] { color: #6C7385; } /* EL MENU DE LA FOTO YA NO SE CORTA (24 de septiembre de 2026). La tarjeta llevaba `overflow: hidden` para recortar la banda en sus esquinas redondeadas, y con eso recortaba tambien el menu que cuelga del disco: con dos opciones quedaba justo en el borde, y con foto puesta la tercera («Quitar la foto») caia fuera de la tarjeta y no se veia. La banda se recorta ahora sola con el mismo radio (`border-radius: inherit`), y la tarjeta deja salir el menu por encima de la seccion de abajo. */ html.pagina-oscura .perfil__tarjeta { overflow: visible; } html.pagina-oscura .perfil__banda { border-radius: inherit; } /* «Quitar la foto» iba en `#D93B53`, que sobre este menu da 3,98:1 — por debajo del 4,5 de un texto de 13,5px. Es el mismo coral claro que la hoja y la fila de «Borrar mi cuenta» ya usan en oscuro (5,96:1). */ html.pagina-oscura .perfil__menu-avatar-lista button[data-peligro="true"] { color: #F06A7B; }