.btn-login{
    background-color: #013665 !important;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    border-radius: 10px;     
}

.input-access{
    border:1px solid #013665 ;
    border-radius: 10px !important;
    padding-block: 10px;
    padding-inline: 20px !important;
    margin-block-end: 0px !important;
    width: 100%;
    outline: none !important; /* Elimina el outline predeterminado */
    box-shadow: none 
}

#login_password {
    /* 40px a la derecha para dar espacio al icono del ojo */
    padding-right: 40px !important; 
}

.page-card-body.invalid .btn-login {
    background-color: #e74c3c !important;
    color: #fff;
    border: 0px;
}

.h1-bienvenido{
    color: #013665; 
    margin-block: 0px;
    font-size: 30px;
    font-weight: 800;
}

.p_text{
    margin: 5px 0px 5px 0px;
    color: #013665;
    font-size: 12px;
}
.page-card {
    background-color: rgba(205, 205, 205, 0.7) !important;
    border:0px!important;
    width: 100%;
    max-width: 600px !important;
    margin: auto; /* Centrado adicional como medida de seguridad */
    padding-block: 40px !important;
    border-radius: 30px !important;
}

.for-login .page-card {
    width: 100%;
    max-width: 600px !important;
    margin: auto; /* Centrado adicional como medida de seguridad */
    padding-block: 40px !important;
    border-radius: 30px !important;
}

.div_bienvenido{
    padding-block: 26px !important;
}

.for-login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Esto asegura que ocupe toda la altura de la pantalla */
}

.for-forgot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px; /* ajusta según necesites */
    padding: 20px;
    min-height: auto;
}

.page-card-actions{
    margin-block-start: 10px !important;
}

.navbar-light{
    display: none !important;
}

/* Estilos para el contenedor del campo de contraseña */
.password-field {
    position: relative;
}

/* Estilos para el span que contendrá el icono */
.toggle-password {
    position: absolute;
    right: 12px !important;
    top: 50%;
    transform: translateY(18%);
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url('/assets/stracon_app/images/eye_off.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px; /* Oculta el texto "Show" */
    overflow: hidden;
    border: none;
    background-color: transparent;
    z-index: 10;
}

/* Estilo para cuando la contraseña es visible (opcional) */
.toggle-password.active {
    background-image: url('/assets/stracon_app/images/eye_on.svg'); /* Si tienes un icono diferente para mostrar contraseña */
}


.sesion-microsoft-container {
  margin: 20px 0;
}

.sesion-microsoft {
  display: flex;
  align-items: center;
  justify-content:center;
  grid-gap: 20px;
  padding: 10px 10px;
  background-color: transparent;
  border: 1px solid #013665;
  border-radius: 10px;
  color: #013665;
  font-size: 14px;
  font-weight: 350;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
}

.sesion-microsoft:hover {
  background-color: rgba(1, 54, 101, 0.05);
}

.microsoft-icon {
  width: 20px;
  height: 20px;
}

.stracon-logo{
    width: 224px !important;
}

.div-stracon-logo{
    display: flex;
    justify-content: center;
}

.forgot-password-message{
    color: #013665 !important; 
    margin-bottom: 30px !important;
    margin-top: -4px !important;
    font-size: 12px;
}

.border-divider {
    border-top: 1.2px solid #013665;
    margin-block: 20px;
}

.div-stracon-forgot{
    display: flex;
    justify-content: center;
    margin-block: 50px;
}

.navbar {
    background-color: #013665 !important;
    height: 70px !important;
}

.btn-reset.nav-link{
    color: white !important;
}

#navbar-breadcrumbs li a {
    color:white !important;
    display: none;
}

body{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Estilos icono password, ocultar el icono por default de los navegadores*/
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}




/* Estilos aplicados para la pantalla update-password */
.web-footer{
    display:none !important;
}

.page-card-head{
    display: none;
}

.div-stracon-password{
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    margin-top: 20px;
}

.reset-password-form {
    max-width: 320px;
    margin: 0 auto;
}

.password-strength-message{
    color: #013665 !important;
}

.d-lg-block{
    display: none !important;
}

.dropdown-notifications .es-icon {
  stroke: white !important;
}

#navbar-breadcrumbs a::before {
    filter: brightness(0) invert(1) !important;
}


/*Apartado para traduccion de "free" en el apartado de carga de imagenes*/
/* 1. Apuntamos al ÚLTIMO botón dentro del grupo de acciones del cropper */
.image-cropper-actions .btn-group button:last-child {
    /* "Ocultamos" el texto original haciendo la fuente tamaño 0 */
    font-size: 0 !important;
}

/* 2. Insertamos el nuevo texto "Libre" usando un pseudo-elemento */
.image-cropper-actions .btn-group button:last-child::after {
    content: "Libre";       /* El texto que quieres */
    font-size: 14px;        /* Restauramos el tamaño de letra estándar de Frappe */
    visibility: visible;
    display: block;         /* Para que ocupe el espacio */
    line-height: 1.5;       /* Ajuste de altura para que se vea centrado */
}


/*footer descripción de los reportes*/
.report-footer * {
    visibility: hidden;
}

span.comparison-message {
    display: none !important;
}