/* Login page custom styles using site color variables */

/* Mantener visible el header global en login */
/* Usamos el padding-top global definido en style.css (80px) */

:root { --login-orange: #ff6a00; }

.login-page {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(0,0,0,0.65), rgba(0,0,0,0.85)),
              url('/static/images/pasarela/pasarela-22.png');
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-card {
  width: min(760px, 92vw);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  overflow: hidden;
  position: relative;
  background: #000;
}

.login-card::before {
  content: none;
  display: none;
}

.login-illustration {
  position: relative;
  height: 240px;
  background: url('/static/images/pasarela/pasarela-33.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Ocultar adornos: nubes, montañas, chevron y logo */
.login-illustration .layer.clouds,
.login-illustration .layer.mountains,
.login-illustration .divider,
.login-illustration .logo-wrap { display: none !important; }

/* Logo minimalista tintado en naranja usando máscara */
.login-illustration .logo-wrap {
  position: absolute; inset: 0 0 auto 0; height: 180px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 3;
}
.login-illustration .logo-mark {
  width: 160px; height: 160px; border-radius: 50%;
  background-color: var(--login-orange);
  -webkit-mask-image: var(--logo-url);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--logo-url);
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  filter: drop-shadow(0 6px 14px rgba(255, 106, 0, 0.35));
}
.login-illustration .logo-mark::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(255, 106, 0, 0.35);
}

.login-illustration .layer.clouds {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%) 20% 55%/160px 60px,
    radial-gradient(closest-side, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%) 60% 48%/200px 70px,
    radial-gradient(closest-side, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%) 80% 62%/180px 60px,
    radial-gradient(closest-side, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%) 35% 70%/140px 50px;
  background-repeat: no-repeat;
}

.login-illustration .layer.mountains {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient( to top right, #2b2b2b, #1c1c1c ) clip-path;
}

/* Montañas con clip-path */
.login-illustration .layer.mountains::before,
.login-illustration .layer.mountains::after {
  content: ""; position: absolute; bottom: 0; height: 55%; width: 60%;
  background: linear-gradient(180deg, #2a2a2a 0%, #161616 100%);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.35));
}
.login-illustration .layer.mountains::before { left: -5%; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.login-illustration .layer.mountains::after  { right: -5%; clip-path: polygon(0 100%, 50% 10%, 100% 100%); }

.login-illustration .divider {
  position: absolute; left: 0; right: 0; bottom: -22px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.login-illustration .chevron {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 106, 0, 0.15); color: var(--login-orange);
  display: grid; place-items: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.login-form {
  position: relative;
  background: #000;
  color: #fff;
  padding: 38px 42px 46px;
  z-index: 1;
}

.login-form .title {
  text-align: center; margin: 0 0 22px; letter-spacing: .6px; font-weight: 700;
}

.input-group { position: relative; margin: 14px 0; }
.input-group i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #c0c6cc; font-size: 1rem; }

.input-control {
  width: 100%;
  background: #0f0f0f;
  border: 1px solid #222;
  color: #fff;
  padding: 12px 14px 12px 42px;
  border-radius: 12px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.input-control::placeholder { color: #a7b0b6; letter-spacing: .4px; }
.input-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(255,0,0,0.2); }

.actions { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 18px; }
.remember { display: inline-flex; align-items: center; gap: 8px; color: #b8c1c7; }
.remember .form-check-input { width: 18px; height: 18px; cursor: pointer; }
.remember .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); }
.forgot { color: #b8c1c7; text-decoration: none; }
.forgot:hover { color: var(--accent-color); }

.login-btn {
  display: block; width: 140px; margin: 0 auto; padding: 12px 0;
  border: 0; border-radius: 20px; cursor: pointer;
  color: var(--accent-color);
  background: linear-gradient(90deg, #ff2a2a, #ff7a7a);
  box-shadow: 0 10px 20px rgba(255,0,0,0.25);
  font-weight: 600; letter-spacing: .4px;
}
.login-btn:hover { filter: brightness(1.05); }

/* Mensajes de error dentro del control */
.invalid-feedback { color: #ffb3b3; font-size: .85rem; margin-top: 6px; }

@media (max-width: 560px) {
  .login-form { padding: 26px 24px 36px; }
}

/* Optimización para pantallas pequeñas tipo 360x740 (Android comunes) */
@media (max-width: 400px) {
  .login-page {
    align-items: flex-start;
    padding: 16px 0 24px;
    min-height: calc(100vh - 80px);
  }

  .login-card {
    width: 96vw;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 16px 32px rgba(0,0,0,0.35);
  }

  .login-illustration {
    display: none;
  }

  .login-form {
    padding: 18px 16px 24px;
  }

  .login-form .title {
    font-size: 1.1rem;
    margin-bottom: 16px;
  }

  .input-group { margin: 10px 0; }
  .input-group i { left: 12px; font-size: 0.95rem; }

  .input-control {
    padding: 10px 12px 10px 40px;
    font-size: 0.95rem;
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .login-btn {
    width: 100%;
    margin-top: 12px;
  }
}