@charset "utf-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
	font-family: 'Noto Sans', sans-serif;
}
.classheaderlogin{
	height:10vh;
}
.container-login{
	width:250px;
	background:#E9E9E9;
	border-radius:6px;
	padding:2%;
	margin:auto;
	display:flex;
	flex-direction:column;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.75);
}
.titulo{
	text-align:center;
	margin-bottom:5%;
	font-size:14px;
	font-weight:bold;
}
.button{
	text-align:center;
	margin-top:20px;
    margin-bottom: 10%;
}

.button button {
    /* Reset default button styles */
    border: none;
    font-family: 'Poppins', sans-serif; /* Ensure font consistency */

    /* Core styles */
    background-color: #2a93a5; /* User-specified color */
    color: #ffffff; /* White text for contrast */
    font-size: 16px; /* Slightly larger font */
    font-weight: 500; /* Medium weight, not too bold */
    padding: 12px 24px; /* Generous padding */
    border-radius: 8px; /* Softer, modern corners */
    width: 100%; /* Make the button full-width within its container */
    cursor: pointer;

    /* Depth and interaction */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

/* Hover effect */
.button button:hover {
    background-color: #248191; /* A slightly darker shade for hover */
    transform: translateY(-1px); /* Subtle lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Active/click effect */
.button button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.logo{
	background-image: url(../images/logoOrganicalCRM.png);
    width: 100%;
    height: 150px;
	background-repeat:no-repeat;
	background-position:center;
	background-size: contain;
}
.form{
	display:flex !important;
	flex-direction:column;
}
.error{
    /* Estilos para el mensaje de error */
    background-color: #fef2f2; /* Un rojo muy suave */
    color: #b91c1c;           /* Rojo oscuro para el texto */
    border: 1px solid #fecaca; /* Borde rojo suave */
    padding: 12px;             /* Espacio alrededor del texto */
    border-radius: 6px;        /* Bordes ligeramente redondeados */
    margin-bottom: 15px;       /* Espacio debajo del mensaje */
    text-align: left;          /* Alineación del texto a la izquierda */
    font-size: 0.875rem;       /* Tamaño de fuente un poco más pequeño */
    line-height: 1.4;          /* Espaciado entre líneas para mejor legibilidad */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Sutil sombra */
}

.error strong {
    font-weight: 600;         /* Texto en negrita para el título */
}

.error a {
    color: #721c24;           /* Color del enlace */
    text-decoration: underline; /* Subrayado para indicar que es un enlace */
}

.error a:hover {
    color: #491217;           /* Color del enlace al pasar el mouse */
}
.label-form {
    display: block;                 /* Asegura que la etiqueta ocupe todo el ancho */
    margin-bottom: 0.5rem;          /* Espacio debajo de la etiqueta */
    font-weight: 500;                /* Peso de fuente semi-negrita */
    color: #374151;                /* Color de texto gris oscuro */
    font-size: 0.875rem;             /* Tamaño de fuente ligeramente más pequeño */
    letter-spacing: -0.01em;         /* Espaciado entre letras ligeramente ajustado */
}
.error{
	width:98%;
	padding:1%;
	background:#FF0000;
	border-radius:3px;
	color:#fff;
	margin-bottom:1%;
    margin-top: 5%;
    text-align: center;
	animation: aparecer 1s ease-out 1; /*Definimos un nombre para la animación (“aparecer”), un tiempo total de 4segundos de duración y un movimiento suavizado al final*/
	-webkit-animation: aparecer 1s ease-out 1;/*Chrome, Safari, Android, iOs*/
	-moz-animation: aparecer 1s ease-out 1; /*Firefox*/
	-o-animation: aparecer 1s ease-out 1; /*Opera*/
	-ms-animation: aparecer 1s ease-out 1; /*Internet Explorer*/
}
input[type="text"],
input[type="password"] {
    display: block;                 /* Asegura que el input ocupe todo el ancho */
    width: 90%;
    padding: 0.75rem 1rem;           /* Espaciado interno */
    font-size: 1rem;                 /* Tamaño de fuente */
    line-height: 1.5;                /* Espaciado entre líneas */
    color: #4b5563;                /* Color de texto gris */
    background-color: #fff;          /* Fondo blanco */
    border: 1px solid #d1d5db;       /* Borde gris claro */
    border-radius: 0.375rem;          /* Bordes ligeramente redondeados */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Transiciones suaves */
}

/* Estilo al enfocar el input */
input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;                    /* Elimina el contorno predeterminado */
}
.error strong{
	font-size:1.1em;
}
	@keyframes aparecer { /*Añadir los correspondientes prefijos a los diferentes navegadores*/
		from {opacity: 0;}
		50% {opacity: 0.2;}
		to {opacity: 1;}
	}

.olvido{
	text-align: center;
    text-decoration: none;
    font-size: 12px;
	margin-bottom:2%;
}


/* Estilos para el footer en la página de login */
.container-login {
	margin-bottom: 50px; /* Espacio para el footer */
}

body:has(.container-login) .crm-footer {
	position: relative;
	margin-top: 20px;
}
/* Estilos para el footer específico del login */
.login-footer {
    height: 5vh;
    position: relative; /* Anula el 'position: fixed' del CSS general */
    margin-top: 20px;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
}

.login-footer .footer-content {
    justify-content: center; /* Centra los elementos internos */
    gap: 30px; /* Añade un espacio entre los textos */
}

.login-footer .footer-left, .login-footer .footer-right { flex: initial; text-align: center; }

@media (max-width:768px){
	.container-login{
		width:80%;
	}
}