/** ========================================================================== * PANTALLA DE ACCESO 2026: la tarjeta de login en vidrio (Eduardo, 24/09/2026) * * pagina_inicio.php sirve dos páginas: la portada (/, el login, Super Forms * 219) y /restaurar-password/ (Super Forms 281). Son a pantalla completa, sin * cabecera ni footer. La foto de fondo se queda —es lo que el vidrio * refracta— y la tarjeta verde pasa a una lámina de vidrio como la del popup de * Brevo de la web (css/brevo-popup.css): blanco translúcido, desenfoque, borde * claro con brillo arriba y, en Blink, la refracción «liquid glass». * * Solo se cargan cei-tokens.css, cei-accesible.css y esta hoja: la de la * cabecera reserva su alto en el y aquí dejaría una franja vacía. * * EXCEPCIÓN REGISTRADA: `!important` en casi todo. style.css del portal pinta * esta pantalla con selectores de ID y !important (#super-form-219 input…) y * Super Forms escribe colores en línea en el botón; la única forma de ganarles * es !important con un ID en el selector: :is(#super-form-219, #super-form-281). * Revisar si algún día se limpian esas reglas de style.css (líneas ~560-760). * Motivo: hojas heredadas · Autor: Eduardo · 24/09/2026. * * Formato SUITCSS donde el marcado es nuestro; donde es de Super Forms, sus * clases. Tokens de cei-tokens.css: el tamaño de letra y los espacios se * adaptan solos en 1199.98 y 767.98, sin media queries aquí. * ========================================================================== */ /* El radio único de los bloques del portal (ver cei-alumnos.css, que esta pantalla no carga): si cambia allí, cambiarlo aquí */ :root { --Portal-Radio-Bloque: 24px; } /* -------------------------------------------------------------------------- * La página y la lámina * -------------------------------------------------------------------------- */ /* Aire alrededor para que la lámina no toque los bordes en el móvil */ .container_home { box-sizing: border-box; padding: var(--Global-Espacio-TituloContenido); font-family: var(--Font-Family-Primary); letter-spacing: var(--Font-Letter-spacing-2); } /* * El cristal del popup de Brevo. El radio, el de las láminas de la barra * (--Global-Radio-Panel). La sombra es la del popup: una lámina que flota * sobre una foto necesita separarse de ella (la regla «sin sombras» del * sistema es para lo que va sobre el lienzo, no para lo que flota). */ .container_home .formulario_home { box-sizing: border-box; width: min(560px, 100%); /* EXCEPCIÓN: ancho de lectura de un formulario, sin token */ padding: var(--Global-Espacio-Superior); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: var(--Portal-Radio-Bloque); background: var(--Global-Velo-Blanco); -webkit-backdrop-filter: var(--Global-Vidrio-Blur); backdrop-filter: var(--Global-Vidrio-Blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.4), 0 24px 70px rgba(0, 0, 0, 0.22); color: var(--Global-Color-Black); text-align: left; } /* * La refracción, en regla aparte como en la web: si el navegador no admite un * url() dentro de backdrop-filter —Safari no—, esta declaración entera es * inválida y se cae sola, dejando el blur de arriba. La clase la pone el script * de cei26_pie_acceso(), con el mismo test que js/cei-cabecera.js. */ body.cei-has-liquidGlass .container_home .formulario_home { backdrop-filter: var(--Global-Vidrio-Blur) url(#CeiLiquidGlass); } /* El ). */ .MenuNavegacion-filtros { position: absolute; width: 0; height: 0; overflow: hidden; } /* -------------------------------------------------------------------------- * Logo, título y textos * -------------------------------------------------------------------------- */ /* El logo completo de la cabecera de la web (297×44), en negro */ .container_home .formulario_home .logo_home { display: block; width: min(297px, 100%); height: auto; margin: 0 0 var(--Global-Espacio-Grupo); } /* El h2 del sistema, el mismo que el título del popup de Brevo */ .container_home .formulario_home h2 { margin: 0 0 var(--Global-Espacio-TituloContenido); color: var(--Global-Color-Black); font-family: var(--Font-Family-Primary); font-size: var(--Font-Size-45); font-weight: var(--Font-Weight-500); line-height: var(--Font-Line-height-100); letter-spacing: var(--Font-Letter-spacing-2); } /* * Todo el texto en negro, también la ayuda. Sobre un vidrio el contraste * cambia con lo que pase por detrás, y un gris no garantiza el ratio. */ .container_home .formulario_home p { margin: 0 0 calc(var(--Global-Espacio-TituloContenido) / 2); color: var(--Global-Color-Black); font-family: var(--Font-Family-Primary); font-size: var(--Font-Size-19); font-weight: var(--Font-Weight-400); line-height: normal; } /* La segunda línea del login es la ayuda: en pequeño */ .container_home .formulario_home p + p { font-size: var(--Font-Size-14); } /* El correo de coordinación de /restaurar-password/ */ .container_home .formulario_home p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- * Campos (Super Forms): pastillas translúcidas, como en el popup de Brevo * -------------------------------------------------------------------------- */ .container_home :is(#super-form-219, #super-form-281) { margin-top: var(--Global-Espacio-TituloContenido) !important; } /* Un campo debajo de otro, con aire entre ellos (el tema los pegaba en bloque) */ .container_home :is(#super-form-219, #super-form-281) .super-field:not(.super-button) { margin: 0 0 calc(var(--Global-Espacio-TituloContenido) / 2) !important; } .container_home :is(#super-form-219, #super-form-281) input.super-shortcode-field { box-sizing: border-box !important; display: block !important; width: 100% !important; height: auto !important; padding: calc(var(--Global-Espacio-TituloContenido) / 2) var(--Global-Espacio-TituloContenido) !important; border: 1px solid rgba(0, 0, 0, 0.14) !important; border-radius: var(--Global-Radio-Pastilla) !important; background: rgba(255, 255, 255, 0.78) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; color: var(--Global-Color-Black) !important; font-family: var(--Font-Family-Primary) !important; font-size: var(--Font-Size-19) !important; font-weight: var(--Font-Weight-400) !important; line-height: normal !important; letter-spacing: var(--Font-Letter-spacing-2) !important; transition: border-color 0.2s ease !important; } /* El placeholder, legible sobre el cristal (como en el popup de Brevo) */ .container_home :is(#super-form-219, #super-form-281) input.super-shortcode-field::placeholder { color: rgba(0, 0, 0, 0.4) !important; font-family: var(--Font-Family-Primary) !important; font-size: var(--Font-Size-19) !important; font-weight: var(--Font-Weight-400) !important; line-height: normal !important; opacity: 1; } /* Foco del sistema: contorno con hueco, en el rojo del CTA */ .container_home :is(#super-form-219, #super-form-281) input.super-shortcode-field:focus { border-color: var(--Global-CTA-Destacado) !important; outline: var(--Global-Foco-grosor) solid var(--Global-CTA-Destacado) !important; outline-offset: var(--Global-Foco-separacion) !important; } /* * EL EMAIL, SIEMPRE @alumnos.cei.es (Eduardo, 24/09/2026) — js/cei-acceso.js * * El campo donde se escribe el usuario es la pastilla, como los demás y a todo * el ancho; el dominio va fijo al final, en gris, encima del relleno derecho * del campo, que se reserva para él (lo que mide lo pone el JS en * --CeiEmail-dominio): el texto nunca pasa por debajo. Sin dominio (una cuenta * del equipo escrita entera, o el email completo que pone el autocompletado * del navegador) el texto usa todo el ancho. El campo de Super Forms sigue * ahí, sin tamaño ni vista (.CeiEmail-real): es el que valida y se envía. * * Antes el campo medía lo que su texto (field-sizing) y el dominio iba pegado * detrás, pero con el autocompletado de Chrome el campo no crecía y el email * se cortaba (Eduardo, 24/09/2026: «se queda cortado»). * * EXCEPCIÓN REGISTRADA: el gris del dominio, rgba(0, 0, 0, 0.6), sin token: * más oscuro que el placeholder (0,4) porque es texto de verdad, no una * pista; da 5,7:1 sobre el blanco del campo. Motivo: legibilidad sobre el * vidrio · Autor: Eduardo · 24/09/2026. */ /* Siempre a todo el ancho (Eduardo, 24/09/2026: «que siempre ocupe el 100%»): Super Forms hace del contenedor del campo una fila flex (`.super-form .super-field-wrapper`, elements.css), y ahí la caja medía lo que el input vacío (unos 20 caracteres) más el sitio del dominio; con el autocompletado, aún menos. */ .container_home :is(#super-form-219, #super-form-281) .CeiEmail { position: relative; flex: 1 1 100%; width: 100%; min-width: 0; } /* La pastilla de los otros campos (arriba), con el sitio del dominio. Con el ID delante para ganar al `#super-form-219 input` de style.css (Montserrat, verde, bordes y 30px de relleno, todo con !important). */ .container_home :is(#super-form-219, #super-form-281) input.CeiEmail-usuario { box-sizing: border-box !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: calc(var(--Global-Espacio-TituloContenido) / 2) calc(var(--Global-Espacio-TituloContenido) + var(--CeiEmail-dominio, 8em) + 8px) calc(var(--Global-Espacio-TituloContenido) / 2) var(--Global-Espacio-TituloContenido) !important; border: 1px solid rgba(0, 0, 0, 0.14) !important; border-radius: var(--Global-Radio-Pastilla) !important; background: rgba(255, 255, 255, 0.78) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; color: var(--Global-Color-Black) !important; font-family: var(--Font-Family-Primary) !important; font-size: var(--Font-Size-19) !important; font-weight: var(--Font-Weight-400) !important; line-height: normal !important; letter-spacing: var(--Font-Letter-spacing-2) !important; transition: border-color 0.2s ease !important; } .container_home :is(#super-form-219, #super-form-281) input.CeiEmail-usuario:focus { border-color: var(--Global-CTA-Destacado) !important; outline: var(--Global-Foco-grosor) solid var(--Global-CTA-Destacado) !important; outline-offset: var(--Global-Foco-separacion) !important; } .container_home :is(#super-form-219, #super-form-281) input.CeiEmail-usuario::placeholder { color: rgba(0, 0, 0, 0.4) !important; font: inherit !important; opacity: 1; } .container_home :is(#super-form-219, #super-form-281) .CeiEmail-dominio { position: absolute; top: 50%; right: var(--Global-Espacio-TituloContenido); translate: 0 -50%; color: rgba(0, 0, 0, 0.6); font-family: var(--Font-Family-Primary); font-size: var(--Font-Size-19); font-weight: var(--Font-Weight-400); line-height: normal; letter-spacing: var(--Font-Letter-spacing-2); white-space: nowrap; pointer-events: none; /* pulsar encima es pulsar en el campo */ } /* Sin dominio: con una cuenta del equipo (…@cei.es) escrita entera */ .container_home :is(#super-form-219, #super-form-281) .CeiEmail.is-completo input.CeiEmail-usuario { padding-right: var(--Global-Espacio-TituloContenido) !important; } .container_home :is(#super-form-219, #super-form-281) .CeiEmail.is-completo .CeiEmail-dominio { display: none; } /* …y mientras lo pinta el autocompletado del navegador, que trae el email entero (hasta que el alumno toca la página no avisa al JS). Reglas sueltas: si un navegador no entiende una de las dos, no tumba la otra. */ .container_home :is(#super-form-219, #super-form-281) input.CeiEmail-usuario:autofill { padding-right: var(--Global-Espacio-TituloContenido) !important; } .container_home :is(#super-form-219, #super-form-281) input.CeiEmail-usuario:-webkit-autofill { padding-right: var(--Global-Espacio-TituloContenido) !important; } .container_home :is(#super-form-219, #super-form-281) input.CeiEmail-usuario:autofill + .CeiEmail-dominio { display: none; } .container_home :is(#super-form-219, #super-form-281) input.CeiEmail-usuario:-webkit-autofill + .CeiEmail-dominio { display: none; } .container_home :is(#super-form-219, #super-form-281) input.super-shortcode-field.CeiEmail-real { position: absolute !important; width: 0 !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; } /* * EL OJO DE LA CONTRASEÑA (Eduardo, 25/09/2026) — js/cei-acceso.js * * Un botón redondo al final de la pastilla, dentro del hueco que se le deja al * campo a la derecha; el ojo en la tinta, atenuado, y entero al pasar o al * tener el foco. Con la contraseña a la vista (aria-pressed="true"), tachado. * El foco, el mismo contorno rojo que los campos. */ .container_home #super-form-219 .super-field-wrapper.has-ojo { position: relative; } .container_home #super-form-219 .super-field-wrapper.has-ojo input.super-shortcode-field { padding-right: calc(var(--Global-Espacio-TituloContenido) + 40px) !important; } .container_home #super-form-219 .CeiClave-ojo { position: absolute; top: 50%; right: calc(var(--Global-Espacio-TituloContenido) / 2); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: var(--Global-Radio-Pastilla); background: transparent; color: var(--Global-Color-Black); opacity: 0.55; cursor: pointer; translate: 0 -50%; transition: opacity 0.2s ease, background-color 0.2s ease; } .container_home #super-form-219 .CeiClave-ojo > svg { width: 22px; height: 22px; } .container_home #super-form-219 .CeiClave-ojo:hover, .container_home #super-form-219 .CeiClave-ojo:focus-visible, .container_home #super-form-219 .CeiClave-ojo.is-visible { opacity: 1; } .container_home #super-form-219 .CeiClave-ojo:hover { background-color: rgba(0, 0, 0, 0.06); } .container_home #super-form-219 .CeiClave-ojo:focus-visible { outline: var(--Global-Foco-grosor) solid var(--Global-CTA-Destacado); outline-offset: 2px; } /* La raya que lo tacha, solo con la contraseña a la vista */ .container_home #super-form-219 .CeiClave-tachado { display: none; } .container_home #super-form-219 .CeiClave-ojo.is-visible .CeiClave-tachado { display: block; } /* * Los avisos de error de Super Forms: el tema los colgaba en absoluto encima * del campo, a la derecha y en 12px negrita. Aquí, debajo del campo y en el * rojo del sistema. Se muestran y se esconden solos: no se toca `display`. */ .container_home :is(#super-form-219, #super-form-281) .super-field > .super-error-msg, .container_home :is(#super-form-219, #super-form-281) .super-field > .super-empty-error-msg { position: static !important; float: none !important; margin: calc(var(--Global-Espacio-TituloContenido) / 4) 0 0 var(--Global-Espacio-TituloContenido) !important; padding: 0 !important; color: var(--Global-CTA-Destacado) !important; font-family: var(--Font-Family-Primary) !important; font-size: var(--Font-Size-14) !important; font-weight: var(--Font-Weight-400) !important; line-height: normal !important; text-align: left !important; } /* -------------------------------------------------------------------------- * El botón: el CTA de la barra de la web, a todo el ancho * -------------------------------------------------------------------------- */ /* El

de Super Forms es flex: sin esto el botón se queda al ancho de su texto (284px frente a los 462px de los campos) */ .container_home :is(#super-form-219, #super-form-281) .super-button { flex: 0 0 100% !important; width: 100% !important; float: none !important; margin: var(--Global-Espacio-TituloContenido) 0 0 !important; } .container_home :is(#super-form-219, #super-form-281) .super-button .super-button-wrap { box-sizing: border-box !important; display: flex !important; align-items: center; justify-content: center; width: 100% !important; margin: 0 !important; padding: calc(var(--Global-Espacio-TituloContenido) / 2) var(--Global-Espacio-TituloContenido) !important; border: 1px solid var(--Global-CTA-Destacado) !important; border-radius: var(--Global-Radio-Pastilla) !important; background: transparent !important; box-shadow: none !important; cursor: pointer; transition: background-color 0.2s ease !important; } .container_home :is(#super-form-219, #super-form-281) .super-button .super-button-wrap:hover { background: var(--Global-CTA-Destacado) !important; } /* Super Forms escribe el color en línea (blanco): de ahí el !important. Y le da al texto un padding de 7px 5px que hacía el botón 14px más alto que los campos: fuera, el alto lo pone solo el botón. */ .container_home :is(#super-form-219, #super-form-281) .super-button .super-button-name { padding: 0 !important; color: var(--Global-CTA-Destacado) !important; font-family: var(--Font-Family-Primary) !important; font-size: var(--Font-Size-19) !important; font-weight: var(--Font-Weight-400) !important; line-height: normal !important; letter-spacing: var(--Font-Letter-spacing-2) !important; transition: color 0.2s ease !important; } .container_home :is(#super-form-219, #super-form-281) .super-button .super-button-wrap:hover .super-button-name { color: var(--Global-Color-White) !important; } /* La flecha del sistema (glifo ↓ de Inter girado a ↗), no el icono de Font Awesome que trae Super Forms */ .container_home :is(#super-form-219, #super-form-281) .super-button .super-button-name::after { content: "\2193\FE0E"; display: inline-block; margin-left: 4px; rotate: -135deg; scale: 0.9; } .container_home :is(#super-form-219, #super-form-281) .super-button :is(.super-before, .super-after) { display: none !important; } /* -------------------------------------------------------------------------- * EL AVISO DE SUPER FORMS: SOLO SI HAY ERROR, Y EN VIDRIO (Eduardo, 24/09/2026) * * Al enviar, Super Forms mete en el un panel blanco de 400×500 sobre un * velo gris con «Processing form data…», un icono girando y una barra; al * responder le pone .super-error (con el mensaje) o .super-success (y * redirige). Rompía la estética de la tarjeta. * * Mientras procesa no se ve (el botón ya dice «Accediendo…»). En el login * (219) solo aparece el error: el éxito redirige. En /restaurar-password/ * (281) también el éxito: es la confirmación de que se ha enviado la clave. * Las clases llevan el id del formulario: esto no alcanza a ningún otro. * -------------------------------------------------------------------------- */ .super-loading-overlay-219:not(.super-error), .super-loading-overlay-281:not(.super-error):not(.super-success) { display: none !important; } /* El velo de detrás, más ligero que el gris de Super Forms */ :is(.super-loading-overlay-219, .super-loading-overlay-281) { background-color: rgba(0, 0, 0, 0.2) !important; } /* La lámina: el mismo cristal que la tarjeta de acceso */ :is(.super-loading-overlay-219, .super-loading-overlay-281) .super-loading-wrapper { box-sizing: border-box; align-items: flex-start !important; width: min(420px, calc(100% - 2 * var(--Global-Espacio-TituloContenido))) !important; height: auto !important; padding: var(--Global-Espacio-Superior) !important; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: var(--Portal-Radio-Bloque) !important; /* Super Forms le pone 5px y su hoja va detrás */ background: var(--Global-Velo-Blanco) !important; -webkit-backdrop-filter: var(--Global-Vidrio-Blur); backdrop-filter: var(--Global-Vidrio-Blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.4), 0 24px 70px rgba(0, 0, 0, 0.22); color: var(--Global-Color-Black); font-family: var(--Font-Family-Primary); letter-spacing: var(--Font-Letter-spacing-2); text-align: left; } body.cei-has-liquidGlass :is(.super-loading-overlay-219, .super-loading-overlay-281) .super-loading-wrapper { backdrop-filter: var(--Global-Vidrio-Blur) url(#CeiLiquidGlass); } /* Sin el icono de Font Awesome (la X roja, el check): el mensaje ya lo dice */ :is(.super-loading-overlay-219, .super-loading-overlay-281) .super-loading-wrapper::after { content: none !important; display: none !important; } :is(.super-loading-overlay-219, .super-loading-overlay-281) .super-loading-text { justify-content: flex-start !important; width: 100%; } /* El mensaje, con el texto del sistema */ :is(.super-loading-overlay-219, .super-loading-overlay-281) .super-inner-text { color: var(--Global-Color-Black) !important; font-family: var(--Font-Family-Primary) !important; font-size: var(--Font-Size-19) !important; line-height: normal !important; text-align: left !important; } :is(.super-loading-overlay-219, .super-loading-overlay-281) .super-inner-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* * «Cerrar»: la pastilla del botón del formulario. Super Forms escribe «Close» * (el plugin no está traducido): se esconde su texto y se pone el nuestro. */ :is(.super-loading-overlay-219, .super-loading-overlay-281) .super-close { display: block; margin: var(--Global-Espacio-TituloContenido) 0 0 !important; padding: calc(var(--Global-Espacio-TituloContenido) / 2) var(--Global-Espacio-TituloContenido) !important; border: 1px solid var(--Global-CTA-Destacado) !important; border-radius: var(--Global-Radio-Pastilla) !important; background: transparent !important; color: var(--Global-CTA-Destacado) !important; font-family: var(--Font-Family-Primary) !important; font-size: var(--Font-Size-19) !important; line-height: normal !important; text-decoration: none !important; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } :is(.super-loading-overlay-219, .super-loading-overlay-281) .super-close > span { display: none; } :is(.super-loading-overlay-219, .super-loading-overlay-281) .super-close::after { content: "Cerrar"; } :is(.super-loading-overlay-219, .super-loading-overlay-281) .super-close:hover { background: var(--Global-CTA-Destacado) !important; color: var(--Global-Color-White) !important; } /* -------------------------------------------------------------------------- * «¿No sabes tu contraseña?»: enlace de texto, a la izquierda como todo * -------------------------------------------------------------------------- */ .container_home .formulario_home a.no_pass { display: inline-block !important; /* el tema lo pone en línea: display:block */ width: auto !important; margin: var(--Global-Espacio-TituloContenido) 0 0 !important; padding: 0 !important; color: var(--Global-Color-Black) !important; font-family: var(--Font-Family-Primary) !important; font-size: var(--Font-Size-14) !important; font-weight: var(--Font-Weight-400) !important; line-height: normal !important; text-align: left !important; text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- * EL VÍDEO DE FONDO Y LA ENTRADA (Eduardo, 24/09/2026) * -------------------------------------------------------------------------- */ /* * El vídeo de CEI (cei-2026/video.php), a pantalla completa detrás de la * lámina, que lo refracta. Entra fundiéndose sobre la foto de style.css en * cuanto arranca (.is-reproduciendo, lo pone js/cei-video.js); parado (modo * accesibilidad, menos movimiento) se queda la foto. `isolation` hace de * .container_home su propio apilamiento: el vídeo, con z-index negativo, * queda encima de la foto de fondo y debajo de la lámina. */ .container_home { position: relative; isolation: isolate; } /* Solo el vídeo, sin la foto de fondo de style.css (portada-login-escritorio y -mobile) detrás (Eduardo, 24/09/2026: «deja el vídeo pero quita la imagen de fondo»). Con el modo accesibilidad, que para el vídeo, blanco. */ .container_home { background: var(--Global-Color-White); } .Acceso-video { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; } /* Al 40 % (Eduardo, 24/09/2026): se ve que se mueve, pero la lámina y lo que hay en ella mandan */ .Acceso-video.is-reproduciendo { opacity: 0.4; } /* * La entrada: la lámina sube y aparece, y detrás de ella, uno a uno, el logo, * el título, los textos, los campos, el botón y el enlace. Nada con «reducir * movimiento» ni en el modo accesibilidad. */ @keyframes AccesoSube { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } } @media (prefers-reduced-motion: no-preference) { :root:not([data-accesible="plano"]) .container_home .formulario_home { animation: AccesoSube 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; } :root:not([data-accesible="plano"]) .container_home .formulario_home > :is(.logo_home, h2, p, a.no_pass), :root:not([data-accesible="plano"]) .container_home :is(#super-form-219, #super-form-281) :is(.super-text, .super-password, .super-button) { animation: AccesoSube 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } :root:not([data-accesible="plano"]) .container_home .formulario_home > .logo_home { animation-delay: 0.15s; } :root:not([data-accesible="plano"]) .container_home .formulario_home > h2 { animation-delay: 0.25s; } :root:not([data-accesible="plano"]) .container_home .formulario_home > p { animation-delay: 0.35s; } :root:not([data-accesible="plano"]) .container_home .formulario_home > p + p { animation-delay: 0.42s; } :root:not([data-accesible="plano"]) .container_home :is(#super-form-219, #super-form-281) .super-text { animation-delay: 0.5s; } :root:not([data-accesible="plano"]) .container_home :is(#super-form-219, #super-form-281) .super-password { animation-delay: 0.58s; } :root:not([data-accesible="plano"]) .container_home :is(#super-form-219, #super-form-281) .super-button { animation-delay: 0.66s; } :root:not([data-accesible="plano"]) .container_home .formulario_home > a.no_pass { animation-delay: 0.74s; } } /* El «cargando» de Super Forms (un icono de Font Awesome girando: sin la fuente, un cuadrado): un círculo fino, como el del sistema */ .container_home :is(#super-form-219, #super-form-281) .super-load-icon { box-sizing: border-box; width: 32px; height: 32px; margin: var(--Global-Espacio-TituloContenido) auto; border: 2px solid rgba(0, 0, 0, 0.14); border-top-color: var(--Global-Color-Black); border-radius: 50%; font-size: 0; animation: CeiGira 0.8s linear infinite; } .container_home :is(#super-form-219, #super-form-281) .super-load-icon::before { content: none; } @keyframes CeiGira { to { rotate: 360deg; } } /* -------------------------------------------------------------------------- * EL MODO ACCESIBILIDAD EN EL ACCESO (Eduardo, 24/09/2026) * * El modo de la web (cei-accesible.css) ya deja la lámina en blanco y sin * desenfoque. Aquí, lo que esta hoja pinta con transparencias propias: los * campos (blanco macizo y borde negro), los grises del dominio y la sombra. * Sin el vídeo: queda la foto de fondo, quieta. * -------------------------------------------------------------------------- */ :root[data-accesible="plano"] .container_home .formulario_home { border-color: var(--Global-Color-Black); box-shadow: none; } :root[data-accesible="plano"] .container_home :is(#super-form-219, #super-form-281) :is(input.super-shortcode-field, input.CeiEmail-usuario) { border-color: var(--Global-Color-Black) !important; background: var(--Global-Color-White) !important; box-shadow: none !important; } :root[data-accesible="plano"] .container_home :is(#super-form-219, #super-form-281) .CeiEmail-dominio { color: #4d4d4d; /* 8,5:1 sobre blanco */ } :root[data-accesible="plano"] .Acceso-video { display: none; }