/*** "Xenos" Login theme for WebERP Adapted for SistemaCiesac ***/

body {
	background-attachment: fixed;
	background-color: #1A1A2E; 
	background-image: url("images/background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	color: #E5E5E5;
    font: 14px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif";
    text-align: center;
    margin: 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

#container {
    background: #FFFFFF;
    border: thin solid #002B5B;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    width: 90%; /* Hacer que ocupe casi toda la pantalla en móviles */
    max-width: 400px; /* Limitar el ancho máximo */
    z-index: 1000;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 1px 1px 2px #007ACC;
	-webkit-box-shadow: 1px 1px 2px #007ACC;
	box-shadow: 1px 1px 2px #007ACC;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#007ACC')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#007ACC');
}

#login_logo {
    background: url("../../calculus/images/logo-sistemaciesac.png") no-repeat center center;
    background-size: contain;
    border: medium outset #FF6700;
    border-radius: 19px;
    height: 180px;
    margin: 5% auto;
    padding: 10px;
    width: 80%; /* Ajustar el ancho en móviles */
    max-width: 300px; /* Limitar el ancho máximo */
}

form {
    width: 100%;
    max-width: 240px; /* Mantener el tamaño en pantallas más grandes */
    margin: auto;
    text-align: left;
}

form span {
    font-weight: bold;
    font-size: 16px;
    color: #002B5B;
}

input[type='text'], input[type='password'] {
    width: 100%;
    font-size: 16px;
    border: thin solid #007ACC;
    padding: 8px;
    margin-top: 4px;
    margin-bottom: 16px;
    border-radius: 4px;
}

input[type='text']:focus, input[type='password']:focus {
    outline: none;
    border-color: #FF6700;
    box-shadow: 0px 0px 5px #FF6700;
}

input.button {
    background-color: #FF6700;
    border: thin outset #002B5B;
    padding: 8px 32px;
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    width: 100%; /* Botón toma el ancho completo en pantallas móviles */
    border-radius: 4px;
    box-shadow: 1px 1px 1px #FF7F3F inset;
}

input.button:hover {
    cursor: pointer;
    background-color: #FF7F3F;
}

/* Media queries para mejorar la respuesta en móviles */
@media (max-width: 600px) {
    #container {
        width: 95%;
        margin-top: 20px;
    }

    #login_logo {
        height: 120px;
        max-width: 240px;
    }

    input.button {
        padding: 10px 20px;
        font-size: 14px;
    }
}