/* ═══════════════════════════════════════════════════════════════════════════ login_extra.css · 7-ago-2026 Retoques comunes a las TRES pantallas sin sesion: index.php (acceso), recuperar.php y reset.php. 🔑 Existe para que NO haya que repetir lo mismo en tres sitios. Si manana se quiere el arbol mas grande o los avisos de otro tamano, se toca AQUI y las tres cambian a la vez. 🔴 VA DESPUES de main.css en el . Varias de estas reglas empatan en especificidad con las de main.css, asi que gana la ultima en cargarse. Si se sube por encima de main.css, deja de hacer efecto. 🔴 El background-image NO esta aqui: sale de la configuracion por PHP (Config::get('login_background')) y se queda en linea en cada pagina. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. El logotipo de la empresa ──────────────────────────────────────────── main.css da por hecho que ahi va la FOTO REDONDA de un usuario: caja de 100x100 y border-radius:50%. Pero lo que se pinta es el logo (307x166, un ovalo apaisado), que salia encogido a 100px, con las esquinas recortadas en elipse y casi medio centimetro de hueco muerto debajo. Se anula la caja cuadrada y se deja el logo a su tamano natural. 🔑 Son EXACTAMENTE las dos reglas que ya tenia index.php en linea y que el usuario dio por buenas; aqui solo se comparten con las otras dos pantallas. NO tocar los valores sin volver a mirar el acceso: cambiarlos lo cambia. */ .sign-avatar{width:auto !important;height:auto !important;border-radius:0 !important;background:none !important;box-shadow:none !important;text-align:center;margin:10px auto 22px auto;} #imgtipo{max-width:160px;width:100%;height:auto;display:block;margin:0 auto;object-fit:contain;} /* ── 2. Los avisos ─────────────────────────────────────────────────────────── Cubre los 3 del acceso (clave mala / campos vacios / sesion expirada) y los de recuperar y reset, que comparten las mismas clases. Antes: letra de 1rem y esquinas de 4px de bootstrap, que desentonaban con la tarjeta (75px) y con los campos (50px). */ .sign-box .alert{font-size:.8125rem;line-height:1.4;border-radius:22px;padding:11px 34px 11px 38px;margin-bottom:16px;text-align:left;} .sign-box .alert.alert-icon .font-icon{left:15px;top:11px;font-size:.875rem;} .sign-box .alert .close{right:15px;top:8px!important;font-size:1.0625rem;} /* ── 3. El arbol del fondo, en MOVIL ───────────────────────────────────────── bg_login.jpg es 1607x926 con el arbol arrinconado arriba a la izquierda y el ~78% restante lienzo blanco vacio. · Con "cover" + "center" el movil recorta la franja CENTRAL, que es toda blanca: por eso el arbol no se veia. · Anclarlo a la izquierda-arriba no basto: a 0,86x mide unos 270px de alto y la tarjeta, que empieza a ~130px del borde, le corta el tronco. Por eso ademas se ENCOGE: a 460px de lienzo el arbol queda en ~92x90 y cabe entero en la franja libre de arriba. 🔑 PARA CAMBIARLE EL TAMANO: el numero de background-size. Mas grande = arbol mas grande (a 560px eran ~112px, y a partir de ~700px la tarjeta empieza a comerselo otra vez). 🔴 El % NO sirve aqui: se mide contra el ALTO de la pantalla, que cambia en cada telefono, y volveria a cortarse en unos si y en otros no. 🔴 Este encuadre esta hecho A LA MEDIDA de esta imagen. La figura se cambia desde Configuracion (campo "background"). Si algun dia se sube una FOTO A SANGRE (que llene el cuadro), en movil saldria pequenita en una esquina con blanco alrededor: en ese caso hay que BORRAR este bloque @media entero y dejar que mande el "cover". El escritorio no se entera de nada de esto. */ @media (max-width:767px){ .page-center{background-size:460px auto;background-position:left top;background-repeat:no-repeat;background-color:#fff;} }