/* ====== Tickea Modern Auth (manteniendo layout original) ====== */
:root { --tickea-green:#00ED85; }

body {
  background: linear-gradient(180deg, #F9FBFD 0%, #f4fff9 100%);
  color: #0f172a;
}

/* Split layout existente */
.admin-container {
  min-height: 100vh;
}

/* Lado de imagen: fondo moderno sin depender de assets nuevos */
.image-side {
  flex: 1 1 50%;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,237,133,.18), transparent 60%),
    radial-gradient(900px 500px at 120% 120%, rgba(0,237,133,.12), transparent 60%),
    linear-gradient(135deg, #0b0b0b, #1a1a1a);
  position: relative;
}
.image-side::after {
  /* brillo suave de marca */
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(600px 300px at 80% 20%, rgba(0,237,133,.12), transparent 60%);
  pointer-events:none;
}

/* Imagen de fondo para el lado izquierdo del login */
.image-side{
  background: #0b0b0b url('../img/login_banner.png') center/cover no-repeat;
  min-height: 100vh;            /* ocupa el alto de la pantalla */
  position: relative;
}

/* prioriza el lado derecho de la imagen */
.image-side{
  background: #0b0b0b url('../img/login_banner.png') no-repeat;
  background-size: cover;
  background-position: 100% center; /* 50% = centro; 85% empuja el foco a la derecha */
}

@media (max-width: 1199.98px){ .image-side{ background-position: 100% center; } }
@media (min-width: 1400px){ .image-side{ background-position: 100% center; } }

/* (Opcional) velo para mejorar contraste del formulario si la imagen es muy clara */
.image-side::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
  pointer-events:none;
}

.image-side::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg,
              rgba(0,0,0,.55) 0%,
              rgba(0,0,0,.25) 40%,
              rgba(0,0,0,0) 100%); /* derecha sin oscurecer */
  pointer-events:none;
}

/* Lado del formulario */
.form-side {
  flex: 1 1 50%;
  background: transparent;
  padding: clamp(20px, 4vw, 40px);
}
.form-wrapper{
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  padding: clamp(18px, 3.6vw, 32px);
}

/* Títulos y textos */
#login-box h2, #register-form h2, #reset-form h2 {
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: .25rem;
}
#login-box p, #register-form p, #reset-form p {
  color: #6b7280;
}

/* Inputs */
.form-label { font-weight: 600; }
.form-control {
  border-radius: 12px;
  border: 1px solid #dfe3e8;
  background: #fff;
}
.form-control::placeholder { color:#98a2b3; }
.form-control:focus {
  border-color: var(--tickea-green);
  box-shadow: 0 0 0 .24rem rgba(0,237,133,.22);
}

/* Mostrar/ocultar contraseña (ya existe en tu HTML) */
.password-wrapper { position: relative; }
.btn-toggle-pass.toggle-password{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:#6c757d;
  padding:.25rem; line-height:1;
}
.btn-toggle-pass.toggle-password:hover { color:#111; }

/* Enlaces de acciones (registro / reset) */
#login-box a, #register-form a, #reset-form a {
  color: var(--tickea-green); text-decoration: none; font-weight: 500;
}
#login-box a:hover, #register-form a:hover, #reset-form a:hover { text-decoration: underline; }

/* Botón principal -> look Tickea */
.btn.btn-primary {
  background: var(--tickea-green);
  border-color: var(--tickea-green);
  color:#000;
  border-radius: 999px;
  font-weight: 700;
  padding: .65rem 1rem;
  transition: transform .15s, box-shadow .2s, background-color .2s;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus{
  background:#08f09e;
  border-color:#08f09e;
  box-shadow: 0 0 0 .25rem rgba(0,237,133,.25);
  transform: translateY(-1px);
}

/* Errores debajo de inputs (ya los tienes como <small>) */
.form-error { color:#dc3545; font-size:.875rem; }

/* Checkbox estilo marca */
.form-check-input:checked{
  background-color: var(--tickea-green);
  border-color: var(--tickea-green);
}

/* Pequeños detalles */
.position-relative .form-label { margin-bottom: .35rem; }
.mb-3 { margin-bottom: 1rem !important; }

/* Responsive: prioriza formulario en móviles y oculta el lado de imagen */
@media (max-width: 991.98px){
  .image-side { display:none; }
  .form-side { flex-basis: 100%; }
  .form-wrapper { max-width: 520px; margin: 0 auto; }
}