/** * AZRAHEL - Área de Alumnos - tarjeta de acceso * ------------------------------------------------------------------------------------------- * Enlazado desde mu-plugins/azr-student-area-login.php::azr_student_area_login_enqueue_styles() * -- NO desde azr-ui.php (ese fichero solo cubre WooCommerce "Mi cuenta" y el escritorio de * Tutor; ver su propia cabecera). * * Autor: AMAI - swarm AZRAHEL (FORGE-FOXTROT), 2026-09-19. * Origen: BRIEF_FORGE del día + evidence/f1-diseno-consultor-20260919/INFORME-DISENO.md. * * TOKENS: los valores de tipografía/color de abajo son los medidos por FORGE-ECHO con * getComputedStyle() sobre el DOM real del sitio (INFORME-DISENO.md §c), no inventados. Se * introduce "--azr-color-text-muted" como variante en rgba() del mismo marrón oscuro de marca * (nunca el gris frío "#69727D" que el propio informe marcó como ajeno a la paleta cálida) y un * único radio de 4px para diferenciar esta pantalla de "app" del 0px de las páginas de marketing * -misma decisión que ya propuso el informe para los estados del LMS (§c, "--card-radius"). * * BANNER DE COOKIES EN MÓVIL (sección 7): medido en vivo, no supuesto. Script y salida completa * en qa/f1-fixes/foxtrot/medir-banner-cookies.py y su README: * * #cookies-eu-banner (Complianz) en viewport 390x844: * position: fixed · top: 444.84px · bottom: 844px (borde del viewport) · height: 399.16px * * El banner cubre siempre el mismo tramo inferior del viewport, haga scroll lo que haga el * usuario (es "fixed", no forma parte del flujo del documento). No se toca el plugin de cookies * (fuera de mi reparto): se da a la tarjeta un margen inferior transparente mayor que la altura * medida del banner, para que exista sitio de sobra al final del documento y el botón "Entrar a * mi aula" pueda subir, hecho scroll, por encima del banner en cualquier variación razonable de * alto de contenido (autocompletado del navegador, mensajes de error, tamaño de fuente del * sistema). */ :root { --azr-area-font-display: "Cormorant Garamond", serif; --azr-area-font-body: "Mulish", sans-serif; --azr-area-color-bg: #faf8f4; --azr-area-color-card-bg: #ffffff; --azr-area-color-text: #1a1512; --azr-area-color-text-muted: rgba(26, 21, 18, 0.62); --azr-area-color-gold: #e8ae00; --azr-area-color-gold-hover: #cf9a00; /* mismo dorado, un tono más oscuro: ningún color nuevo */ --azr-area-color-gold-text: #1a1512; --azr-area-color-link: #8a6106; /* mismo tono que "PEDIR SESIÓN" en portada, medido en INFORME-DISENO.md */ --azr-area-radius: 4px; } /* 1. Tarjeta centrada -------------------------------------------------------------------- */ .azr-student-area-login { box-sizing: border-box; max-width: 480px; margin: 48px auto 64px; padding: 40px 32px; background: var(--azr-area-color-card-bg); border-radius: var(--azr-area-radius); box-shadow: 0 12px 32px rgba(26, 21, 18, 0.1), 0 2px 8px rgba(26, 21, 18, 0.06); font-family: var(--azr-area-font-body); color: var(--azr-area-color-text); } .azr-student-area-login *, .azr-student-area-login *::before, .azr-student-area-login *::after { box-sizing: border-box; } .azr-student-area-login h2 { font-family: var(--azr-area-font-display); font-weight: 300; font-size: 34px; line-height: 1.15; margin: 0 0 12px; color: var(--azr-area-color-text); } .azr-student-area-login > p:first-of-type { margin: 0 0 28px; font-size: 17px; font-weight: 300; color: var(--azr-area-color-text-muted); } /* 2. Campos del formulario ---------------------------------------------------------------- */ .azr-student-area-login .login-username, .azr-student-area-login .login-password, .azr-student-area-login .login-remember { margin: 0 0 18px; } .azr-student-area-login label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; } .azr-student-area-login input[type="text"], .azr-student-area-login input[type="password"], .azr-student-area-login input[type="email"] { width: 100%; padding: 12px 14px; border: 1px solid rgba(26, 21, 18, 0.18); border-radius: var(--azr-area-radius); font-size: 16px; /* >=16px: evita el zoom automático de Safari/iOS al enfocar el campo */ font-family: var(--azr-area-font-body); background: var(--azr-area-color-bg); color: var(--azr-area-color-text); } .azr-student-area-login input[type="text"]:focus, .azr-student-area-login input[type="password"]:focus { outline: none; border-color: var(--azr-area-color-gold); box-shadow: 0 0 0 3px rgba(232, 174, 0, 0.25); } .azr-student-area-login__hint { margin: -12px 0 18px; font-size: 13px; color: var(--azr-area-color-text-muted); } /* 3. Enlace "¿Olvidaste tu contraseña?" (justo bajo el campo contraseña) ------------------- */ .azr-student-area-login__lostpassword { margin: -6px 0 20px; font-size: 14px; } .azr-student-area-login__lostpassword a, .azr-student-area-login__contact a { color: var(--azr-area-color-link); text-decoration: underline; } /* 4. Captcha builtin -- la imagen ya llega "limpia" desde PHP (ver azr_student_area_login_clean_captcha_image() en azr-student-area-login.php); aquí solo se cuida el encaje visual del recuadro dentro de la tarjeta. ---------------------------------- */ .azr-student-area-login .wpcaptcha-captcha-img { background: #ffffff; border: 1px solid rgba(26, 21, 18, 0.12); border-radius: 2px; padding: 2px 6px; vertical-align: middle !important; } .azr-student-area-login #wpcaptcha_captcha { width: 64px; display: inline-block; margin-left: 8px; padding: 8px 10px; } .azr-student-area-login label[for="wpcaptcha_captcha"] { display: block; font-weight: 400; margin-top: 4px; } /* 5. Botón de envío ------------------------------------------------------------------------ */ .azr-student-area-login input[type="submit"] { display: block; width: 100%; margin-top: 8px; padding: 17px 26px; background: var(--azr-area-color-gold); color: var(--azr-area-color-gold-text); border: none; border-radius: var(--azr-area-radius); text-transform: uppercase; letter-spacing: 2.3px; font-size: 11.5px; font-weight: 600; font-family: var(--azr-area-font-body); cursor: pointer; } .azr-student-area-login input[type="submit"]:hover, .azr-student-area-login input[type="submit"]:focus { background: var(--azr-area-color-gold-hover); } .azr-student-area-login .login-remember { font-size: 14px; font-weight: 400; } /* 6. Ayuda de contacto bajo el botón --------------------------------------------------------- */ .azr-student-area-login__contact { margin: 20px 0 0; font-size: 14px; color: var(--azr-area-color-text-muted); text-align: center; } /* 7. Móvil: ancho completo con márgenes de 16px + espacio de sobra para que el botón pueda subir por encima del banner de cookies fijo (ver medición en la cabecera de este fichero) -- */ @media only screen and (max-width: 600px) { .azr-student-area-login { max-width: none; margin: 24px 16px 420px; /* 420px > 399.16px medidos: margen de seguridad de ~21px */ padding: 28px 20px; } } /* 8. Botón flotante de WhatsApp — OCULTO por completo en esta pantalla (FORGE-KILO, 2026-09-19) * ------------------------------------------------------------------------------------------- * BRIEF_FORGE arreglo 5: "En las pantallas de acceso (formulario de login visible, sin sesión) * OCÚLTALO por completo: ya hay ayuda por WhatsApp dentro del formulario" * (azr-student-area-login.php ya imprime "¿Problemas para entrar? Escríbenos" con el mismo número, * dentro de .azr-student-area-login__contact -- sección 6 arriba). El reposicionamiento que ya * existía (bottom:16px, ver azr-mi-cuenta.css sección 6) seguía solapando el checkbox "Recuérdame" * en esta pantalla (evidence/f1-e2e-gen3-20260919/README.md, P2 #1, `12c-...png`): ocultar es la * regla nueva y explícita, no un ajuste de posición más. * * ":has()" selecciona el `body` SOLO cuando la tarjeta de login (".azr-student-area-login") está * realmente presente en el DOM -- que solo ocurre sin sesión, exactamente como * azr_student_area_login_content() la imprime (ver ese fichero: "is_user_logged_in()" corta la * función antes de renderizarla). No se toca el plugin (fuera de mi reparto): esto vive en el CSS, * enlazado únicamente en /area-alumnos/, nunca en el resto del sitio. * * Soporte de ":has()": Chrome/Edge 105+, Safari 15.4+, Firefox 121+ (todos los navegadores de * escritorio y móvil relevantes para este público en 2026). Sin ":has()" el selector simplemente no * aplica y el botón queda como antes (reposicionado, no oculto) -- degradación segura, nunca rompe * nada. */ body:has(.azr-student-area-login) .wab-cont { display: none !important; }