/*
 * KODA POS - Paleta oscura del login inspirada en el video de referencia.
 * Fecha: 2026-09-09
 * Alcance: colores del login solamente. No modifica estructura, medidas,
 * animaciones, textos, autenticacion, husky ni botones Google/Apple.
 *
 * Para editar la paleta en produccion:
 *   /home/ubuntu/marketpos/frontend/koda-login-video-dark.css
 */

.koda-login-page {
  background: #090e19;
}

.koda-login-page .koda-login-story {
  background:
    radial-gradient(circle at 25% 18%, rgba(49, 111, 185, .24), transparent 32%),
    radial-gradient(circle at 88% 86%, rgba(22, 99, 105, .14), transparent 30%),
    linear-gradient(145deg, #162237 0%, #0d1422 52%, #080d17 100%);
}

.koda-login-page .koda-login-copy p,
.koda-login-page .koda-login-proof {
  color: #9eacc0;
}

.koda-login-page .koda-login-form-side {
  background:
    radial-gradient(circle at 50% 0, rgba(42, 91, 151, .22), transparent 40%),
    #0b111d;
}

.koda-login-page .koda-login-card {
  border-color: #334055;
  background: rgba(18, 26, 40, .94);
  box-shadow:
    0 25px 65px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .025);
}

.koda-login-page .koda-login-title {
  color: #e6effd;
}

.koda-login-page .koda-login-subtitle {
  color: #8f9db0;
}

.koda-login-page .koda-field__label {
  color: #aeb9c9;
}

.koda-login-page .koda-field__control > svg {
  color: #78879b;
}

.koda-login-page .koda-field input {
  border-color: #344156;
  background: #1a2332;
  color: #e8f1ff;
}

.koda-login-page .koda-field input::placeholder {
  color: #78869a;
}

.koda-login-page .koda-field input:focus {
  border-color: #69a8f7;
  background: #1d2838;
  box-shadow:
    0 0 0 4px rgba(74, 145, 231, .13),
    0 0 22px rgba(55, 131, 222, .10);
}

.koda-login-page .koda-password-toggle {
  color: #8796a9;
}

.koda-login-page .koda-password-toggle:hover {
  background: #263247;
  color: #8fc0ff;
}

.koda-login-page .koda-login-options {
  color: #8997a9;
}

.koda-login-page .koda-login-options a {
  color: #84b9fa;
}

.koda-login-page .koda-login-submit {
  border: 1px solid rgba(117, 180, 255, .35);
  background: linear-gradient(135deg, #348cff, #1559c9);
  color: #fff;
  box-shadow:
    0 12px 26px rgba(25, 101, 210, .27),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.koda-login-page .koda-login-submit:hover:not(:disabled) {
  box-shadow:
    0 15px 30px rgba(25, 101, 210, .34),
    inset 0 1px 0 rgba(255, 255, 255, .20);
}

.koda-login-page .koda-login-door__frame {
  border-color: rgba(223, 239, 255, .92);
  background: linear-gradient(180deg, #397ac6, #174679);
}

.koda-login-page .koda-login-door__panel {
  background: linear-gradient(105deg, #e7f3ff, #90bffa 52%, #4f8fdc);
  box-shadow: inset -3px 0 5px rgba(16, 64, 122, .28);
}

.koda-login-page .koda-login-divider {
  color: #748195;
}

.koda-login-page .koda-login-divider::before,
.koda-login-page .koda-login-divider::after {
  background: #313d50;
}

.koda-login-page .koda-login-socials button {
  border-color: #344156;
  background: #1a2331;
  color: #e5edf8;
}

.koda-login-page .koda-login-socials button:hover {
  border-color: #55789f;
  background: #202c3d;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
}

.koda-login-page .koda-login-socials button:focus-visible {
  outline-color: rgba(86, 160, 246, .20);
}

.koda-login-page .koda-login-social-notice,
.koda-login-page .koda-login-register {
  color: #8997a9;
}

.koda-login-page .koda-login-register a,
.koda-login-page .koda-login-register button {
  color: #84b9fa;
}

.koda-login-page .koda-login-note {
  color: #6f7d90;
}

@media (max-width: 900px) {
  .koda-login-page .koda-login-form-side {
    background:
      radial-gradient(circle at 50% 0, rgba(42, 91, 151, .24), transparent 42%),
      #0b111d;
  }
}