/* === PeopleHef Login – Imagen completa mitad/mitad === */
/* REQ25490_25491_FEGC_20250901 Mockup Inicio de Sesión  */

/* Fondo general */
body.pf-auth-bg {
  background: #f6f7fb; /* gris claro */
  font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #4a4a4a; /* gris texto */
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card principal: divide en 2 columnas iguales */
.pf-auth-card {
  display: flex;
  width: 100%;
  max-width: 980px;
  height: 600px;          /* altura fija (ajústala según mockup) */
  border-radius: 1rem;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 25px rgba(0,0,0,0.1);
}

/* Columna ilustración */
.pf-illustration {
  flex: 1;                          /* ocupa la mitad */
  background-size: contain;         /* asegura que se vea completa */
  background-repeat: no-repeat;     /* evita repeticiones */
  background-position: center;      /* centrada en el div */
  background-color: #ffffff;        /* fondo blanco si sobra espacio */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo PeopleHef */
.pf-logo-img {
  height: 80px;   /* similar al tamaño del texto h4 original */
  width: auto;    /* mantiene proporción */
  display: inline-block;
}

/* Columna formulario */
.pf-form-side {
  flex: 1; /* ocupa la otra mitad */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto; /* scroll si el contenido crece demasiado */
}

/* Marca */
.pf-logo {
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  border: 3px solid #5a36d6;
  color: #5a36d6;
  font-size: 18px;
}
.pf-brand {
  color: #5a36d6;
  font-weight: 800;
}

/* Inputs con icono */
.pf-input .input-group-text {
  background: #fff;
  border-right: 0;
}

/* Placeholder en negrilla */
.form-control::placeholder {
  font-weight: 700; /* negrilla */
  color: #6c757d;   /* opcional, mismo gris que text-muted */
}

.pf-input .form-control {
  box-shadow: inset;
  border-left: 0;
}
.pf-input .form-control:focus {
  box-shadow: none;
  border-color: #5a36d6;
}

/* Botón primario */
.pf-primary-btn {
  background: #5a36d6;
  border-color: #5a36d6;
  font-weight: 700;
}
.pf-primary-btn:hover,
.pf-primary-btn:focus {
  background: #4a2ec0;
  border-color: #4a2ec0;
}

/* Separador */
.pf-divider {
  height: 1px;
  /*background: #e6e7ef;*/
  background: #6c757d; /* gris oscuro Bootstrap */
}

/* Botón Google versión personalizada PeopleHef */
/* Botón Google versión PeopleHef */
.pf-google-btn {
  background: #fff;                  /* fondo blanco */
  border: 2px solid #dadce0;         /* borde gris claro más grueso */
  color: #4a2ec0;                    /* texto morado oscuro */
  font-weight: 700;                  /* negrilla */
  height: 48px;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.pf-google-btn:hover {
  background: #f9f9f9;               /* gris muy suave al pasar el mouse */
  border-color: #c6c8cad3;             /* borde un poco más oscuro en hover */
  text-decoration: none;
  color: #5a36d6;                    /* morado más vivo en hover */
}

.google-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;                   /* tamaño del ícono */
  color: #4a2ec0;                    /* ícono también morado oscuro */
}

/* Bordes redondeados grandes */
.pf-form .input-group-lg /*.form-control*/,
.pf-form .input-group-lg .input-group-text,
.pf-form .btn-lg {
  border-radius: .75rem;
}

/* Responsivo: en móvil se apilan */
@media (max-width: 991px) {
  .pf-auth-card {
    flex-direction: column;
    height: auto;
  }
  .pf-illustration, .pf-form-side {
    flex: none;
    width: 100%;
    height: auto;
  }
  .pf-illustration {
    min-height: 300px; /* altura mínima para móvil */
  }

}

/* Estilo para inputs tipo línea inferior */
.pf-input .form-control,
.pf-input .input-group-text,
.pf-input .input-group-append .btn {
  border: none;                  /* sin bordes */
  /*border-bottom: 2px solid #ccc;  línea inferior gris */
  border-bottom: 2px solid #0d0d0def; /* línea inferior gris */
  border-radius: 0;              /* sin esquinas */
  background: transparent;       /* sin fondo */
  box-shadow: none;              /* sin sombra */
}

/* Íconos y botones */
.pf-input .input-group-text,
.pf-input .input-group-append .btn {
  background: transparent;
  color: #6c757d;                /* gris Bootstrap */
  padding: 0 0.5rem;
}

/* Efecto al enfocar */
.pf-input .form-control:focus,
.pf-input .input-group-text:focus,
.pf-input .input-group-append .btn:focus {
  border-bottom: 2px solid #5a36d6; /* morado en focus */
  outline: none;
  box-shadow: none;
}

/* Estilo general para los bloques de autenticación */
.auth-links {
  font-size: 1.1rem;     /* un poco más grande (≈ 17-18px) */
  font-weight: 500;      /* semi-negrita para el texto */
  color: #4a4a4a;        /* gris legible */
}

/* Links dentro del bloque */
.auth-links a {
  font-size: 1.1rem;     /* mismo tamaño que el texto */
  font-weight: 700;      /* negrilla para resaltar */
  color: #5a36d6;        /* morado corporativo */
  text-decoration: none;
}

.auth-links a:hover {
  text-decoration: underline;
}

/* Placeholder y texto escrito con mismo tamaño */
.pf-form .form-control {
  font-size: 1rem;        /* tamaño base (16px aprox) */
  font-weight: 700;       /* negrilla para que combine con placeholder */
  color: #4a4a4a;         /* gris legible */
}

.pf-form .form-control::placeholder {
  font-size: 1rem;        /* mismo tamaño que el input */
  font-weight: 700;       /* negrilla también */
  color: #6c757d;         /* gris más claro para diferenciar */
}

/* ===== Tablets (<= 991.98px) – ya tienes lo básico, afinamos tipografías y paddings ===== */
/* ===== Tablets siga 50/50 (lado a lado) y solo apile en celular 767.98px            ===== */
@media (max-width: 767.98px) {
  body.pf-auth-bg { padding: 0 12px; }        /* respiración lateral */
  .pf-form-side { padding: 1.25rem; }
  .pf-logo-img { height: 56px; }              /* logo un poco más pequeño que desktop */
  .pf-google-btn { height: 46px; font-size: .98rem; }
  .auth-links, .auth-links a { font-size: 1rem; }
}

/* ===== Móviles (<= 575.98px) – compactar aún más ===== */
@media (max-width: 575.98px) {
  .pf-auth-card { border-radius: .75rem; }
  .pf-illustration { min-height: 220px; }     /* evita “pantalla vacía” en móviles chicos */
  .pf-form-side { padding: 1rem; }
  .pf-logo-img { height: 44px; }
  .pf-google-btn { height: 44px; font-size: .95rem; }
  .pf-input .input-group-text { padding: 0 .4rem; }
  .pf-form .btn-lg { padding: .6rem 1rem; font-size: 1rem; }
}

/* ===== Pantallas anchas (>= 1200px) – un poco más de aire en desktop grande ===== */
@media (min-width: 1200px) {
  .pf-auth-card { max-width: 1100px; height: 640px; }
  .pf-logo-img { height: 90px; }
  .auth-links, .auth-links a { font-size: 1.15rem; }
}

html { scrollbar-gutter: stable; }   /* evita “saltos” por scroll */
body { overflow-y: scroll; }

.flash-toast-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  width: min(92%, 520px);
  pointer-events: none;
}
.flash-toast {
  pointer-events: auto;
  /* box-shadow: 0 6px 20px rgba(0,0,0,.12); */
  /* border-radius: .75rem; */
  border-radius: 1rem !important;       /* esquinas más redondeadas */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.815) !important; /* sombra más notoria */
  font-weight: 500;                     /* un poco más fuerte el texto */
}