/* path: css/main.css */ @import url('https://fonts.googleapis.com/css?family=Poppins'); @import url('https://fonts.googleapis.com/css?family=Raleway:400,700'); /* Añadido desde index.php */ /* BASIC */ html { /* background-color: #56baed; /* Considera si este fondo aplica a todas las páginas o solo al login */ background-color: #f6f6f6; /* Un fondo más neutro podría ser mejor para el form principal */ } body { font-family: "Poppins", sans-serif; height: 100vh; margin: 0; /* Asegura que no haya margen por defecto */ /* background-color: #56baed; /* Mover aquí si el fondo azul es para todo el body */ } a { color: #92badd; display: inline-block; text-decoration: none; font-weight: 400; } h2 { text-align: center; font-size: 16px; font-weight: 600; text-transform: uppercase; display: inline-block; margin: 40px 8px 10px 8px; color: #cccccc; } label { /* Estilo básico para labels añadido para consistencia */ display: block; margin-bottom: 5px; font-weight: bold; color: #333; /* Un color más oscuro para mejor legibilidad */ text-align: left; /* Alinear etiquetas a la izquierda es común en formularios */ margin-left: 35px; /* Ajustar margen para alinear con inputs */ margin-right: 35px; } /* STRUCTURE */ .wrapper { display: flex; align-items: center; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; padding: 20px; box-sizing: border-box; /* Añadido para incluir padding en el cálculo del tamaño */ } #formContent { -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; background: #fff; padding: 30px; width: 90%; max-width: 600px; /* Aumentado un poco el ancho máximo para el formulario más largo */ position: relative; /* padding: 0px; /* Comentado - El padding de 30px parece útil */ -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3); box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3); text-align: center; /* Centra elementos inline como el logo, pero no los block como label/input */ } #formFooter { background-color: #f6f6f6; border-top: 1px solid #dce8f1; padding: 25px; text-align: center; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; } /* TABS (Usado en Login, mantener por si acaso) */ h2.inactive { color: #cccccc; } h2.active { color: #0d0d0d; border-bottom: 2px solid #5fbae9; } /* FORM TYPOGRAPHY & ELEMENTS */ /* Inputs de texto, email, password, etc. */ input[type=text], input[type=password], input[type=email], /* Añadido para consistencia */ textarea /* Añadido para notas adicionales */ { background-color: #f6f6f6; border: 1px solid #ccc; /* Borde más visible por defecto */ color: #0d0d0d; padding: 10px 15px; /* Ajustado padding */ text-align: left; /* Texto alineado a la izquierda es más estándar */ text-decoration: none; display: block; /* Cambiado a block para ocupar ancho completo */ font-size: 16px; margin: 5px auto 15px auto; /* Centrado horizontal, margen inferior */ width: calc(100% - 70px); /* Ajustado para padding y posible borde */ max-width: 400px; /* Ancho máximo para inputs */ box-sizing: border-box; /* Incluir padding y borde en el width */ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } textarea { height: 100px; /* Altura inicial para textarea */ resize: vertical; /* Permitir redimensionar verticalmente */ } input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus { background-color: #fff; border-color: #5fbae9; /* Cambiar color de borde en focus */ box-shadow: 0 0 5px rgba(95,186,233,0.5); /* Añadir un ligero brillo en focus */ outline: none; /* Quitar outline por defecto */ } input::placeholder, /* Estilos para placeholder */ textarea::placeholder { color: #aaa; /* Color más visible para placeholder */ opacity: 1; /* Firefox necesita esto */ } /* Botones (Submit, Reset, Button) */ input[type=button], input[type=submit], input[type=reset], button { background-color: #56baed; border: none; color: white; padding: 15px 30px; /* Padding ajustado */ text-align: center; text-decoration: none; display: inline-block; /* Para que no ocupen todo el ancho */ text-transform: uppercase; font-size: 13px; font-weight: 600; /* Añadido para mejor visibilidad */ -webkit-box-shadow: 0 5px 15px 0 rgba(95,186,233,0.4); box-shadow: 0 5px 15px 0 rgba(95,186,233,0.4); -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; margin: 10px 5px; /* Margen ajustado */ cursor: pointer; /* Cursor de mano en botones */ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover { background-color: #39ace7; box-shadow: 0 8px 20px 0 rgba(95,186,233,0.5); /* Sombra más pronunciada en hover */ } input[type=button]:active, input[type=submit]:active, input[type=reset]:active, button:active { -moz-transform: scale(0.98); -webkit-transform: scale(0.98); -o-transform: scale(0.98); -ms-transform: scale(0.98); transform: scale(0.98); /* Efecto de presión ligero */ } /* Select Dropdowns */ .select-css { display: block; /* Ocupar ancho completo */ font-size: 16px; font-family: "Poppins", sans-serif; /* Usar la misma fuente */ font-weight: 400; color: #0d0d0d; line-height: 1.3; padding: 10px 15px; width: calc(100% - 70px); /* Ancho consistente con inputs */ max-width: 400px; /* Ancho máximo consistente */ box-sizing: border-box; margin: 5px auto 15px auto; /* Centrado horizontal, margen inferior */ border: 1px solid #ccc; border-radius: 5px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #f6f6f6; /* Icono de flecha usando SVG inline para mejor control */ background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 15px top 50%; /* Posición de la flecha */ background-size: .65em auto; /* Tamaño de la flecha */ transition: border-color 0.3s ease-in-out; /* Transición suave */ } .select-css::-ms-expand { /* Ocultar flecha por defecto en IE */ display: none; } .select-css:hover { border-color: #888; } .select-css:focus { border-color: #5fbae9; /* Mismo color que inputs */ box-shadow: 0 0 5px rgba(95,186,233,0.5); /* Mismo brillo que inputs */ outline: none; } /* ------- ESTILOS MOVIDOS DESDE index.php