/* ============================================================================ Bolsa de Trabajo CMP — Pantallas previas al acceso Portada del portal, inicio de sesión, registro de institución y confirmación. Depende de cmp-tokens.css y cmp-tema.css, que deben cargarse antes. Aquí no se define ni un color nuevo: todo sale de los tokens, que ya traducen el Manual de Identidad Gráfica §1.5 (colores) y §1.14/§1.15 (tipografías). La composición es una tarjeta flotando sobre el Degradado Morado (§1.6): panel de marca a la izquierda, formulario a la derecha, y entre los dos un borde curvo. La curva no es adorno: separa dos zonas de lectura distintas —quién te recibe y qué tienes que hacer— sin necesidad de una línea. ============================================================================ */ /* ---- Fondo de página ----------------------------------------------------- Sin relleno ni centrado: la composición ocupa la ventana entera, de borde a borde. El degradado se queda en como respaldo del rebote de scroll, para que al arrastrar más allá del final no asome el blanco del navegador. -------------------------------------------------------------------------- */ .acceso-fondo{ min-height: 100dvh; margin: 0; background: var(--grad-purple-round) fixed; } /* ---- La composición ------------------------------------------------------ El morado va aquí y el panel blanco se monta encima: así el borde curvo del blanco recorta sobre morado sin tener que dibujar dos formas que encajen. overflow:hidden es lo que mantiene las formas decorativas dentro. min-height y no height: en el registro el formulario es más alto que la ventana y la composición tiene que poder crecer. -------------------------------------------------------------------------- */ .acceso{ width: 100%; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1.08fr; background: var(--grad-purple-round); overflow: hidden; } /* ---- Columna de marca ----------------------------------------------------- */ .acceso__marca{ position: relative; padding: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4.5rem); color: #fff; display: flex; flex-direction: column; } /* A pantalla completa las dos mitades son muy anchas, así que el contenido se limita y se centra dentro de la suya. Sin esto, la bajada se estiraría a líneas de 90 caracteres en un monitor grande y dejaría de leerse. */ .acceso__marca-fijo{ position: relative; z-index: 1; /* sobre las formas, que van en z-index 0 */ width: 100%; max-width: 460px; /* Los cuatro márgenes automáticos reparten el hueco sobrante: centran el bloque en horizontal y en vertical, y de paso empujan el pie al fondo. */ margin: auto; } .acceso__pie-marca{ position: relative; z-index: 1; width: 100%; max-width: 460px; margin-inline: auto; padding-top: 2.5rem; font-size: .78rem; line-height: 1.7; color: rgba(255,255,255,.62); } /* ---- Formas decorativas -------------------------------------------------- Elementos visuales en colores corporativos (§3.1). Van en vacíos y no en pseudoelementos porque son dos y el panel ya usa su ::before para el velo. aria-hidden en el marcado: no aportan nada que leer. -------------------------------------------------------------------------- */ .acceso__forma{ position: absolute; z-index: 0; pointer-events: none; } /* Cuarto de círculo dorado anclado a la esquina inferior izquierda. */ .acceso__forma--gota{ left: 0; bottom: 0; width: 275px; height: 275px; background: var(--grad-gold); border-radius: 0 100% 0 0; } /* Esfera morada: el degradado radial le da el volumen. Queda por delante del dorado y por detrás del texto. */ .acceso__forma--esfera{ right: 8%; bottom: 12%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #8E3A7E 0%, #6B2160 45%, #4A1340 100%); box-shadow: 0 30px 60px -25px rgba(0,0,0,.5); } /* ---- El isologo ---------------------------------------------------------- §1.9 «usar la versión con mayor contraste sobre el fondo». El isologo es un disco MORADO y el panel también es morado, así que se apoya en un disco color crema —#FFF8EB, PANTONE 18-9C, corporativo (§1.5)— que le devuelve el contraste sin tocar la marca. El relleno de ese disco es el área de protección de §1.7: el manual la define como el espacio entre isologo y logotipo, y aquí se reserva como espacio propio. Nada puede entrar en él. -------------------------------------------------------------------------- */ .acceso__isologo{ width: 104px; height: 104px; border-radius: 50%; background: var(--cmp-cream); padding: 13px; /* área de protección, ~12% del diámetro */ display: grid; place-items: center; box-shadow: 0 14px 34px -14px rgba(0,0,0,.55); } /* Las dos medidas y object-fit: §1.10 «no alterar sus proporciones». Si algún día el PNG deja de ser cuadrado, la marca se verá entera y no estirada. */ .acceso__isologo img{ width: 100%; height: 100%; object-fit: contain; display: block; } /* ---- Titulares del panel de marca ---------------------------------------- */ .acceso__titulo{ font-family: var(--font-display); font-weight: 800; /* Montserrat ExtraBold (§1.14) */ letter-spacing: var(--tracking-tight); text-transform: uppercase; font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1.05; color: #fff; margin: 2.5rem 0 .6rem; } .acceso__lema{ font-family: var(--font-display); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cmp-gold); margin: 0 0 1.75rem; } .acceso__bajada{ font-size: .95rem; line-height: 1.7; color: rgba(255,255,255,.85); margin: 0; max-width: 38ch; } /* ---- Columna del formulario ---------------------------------------------- El margen negativo mete el panel dentro del morado; el radio elíptico dibuja la curva. Los dos radios verticales suman 100%, que es lo que hace que los dos arcos se encuentren en el centro y formen una curva continua en lugar de dos esquinas con un tramo recto en medio. -------------------------------------------------------------------------- */ .acceso__panel{ /* ---- Escala del texto del panel --------------------------------------- Todo el texto de esta columna va un 10 % por debajo del resto del sistema: la columna de marca sostiene la voz alta y el formulario no necesita competir con ella. Es una variable y no valores ya multiplicados para que el ajuste se lea como lo que es —una decisión, no veinte números sueltos— y se pueda mover desde un solo sitio. Cada font-size de esta sección la aplica con calc(). Hace falta multiplicar en cada regla porque rem SIEMPRE se resuelve contra la raíz del documento: poner un font-size en el contenedor no encoge a un descendiente medido en rem. Solo escala lo que no declara tamaño propio. ---------------------------------------------------------------------- */ --escala-texto: .9; position: relative; z-index: 1; margin-left: -7%; background: var(--paper); border-radius: 13% 0 0 13% / 50% 0 0 50%; /* Más relleno a la izquierda que a la derecha: ahí es donde la curva entra en el panel, y el contenido no debe acercarse a ella. */ padding: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4.5rem) clamp(2.5rem, 5vw, 5rem) clamp(3.5rem, 8vw, 8rem); display: flex; flex-direction: column; justify-content: center; overflow: hidden; } /* Círculo crema muy tenue en la esquina inferior derecha: acompaña al dorado del otro lado y evita que la mitad blanca quede plana. */ .acceso__panel::after{ content: ""; position: absolute; z-index: 0; right: -90px; bottom: -110px; width: 320px; height: 320px; border-radius: 50%; background: var(--cmp-cream); opacity: .7; } /* Misma razón que en la columna de marca: el panel llega hasta el borde de la pantalla, pero un formulario de 900 px de ancho no se rellena, se sufre. */ .acceso__contenido{ position: relative; z-index: 1; width: 100%; max-width: 460px; margin-inline: auto; } /* El registro necesita más sitio: lleva filas de dos columnas. */ .acceso__contenido--ancho{ max-width: 660px; } /* La barra superior sigue existiendo para las vistas que la usan. Comparte el ancho máximo del contenido más ancho para no quedar descuadrada respecto al formulario que tiene debajo. */ .acceso__superior{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; width: 100%; max-width: 660px; margin: 0 auto 1.5rem; font-size: calc(.82rem * var(--escala-texto, 1)); } .acceso__volver{ color: var(--ink-mute); } .acceso__volver:hover{ color: var(--cmp-purple); } /* ---- Encabezado de cada pantalla ----------------------------------------- */ .acceso__rotulo{ font-family: var(--font-display); font-size: calc(.72rem * var(--escala-texto, 1)); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--cmp-purple); margin-bottom: .4rem; } .acceso__h1{ font-size: calc(clamp(1.7rem, 2.6vw, 2.15rem) * var(--escala-texto, 1)); margin: 0 0 .5rem; } .acceso__sub{ font-size: calc(.92rem * var(--escala-texto, 1)); color: var(--ink-soft); margin: 0 0 1.9rem; } /* Dentro del panel la tarjeta ya no pinta nada: el panel ES la tarjeta. Se neutraliza aquí en vez de quitarla del marcado para que las vistas de registro y confirmación sigan sirviendo sin tocarlas. */ .acceso__tarjeta{ background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; } /* ---- Campos con etiqueta flotante ---------------------------------------- El diseño de referencia pone el rótulo DENTRO del campo. Un placeholder a secas desaparece en cuanto se escribe y deja el campo sin identificar, así que el rótulo es un