/* ============================
   ✅ ESTILOS GENERALES
============================ */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.login-page {
  background: url("/imagenes/fondologin2.jpg") no-repeat center center fixed;
  background-size: cover;
  animation: fadeInBackground 2s ease-in-out;
}



/* ============================
   ✅ LAYOUT DE DOS COLUMNAS
============================ */
.split-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% - 50% */
  width: 100%;
  height: 100vh; /* ocupa toda la pantalla */
}

/* ============================
   ✅ COLUMNA IZQUIERDA: FORMULARIO
============================ */
.left-panel {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ✅ Tarjeta del login */
.user_card {
  width: 350px;
  background: rgba(240, 238, 238, 0.95);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2),
              0 6px 20px rgba(0,0,0,0.19);
  position: relative;
  animation: slideUp 1s ease-out;
}

/* ✅ Logo hexagonal */
.brand_logo_container {
  position: absolute;
  height: 170px;
  width: 170px;
  top: -120px;
  padding: 10px; 
  text-align: center;
  clip-path: polygon(
    25% 6%, 75% 6%,
    100% 50%,
    75% 94%, 25% 94%,
    0% 50%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
}

.brand_logo {
  height: 130px;
  width: auto;
  object-fit: contain;
  border: 2px solid white;
  clip-path: polygon(
    25% 6%, 75% 6%,
    100% 50%,
    75% 94%, 25% 94%,
    0% 50%
  );
  transform: rotate(-90deg);
}

/* ============================
   ✅ COLUMNA DERECHA: TEXTOS
============================ */
.right-panel {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra verticalmente */
  align-items: center;     /* Centra horizontalmente */
  padding: 2rem;
}

/* ✅ Texto TECNO */
.TextImagen {
  font-size: 18rem;
  font-weight: bold;
  letter-spacing: -14px;
  background-image: url("../imagenes/fondologin3.jpg");
  background-size: cover;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

/* ✅ Texto SISTEMAS */
.TextImagen1 {
  font-size: 12rem;
  font-weight: bold;
  letter-spacing: 1.5px;
  background-image: url("../imagenes/fondologin3.jpg");
  background-size: cover;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin: 0;
  margin-top: 20px;
}

/* ============================
   ✅ BOTÓN LOGIN
============================ */
.login_btn {
  width: 100%;
  background: #004aad !important;
  color: white !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login_btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

.login_btn:focus {
  box-shadow: none !important;
  outline: 0px !important;
}

/* ✅ Inputs */
.input-group-text {
  background: #004aad !important;
  color: white !important;
  border: 0 !important;
  border-radius: 0.25rem 0 0 0.25rem !important;
}

.input_user,
.input_pass:focus {
  box-shadow: none !important;
  outline: 0px !important;
}

/* ✅ Casilla base (sin marcar) */
.custom-checkbox .custom-control-label::before {
  background-color: #ffffff; /* Fondo cuando está vacío */
  border: 2px solid #004aad; /* Borde azul para que se vea mejor */
}

/* ✅ Casilla marcada */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #004aad !important; /* Azul cuando está marcado */
  border-color: #004aad !important;
}

/* ============================
   ✅ ANIMACIONES
============================ */
@keyframes fadeInBackground {
  0% { filter: blur(8px) brightness(0.5); }
  100% { filter: blur(0) brightness(1); }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================
   ✅ RESPONSIVE
============================ */
@media (max-width: 992px) {
  .split-container {
    grid-template-columns: 1fr; /* Se apilan en móviles */
  }
  .right-panel {
    display: none; /* Oculta texto gigante en pantallas pequeñas */
  }
}
/* 🎬 Animación inicial: el texto hace un "zoom" grande y regresa a su tamaño */
@keyframes zoomInThenBeat {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(2.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes floatingMotion {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.right-panel {
  animation: floatingMotion 4s ease-in-out infinite;
  animation-delay: 1.5s;
}



/* Aplica el zoom inicial a la palabra "TECNO" */
.TextImagen {
  display: inline-block;
  animation: zoomInThenBeat 1.2s ease-out forwards;
}

/* Aplica el zoom con un leve retraso a "SISTEMAS" */
.TextImagen1 {
  display: inline-block;
  animation: zoomInThenBeat 1.2s ease-out forwards;
  animation-delay: 0.2s;
}