/* ==========================================================================
   Kuantum — estilo de marca para la pantalla de login de Frappe.
   Cubre el /login de TODOS los sitios (POS web + Panel + tenants).

   Se carga vía `web_include_css` (todas las páginas del portal), por eso TODO
   va scopeado a la página de login: `.for-login` (y sus secciones hermanas)
   solo existen en /login, así que `body:has(.for-login)` no toca otras páginas.
   En navegadores sin :has() degrada limpio (la tarjeta/botón igual se estilizan;
   solo el fondo de pantalla completa no aplica).
   ========================================================================== */

:root {
  --kp-brand: #ee7e36;
  --kp-brand-dark: #d35f1c;
  --kp-ink: #1f2430;
}

/* Fondo blanco a pantalla completa, solo en /login */
body:has(.for-login) {
  background: #ffffff !important;
}
/* Login limpio: sin chrome del portal */
body:has(.for-login) .navbar,
body:has(.for-login) .web-footer,
body:has(.for-login) .page-footer,
body:has(.for-login) .page-breadcrumbs {
  display: none !important;
}

/* La tarjeta */
.for-login .page-card,
.for-email-login .page-card,
.for-signup .page-card,
.for-forgot .page-card,
.for-login-with-email-link .page-card {
  border-radius: 18px !important;
  border: 1px solid rgba(232, 114, 46, 0.10) !important;
  box-shadow: 0 18px 50px -12px rgba(200, 90, 28, 0.28), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  padding: 32px 30px !important;
  max-width: 400px;
}

/* Logo + título */
.page-card-head { text-align: center; }
/* logo: la K de Kuantum (176x244). Sin Website Settings, Frappe sirve su propio
   logo en el <img>; content:url lo reemplaza en el cliente para TODOS los tenants
   sin tocar la BD de cada site. */
.page-card-head .app-logo {
  content: url("/assets/kuantum_pos/brand/logo-k.png");
  width: auto !important;
  height: 64px !important;
  max-width: 240px;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 6px;
}
.page-card-head h4 {
  font-weight: 700;
  color: var(--kp-ink);
  margin-top: 14px;
}

/* Inputs */
.for-login .form-control,
.for-signup .form-control,
.for-forgot .form-control,
.for-login-with-email-link .form-control {
  border-radius: 10px !important;
  border: 1.5px solid #ececf0 !important;
  /* el padding-left deja lugar al iconito de la izquierda (no pisarlo) */
  padding: 11px 14px 11px 38px !important;
  font-size: 15px;
}
/* el campo de contraseña tiene el toggle "Mostrar" a la derecha: dejarle lugar */
.page-card .password-field .form-control {
  padding-right: 64px !important;
}
.page-card .form-control:focus {
  border-color: var(--kp-brand) !important;
  box-shadow: 0 0 0 3px rgba(232, 114, 46, 0.15) !important;
}

/* Botón primario (Entrar / Reset / etc.) */
.page-card .btn-primary,
.btn-login.btn-primary,
.btn-forgot.btn-primary {
  background: linear-gradient(135deg, var(--kp-brand), var(--kp-brand-dark)) !important;
  border: none !important;
  border-radius: 11px !important;
  padding: 12px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  box-shadow: 0 6px 16px rgba(211, 95, 28, 0.32) !important;
  transition: transform .08s ease, box-shadow .15s ease;
}
.page-card .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(211, 95, 28, 0.42) !important;
}
.page-card .btn-primary:active { transform: translateY(0); }

/* Enlaces (olvidé contraseña, registrarse, volver) */
.page-card a,
.sign-up-message a,
.forgot-password-message a {
  color: var(--kp-brand-dark) !important;
  font-weight: 500;
}

/* Iconitos de los campos en tono de marca */
.page-card .field-icon { opacity: .6; }

/* Sin "iniciar sesión con enlace de correo": el bloque .social-logins solo trae
   el divider "or" + ese botón (no usamos social providers; si algún día se
   agregan, revisar esta regla). También se oculta su formulario alterno. */
.for-login .social-logins,
section.for-login-with-email-link {
  display: none !important;
}

/* Modo "N° de empleado + PIN" (inyectado por login_pin.js) */
.for-login .kp-pin-login .form-control {
  /* sin iconito a la izquierda: no reservar su espacio */
  padding-left: 14px !important;
}
.for-login .kp-pin-login .kp-pin-error {
  font-size: 13px;
  margin: 0 0 10px;
}
.for-login .kp-pin-toggle {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 14px;
}