/* ------------------------------------------------
   Reset de márgenes y altura completa
   ------------------------------------------------ */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------
   Layout principal: 60% panel | 40% form
   ------------------------------------------------ */
main.d-flex {
  display: flex;
  height: 100vh;
}

.bg-panel {
  position: relative;
  flex: 0 0 60%;
  max-width: 60%;
  overflow: hidden;
}

.form-panel {
  flex: 0 0 40%;
  max-width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* gradient de fondo en la parte del form */
  background: linear-gradient(135deg, #ffffff 0%, #dae8fc 100%);
}

/* ------------------------------------------------
   Panel izquierdo: imagen de fondo + blur + overlay
   ------------------------------------------------ */
.bg-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/institucion_bg.jpg') center/cover no-repeat;
  filter: blur(25px);
  transform: scale(1.1);
  z-index: 0;
}
.bg-panel::after {
  /* si quieres oscurecer un poco el fondo detrás del blur */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(56, 87, 118, 0.2);
  z-index: 1;
}
.panel-content {
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------
   Logos
   ------------------------------------------------ */
.panel-logo {
  max-width: 600px;
  width: 100%;
}
.login-logo {
  max-height: 60px;
}

/* ------------------------------------------------
   Card del formulario
   ------------------------------------------------ */
.form-card {
  width: 100%;
  max-width: 360px;
}

/* ------------------------------------------------
   Labels con buen contraste
   ------------------------------------------------ */
.label-contrast {
  color: #495057 !important;
}

/* ------------------------------------------------
   Inputs solo línea inferior + transición
   ------------------------------------------------ */
.line-input {
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.75rem 0;
  transition: border-color 0.2s;
  background-color: transparent !important;
}
.line-input:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: #385776;
}

/* ------------------------------------------------
   Botón con color corporativo #385776
   ------------------------------------------------ */
.btn-primary {
  background-color: #385776 !important;
  border-color: #385776 !important;
  padding: 0.75rem 1rem;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #304f67 !important;
  border-color: #304f67 !important;
}

.footer-text {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: #6c757d;      /* gris suave */
  text-align: center;
}

/* ------------------------------------------------
   Responsivo: ocultar panel <992px
   ------------------------------------------------ */
@media (max-width: 991px) {
  .bg-panel {
    display: none !important;
  }
  .form-panel {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ===== Ajuste fino: logos + mano exactamente centrada ===== */
.collab-anim{
  --gap: clamp(140px, 16vh, 200px);   /* separación final IRW↕AUTOMATÍZATE */
  --scale-start: .3;
  --hand-offset: 50px;                 /* ← corrige “aire” del PNG (positivo baja, negativo sube) */
  position: relative;
  width: min(92%, 900px);
  height: 500px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* Base */
.collab-anim .logo{
  position: absolute;
  left: 40%;
  top: 20%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  height: auto;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));
  pointer-events: none;
}

/* Tamaños */
.logo-auto { max-width: 620px; animation: dropFromCenter 1.15s ease forwards; animation-delay: .04s; }

/* Mano: centrada pixel-perfect con offset configurable */
.logo-hand{
  max-width: 80px;                 /* ← más pequeña */
  opacity: 0;
  z-index: 3;
  animation: handFade 1.15s ease .28s forwards;
  /* Centrado con nudge vertical por si el PNG trae margen */
  transform: translate(-50%, calc(-50% + var(--hand-offset))) scale(1);
}

/* Keyframes (no mueven la mano horizontal/vertical, solo alfa/escala) */
@keyframes riseFromCenter{
  0%   { transform: translate(-50%, -50%) scale(var(--scale-start)); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - var(--gap))) scale(1); opacity: 1; }
}
@keyframes dropFromCenter{
  0%   { transform: translate(-50%, -50%) scale(var(--scale-start)); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate(-50%, calc(-50% + var(--gap))) scale(1); opacity: 1; }
}
@keyframes handFade{
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + var(--hand-offset))) scale(.5); }
  60%  { opacity: 1; transform: translate(-50%, calc(-50% + var(--hand-offset))) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, calc(-50% + var(--hand-offset))) scale(1); }
}

/* Responsivo */
@media (max-width: 991px) {
  .collab-anim { height: 380px; }
  .logo-irw  { max-width: 320px; }
  .logo-auto { max-width: 380px; }
  .logo-hand { max-width: 110px; }
}