Nube / Claude terminó la respuesta Ejecutó un comando Ejecutó un comando Confirmado, y tu sospecha es correcta: $ruta está definida en la línea 6 y no se usa ni una sola vez. La única que se usa es $ruta2 (11 veces), y apunta a librerias_login/, o sea local. login.php no incluye ningún otro archivo, así que no hay forma de que alguien más la lea. Es código muerto — seguramente de cuando las librerías venían de ese servidor en Colombia, como dices. Se ejecutaron 2 comandos, usó una herramienta Se ejecutaron 2 comandos, usó una herramienta Comando ejecutado Comando ejecutado Archivo(s) presentado(s) Listo Dos cambios, ambos en las primeras líneas: php // $ruta ya no se usa en ningun lado de este archivo (solo se usa $ruta2, // que apunta a la carpeta local). Quedaba de cuando las librerias se bajaban // del servidor de Colombia. Se deja comentada por si acaso. // $ruta="http://190.96.76.128:10443/"; La comenté en vez de borrarla, por si algún día resulta que sí hacía falta. Descomentar es más fácil que acordarse de qué decía. Y el tipo de documento: php ?>El lang="es" viene de regalo: le dice al navegador y a los lectores de pantalla que el contenido está en español. Verificado corriéndolo: document.compatMode ahora es CSS1Compat, el fondo centrado, el captcha genera, y php -l sin errores. Y de paso aparecieron dos cositas gratis, por si quieres barrerlas otro día: Tu main.css original declara una fuente que no existe: css @font-face { font-family: OpenSans-Regular; src: url('../fontsBootstrapt/OpenSans/OpenSans-Regular.ttf'); } Esa carpeta fontsBootstrapt no está en tu proyecto — fíjate que además tiene una "t" de más al final, parece un error de tipeo viejo. Da 404 en cada carga. No se nota porque ya usamos Roboto en todo, pero es una petición perdida cada vez que alguien entra. Y la fuente Roboto se baja de fonts.googleapis.com. Si el servidor donde corre esto llega a quedarse sin internet, la tipografía cae al sistema y el login se ve distinto. Si eso te preocupa, se descarga Roboto y se sirve localmente. Ninguna de las dos es urgente. Con esto yo lo doy por cerrado — quedó bien. Login Código · PHP Imagen cargada Mira empezo a verse asi cuando entra el enfoque se pone asi! se hace esa animacíon que pense que la habías desacivado y se colorea de azuil pero se ve mal porque ahora los botones son mas redondeados Encontrado, y es un choque entre dos indicadores de foco. Tu main.css original trae unos que dibujan una línea azul de 1px animada recorriendo los cuatro bordes del campo. Están posicionados en absoluto y no tienen border-radius — dibujan un rectángulo de esquinas rectas. Con el radio anterior de 5px casi no se notaba; con los 9px de ahora, el cuadrado sobresale por las esquinas. Y además está peleando con el foco que agregué yo (borde azul marino+halo suave). Son dos animaciones distintas, de dos azules distintos, sobre el mismo campo. Ejecutó un comando, archivo leído, usó una herramienta Ejecutó un comando, archivo leído, usó una herramienta Ahora el foco es uno solo: el borde se tiñe de azul marino siguiendo el redondeo del campo, con un halo suave alrededor. Sin líneas rectas asomando por las esquinas. Si prefieres editarlo a mano, en main_nuevo.css busca la sección [ Focus Input] y agrega esto al inicio: css .focus-input100-1, .focus-input100-2 { display: none !important; } Los pueden quedarse en el login.php, no hace falta borrarlos. Simplemente dejan de dibujar. Y una aclaración sobre lo que dijiste: no era que yo hubiera desactivado esa animación — nunca la toqué. Lo que pasó es que al redondear más los campos, un defecto que ya existía se volvió visible. Con 5px de radio el rectángulo recto casi calzaba; con 9px ya no. Es el mismo patrón que veníamos viendo todo el día: casi nada estaba roto por los cambios, sino que los cambios destaparon cosas que ya estaban ahí y nadie notaba. Main nuevo Código · CSS Claude es IA y puede cometer errores. Verifica las respuestas. Danos tu opinión Main nuevo · CSS /*////////////////////////////////////////////////////////////////// [ FONT ]*/ @font-face { font-family: OpenSans-Regular; src: url('../fontsBootstrapt/OpenSans/OpenSans-Regular.ttf'); } img.tamanoLogo { /* //width: 100%; // height: auto;*/ } /*////////////////////////////////////////////////////////////////// [ RESTYLE TAG ]*/ * { margin: 0px; padding: 0px; box-sizing: border-box; } html { /* background-image: url('HermancitoD.jpg'); */ background-image: url('HermancitoD.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: #1b2b4d; /* mientras carga la foto */ height: 100%; } body { min-height: 100%; font-family: OpenSans-Regular, sans-serif; } /*---------------------------------------------*/ a { font-family: OpenSans-Regular; font-size: 14px; line-height: 1.7; color: #666666; margin: 0px; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } a:focus { outline: none !important; } a:hover { text-decoration: none; } /*---------------------------------------------*/ h1, h2, h3, h4, h5, h6 { margin: 0px; } p { font-family: OpenSans-Regular; font-size: 14px; line-height: 1.7; color: #666666; margin: 0px; } ul, li { margin: 0px; list-style-type: none; } /*---------------------------------------------*/ input { outline: none; border: none; } textarea { outline: none; border: none; } textarea:focus, input:focus { border-color: transparent !important; } input::-webkit-input-placeholder { color: #666666; } input:-moz-placeholder { color: #666666; } input::-moz-placeholder { color: #666666; } input:-ms-input-placeholder { color: #666666; } textarea::-webkit-input-placeholder { color: #666666; } textarea:-moz-placeholder { color: #666666; } textarea::-moz-placeholder { color: #666666; } textarea:-ms-input-placeholder { color: #666666; } /*---------------------------------------------*/ button { outline: none !important; border: none; background: transparent; } button:hover { cursor: pointer; } iframe { border: none !important; } /*////////////////////////////////////////////////////////////////// [ Utility ]*/ .txt1 { font-family: Roboto, Bahnschrift, sans-serif; font-size: 14px; line-height: 1.4; color: #000000; } .txt2 { font-family: Roboto, Bahnschrift, sans-serif; font-size: 16px; line-height: 1.4; color: #0e67ad; } .hov1:hover { text-decoration: underline; } /*////////////////////////////////////////////////////////////////// [ login ]*/ .limiter { width: 100%; min-height: 100%; margin: 0 auto; /*background: #c1c3cc;*/ } .container-login100 { width: 100%; min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 15px; /*background: linear-gradient(#027FFB, #87EBFF);*/ } .wrap-login100 { width: 450px; max-width: 100%; min-height: 600px; height: auto; background: #fff; border-radius: 20px; border-color: #f20000; overflow: hidden; /* Dos sombras: la corta da el contacto, la larga da la altura. Tinte azul muy oscuro y alta opacidad porque el fondo es una foto azul con textura: con menos contraste la sombra no se percibe. */ box-shadow: 0 30px 80px rgba(0, 5, 18, 0.70), 0 6px 16px rgba(0, 5, 18, 0.38); } /*================================================================== [ Form ]*/ .login100-form { width: 100%; } .login100-form-imagen { /* Mismo PNG de siempre. 203px = exactamente el tamano que ya tenia (70% de los 290px de contenido de la tarjeta de 400px). Se centra por text-align del contenedor .shine, no por margin-left:13%, que lo dejaba 11px corrido a la izquierda. */ width: 203px; } .login100-form-title { display: block; font-family: Bahnschrift; font-size: 30px; color: #000000; line-height: 2; text-align: center; } /*------------------------------------------------------------------ [ Usuario y contrase�a invalido ]*/ .input200 { display: block; width: 100%; background: transparent; font-family: Bahnschrift; font-size: 18px; color: #666666; line-height: 1.2; } /*---------------------------------------------*/ /*------------------------------------------------------------------ [ Input ]*/ .wrap-input100 { width: 100%; position: relative; background-color: #fff; border: 2px solid #e2e6ea; border-radius: 9px; margin-top: 10px; transition: border-color 0.18s, box-shadow 0.18s; } /* .rs1 ya no quita el borde superior: los dos campos son cajas independientes */ .wrap-input100.rs1 { border-top: 2px solid #e2e6ea; } /* foco visible, con el azul del propio logo */ .wrap-input100:focus-within { border-color: #0b2e7a; box-shadow: 0 0 0 3px rgba(11, 46, 122, 0.10); } .input100 { display: block; width: 100%; background: transparent; font-family: Roboto, Bahnschrift, sans-serif; font-size: 18px; color: #000000; line-height: 1.2; } /*---------------------------------------------*/ input.input100 { height: 68px; padding: 0 22px 0 22px; text-align: left; } /*------------------------------------------------------------------ [ Focus Input ] Los spans .focus-input100-1 y -2 dibujaban una linea azul animada por los cuatro bordes del campo. Estan posicionados en absoluto y sin border-radius, asi que trazan un rectangulo de esquinas rectas que sobresale del campo redondeado. Ademas duplican el indicador de foco: .wrap-input100:focus-within ya colorea el borde y agrega el halo. Se apagan aca; los pueden quedarse en el HTML sin problema. */ .focus-input100-1, .focus-input100-2 { display: none !important; } .focus-input100-1__apagado, .focus-input100-2__apagado { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .focus-input100-1::before, .focus-input100-2::before { content: ""; display: block; position: absolute; width: 0; height: 1px; background-color: #4272d7; } .focus-input100-1::before { top: -1px; left: 0; } .focus-input100-2::before { bottom: -1px; right: 0; } .focus-input100-1::after, .focus-input100-2::after { content: ""; display: block; position: absolute; width: 1px; height: 0; background-color: #4272d7; } .focus-input100-1::after { top: 0; right: -1px; } .focus-input100-2::after { bottom: 0; left: -1px; } .input100:focus+.focus-input100-1::before { -webkit-animation: full-w 0.2s linear 0s; animation: full-w 0.2s linear 0s; animation-fill-mode: both; -webkit-animation-fill-mode: both; } .input100:focus+.focus-input100-1::after { -webkit-animation: full-h 0.1s linear 0.2s; animation: full-h 0.1s linear 0.2s; animation-fill-mode: both; -webkit-animation-fill-mode: both; } .input100:focus+.focus-input100-1+.focus-input100-2::before { -webkit-animation: full-w 0.2s linear 0.3s; animation: full-w 0.2s linear 0.3s; animation-fill-mode: both; -webkit-animation-fill-mode: both; } .input100:focus+.focus-input100-1+.focus-input100-2::after { -webkit-animation: full-h 0.1s linear 0.5s; animation: full-h 0.1s linear 0.5s; animation-fill-mode: both; -webkit-animation-fill-mode: both; } @keyframes full-w { to { width: calc(100% + 1px); } } @keyframes full-h { to { height: calc(100% + 1px); } } /*------------------------------------------------------------------ [ Button ]*/ .container-login100-form-btn { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .login100-form-btn { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; padding: 0 20px; width: 100%; height: 60px; background-color: #00B2E3; border-radius: 9px; letter-spacing: 0.06em; font-family: Roboto, Bahnschrift, sans-serif; font-size: 20px; color: #fff; line-height: 1.2; text-transform: uppercase; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .login100-form-btn:hover { background-color: #0095C0; } /*------------------------------------------------------------------ [ Alert validate ]*/ .validate-input { position: relative; } .alert-validate::before { content: attr(data-validate); position: absolute; max-width: 70%; background-color: #fff; border: 1px solid #c80000; border-radius: 2px; padding: 4px 25px 4px 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 12px; pointer-events: none; font-family: OpenSans-Regular; color: #c80000; font-size: 13px; line-height: 1.4; text-align: left; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s; } .alert-validate::after { content: "\f12a"; font-family: FontAwesome; display: block; position: absolute; color: #c80000; font-size: 16px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 18px; } .alert-validate:hover:before { visibility: visible; opacity: 1; } @media (max-width: 992px) { .alert-validate::before { visibility: visible; opacity: 1; } } /*================================================================== [ Pantallas angostas — celulares ] Solo ajusta margenes y alturas. No cambia colores ni el logo. */ @media (max-width: 520px) { .container-login100 { padding: 20px 12px; align-items: flex-start; } .wrap-login100 { width: 100%; min-height: 0; border-radius: 16px; padding-left: 22px !important; padding-right: 22px !important; padding-top: 34px !important; padding-bottom: 26px !important; } .login100-form-imagen { width: 165px; } input.input100 { height: 58px; padding: 0 16px 0 16px; } #captcha-contenedor { height: 54px; padding: 0 10px 0 12px !important; gap: 8px !important; } .login100-form-btn { height: 54px; font-size: 18px; } } @media (max-height: 720px) { .container-login100 { align-items: flex-start; } }