/* ============================================================
   LOGIN - MiPOSFacturador
   Rediseño visual (azul noche / tecnológico). Todo cuelga de
   .mpf-login-shell para no interferir con ningún otro estilo del
   sistema. No se tocó ningún id/name/atributo funcional del HTML,
   solo estructura visual y clases nuevas con prefijo "mpf-".
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");

:root {
  --mpf-azul-electrico: #0253e1;
  --mpf-azul-profundo: #003fbb;
  --mpf-azul-noche: #181855;
  --mpf-fondo-principal: #08102f;
  --mpf-fondo-secundario: #101447;
  --mpf-azul-claro: #72a8ff;
  --mpf-blanco: #ffffff;
  --mpf-texto-secundario: #9eabc9;
  --mpf-borde: rgba(114, 168, 255, 0.2);
  --mpf-verde-estado: #46df9e;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
input {
  font-family: "Poppins", sans-serif;
}

html, body {
  height: 100%;
}

/* ============ FONDO GENERAL ============ */
.mpf-login-shell {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(2, 83, 225, 0.18), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(24, 24, 85, 0.35), transparent 45%),
    linear-gradient(135deg, #08102f 0%, #101447 50%, #0b1033 100%);
}

.mpf-login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(114, 168, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 168, 255, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ============ TARJETA ============ */
.mpf-login-card {
  position: relative;
  z-index: 1;
  width: 440px;
  max-width: calc(100% - 32px);
  background: linear-gradient(145deg, rgba(17, 24, 65, 0.96), rgba(8, 16, 47, 0.96));
  border: 1px solid var(--mpf-borde);
  border-radius: 22px;
  padding: 36px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ============ BOTÓN DE TEMA (esquina de la tarjeta) ============ */
.mpf-theme-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(114, 168, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
  color: var(--mpf-azul-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all .18s ease;
  z-index: 2;
}

.mpf-theme-toggle:hover {
  border-color: var(--mpf-azul-electrico);
  background: rgba(2, 83, 225, 0.14);
  color: var(--mpf-blanco);
}

/* ============ ENCABEZADO ============ */
.mpf-login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 22px;
}

.mpf-login-logo {
  width: auto;
  min-width: 190px;
  max-width: 100%;
  height: 88px;
  border-radius: 16px;
  background: #fdfdfe;
  border: 1px solid rgba(2, 83, 225, 0.45);
  box-shadow: 0 0 0 4px rgba(2, 83, 225, 0.1), 0 0 34px rgba(2, 83, 225, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 10px 20px;
}

.mpf-login-logo img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Si el logo no carga (onerror lo quita del DOM), se muestra un ícono
   de respaldo en vez de dejar el círculo vacío. */
.mpf-login-logo--sin-imagen::after {
  content: "\f3fd"; /* fa-cash-register */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.9rem;
  color: var(--mpf-azul-claro);
}

.mpf-login-brand {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--mpf-blanco);
  letter-spacing: 0.01em;
}

.mpf-login-brand-sub {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mpf-azul-claro);
  margin-top: 2px;
}

/* ============ CONTENEDORES REUTILIZADOS (ya existían en el HTML) ============
   Se neutraliza el layout absoluto/2-columnas original: ahora todo fluye
   normal dentro de la tarjeta centrada. */
.container {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: visible;
  background: transparent;
}

.forms-container {
  position: relative;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

.signin-signup {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  display: block;
  z-index: 1;
}

form {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
  padding: 0;
  overflow: visible;
}

form.sign-up-form {
  display: none;
}

.title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--mpf-blanco);
  margin-bottom: 4px;
  text-align: left;
}

.mpf-login-desc {
  font-size: 0.82rem;
  color: var(--mpf-texto-secundario);
  margin-bottom: 20px;
  text-align: left;
  line-height: 1.4;
}

/* ============ CAMPOS ============ */
.mpf-field {
  margin-bottom: 16px;
}

.mpf-field label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--mpf-texto-secundario);
  margin-bottom: 6px;
}

.input-field {
  max-width: 100%;
  width: 100%;
  height: 52px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(114, 168, 255, 0.22);
  border-radius: 11px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.input-field:focus-within {
  border-color: var(--mpf-azul-electrico);
  box-shadow: 0 0 0 3px rgba(2, 83, 225, 0.16), 0 8px 24px rgba(2, 83, 225, 0.1);
}

.input-field i {
  text-align: center;
  color: var(--mpf-azul-claro);
  transition: 0.3s;
  font-size: 0.95rem;
  width: 22px;
  flex: 0 0 auto;
}

.input-field input {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--mpf-blanco);
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 12px;
  height: 100%;
}

.input-field input::placeholder {
  color: rgba(158, 171, 201, 0.65);
  font-weight: 400;
}

/* El navegador no debe poner fondo blanco al autocompletar */
.input-field input:-webkit-autofill,
.input-field input:-webkit-autofill:hover,
.input-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mpf-blanco);
  -webkit-box-shadow: 0 0 0px 1000px rgba(17, 24, 65, 0.98) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ============ BOTÓN MOSTRAR/OCULTAR CONTRASEÑA ============ */
.mpf-input-password input {
  padding-right: 8px;
}

.mpf-toggle-password {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--mpf-texto-secundario);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpf-toggle-password:hover {
  color: var(--mpf-azul-claro);
}

/* ============ OPCIONES (olvidaste tu contraseña) ============ */
.mpf-options-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.mpf-options-row--center {
  justify-content: center;
  margin-top: 14px;
  margin-bottom: 0;
}

.mpf-forgot-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mpf-azul-claro);
  text-decoration: none;
}

.mpf-forgot-link:hover {
  color: var(--mpf-blanco);
  text-decoration: underline;
}

/* ============ BOTÓN INGRESAR ============ */
.btn.mpf-btn-submit {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #0253e1 0%, #0051dd 55%, #003fbb 100%);
  border: none;
  outline: none;
  border-radius: 11px;
  color: var(--mpf-blanco);
  font-size: 0.94rem;
  text-transform: none;
  font-weight: 700;
  margin: 0;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(2, 83, 225, 0.28);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.mpf-btn-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 18px 38px rgba(2, 83, 225, 0.36);
}

.btn.mpf-btn-submit.disabled {
  opacity: .65;
  pointer-events: none;
}

/* ============ PIE DE LA TARJETA ============ */
.mpf-login-footer {
  margin-top: 26px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--mpf-texto-secundario);
  letter-spacing: .01em;
}

.mpf-login-footer i {
  color: var(--mpf-azul-claro);
  margin-right: 4px;
}

/* ============ MODAL: RESTABLECER CONTRASEÑA ============ */
.mpf-modal-reset .modal-dialog {
  max-width: 440px;
}

.mpf-modal-reset .modal-content {
  background: linear-gradient(145deg, rgba(17, 24, 65, 0.97), rgba(8, 16, 47, 0.97));
  border: 1px solid var(--mpf-borde);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  color: var(--mpf-blanco);
}

.mpf-modal-reset .modal-header {
  border-bottom: 1px solid rgba(114, 168, 255, 0.14);
  padding: 20px 22px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mpf-modal-reset .modal-title {
  color: var(--mpf-blanco);
  font-weight: 700;
  font-size: 1.05rem;
}

.mpf-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(114, 168, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: var(--mpf-texto-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all .15s ease;
}

.mpf-modal-close:hover {
  color: var(--mpf-blanco);
  border-color: var(--mpf-azul-electrico);
  background: rgba(2, 83, 225, 0.14);
}

.mpf-modal-reset .modal-body {
  padding: 20px 22px 24px;
}

.mpf-modal-desc {
  font-size: 0.8rem;
  color: var(--mpf-texto-secundario);
  line-height: 1.45;
  margin-bottom: 18px;
}

.mpf-modal-hint {
  color: var(--mpf-texto-secundario);
  font-weight: 400;
  font-size: 0.7rem;
  margin-left: 4px;
}

.mpf-field--modal label {
  display: flex;
  align-items: center;
  color: var(--mpf-texto-secundario);
}

.mpf-modal-input {
  background: none;
  outline: none;
  border: none;
  color: var(--mpf-blanco);
  font-size: 0.9rem;
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 12px;
  height: 100%;
}

.mpf-modal-input::placeholder {
  color: rgba(158, 171, 201, 0.65);
  font-weight: 400;
}

.mpf-modal-input:-webkit-autofill,
.mpf-modal-input:-webkit-autofill:hover,
.mpf-modal-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mpf-blanco);
  -webkit-box-shadow: 0 0 0px 1000px rgba(17, 24, 65, 0.98) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.mpf-modal-reset .invalid-feedback {
  color: #ff8080;
  font-size: 0.72rem;
  margin-top: 4px;
  display: none;
}

.mpf-modal-reset .was-validated .invalid-feedback {
  display: block;
}

.mpf-btn-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border-radius: 11px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all .18s ease;
}

.mpf-btn-modal--cancelar {
  background: transparent;
  border: 1px solid rgba(114, 168, 255, 0.35);
  color: var(--mpf-texto-secundario);
}

.mpf-btn-modal--cancelar:hover {
  color: var(--mpf-blanco);
  border-color: var(--mpf-azul-claro);
}

.mpf-btn-modal--enviar {
  background: linear-gradient(135deg, #0253e1 0%, #0051dd 55%, #003fbb 100%);
  border: none;
  color: var(--mpf-blanco);
  box-shadow: 0 10px 24px rgba(2, 83, 225, 0.28);
}

.mpf-btn-modal--enviar:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.mpf-modal-reset .modal-backdrop,
.modal-backdrop {
  background: rgba(3, 8, 28, 0.78);
}

.modal-backdrop.show {
  opacity: 1;
}

.mpf-modal-reset {
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* ============ TEMA CLARO (toggle en la esquina de la tarjeta) ============
   Se activa agregando .mpf-theme-light a .mpf-login-shell (ver JS en
   login.php). El modal de restablecer contraseña se mantiene siempre en
   azul noche, no depende de este toggle. */
.mpf-login-shell.mpf-theme-light {
  background:
    radial-gradient(circle at 50% 20%, rgba(2, 83, 225, 0.1), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(2, 83, 225, 0.08), transparent 50%),
    linear-gradient(135deg, #eef3fc 0%, #f7f9fd 50%, #eef3fc 100%);
}

.mpf-login-shell.mpf-theme-light::before {
  background-image:
    linear-gradient(rgba(2, 83, 225, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 83, 225, 0.05) 1px, transparent 1px);
}

.mpf-login-shell.mpf-theme-light .mpf-login-card {
  background: linear-gradient(145deg, #ffffff, #f4f7fd);
  border-color: rgba(2, 83, 225, 0.18);
  box-shadow: 0 30px 80px rgba(2, 83, 225, 0.14);
}

.mpf-login-shell.mpf-theme-light .mpf-login-brand,
.mpf-login-shell.mpf-theme-light .title {
  color: #10193d;
}

.mpf-login-shell.mpf-theme-light .mpf-login-desc,
.mpf-login-shell.mpf-theme-light .mpf-field label,
.mpf-login-shell.mpf-theme-light .mpf-login-footer {
  color: #5b6a8f;
}

.mpf-login-shell.mpf-theme-light .input-field {
  background: rgba(2, 83, 225, 0.045);
  border-color: rgba(2, 83, 225, 0.16);
}

.mpf-login-shell.mpf-theme-light .input-field input {
  color: #10193d;
}

.mpf-login-shell.mpf-theme-light .input-field input::placeholder {
  color: #8b98b8;
}

.mpf-login-shell.mpf-theme-light .input-field input:-webkit-autofill,
.mpf-login-shell.mpf-theme-light .input-field input:-webkit-autofill:hover,
.mpf-login-shell.mpf-theme-light .input-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #10193d;
  -webkit-box-shadow: 0 0 0px 1000px #f2f6fc inset;
}

.mpf-login-shell.mpf-theme-light .mpf-toggle-password {
  color: #8b98b8;
}

.mpf-login-shell.mpf-theme-light .mpf-toggle-password:hover {
  color: var(--mpf-azul-electrico);
}

.mpf-login-shell.mpf-theme-light .mpf-login-logo {
  box-shadow: 0 0 0 4px rgba(2, 83, 225, 0.06), 0 0 20px rgba(2, 83, 225, 0.18);
}

.mpf-login-shell.mpf-theme-light .mpf-theme-toggle {
  border-color: rgba(2, 83, 225, 0.25);
  background: rgba(2, 83, 225, 0.06);
  color: var(--mpf-azul-electrico);
}

.mpf-login-shell.mpf-theme-light .mpf-theme-toggle:hover {
  background: rgba(2, 83, 225, 0.14);
  color: #003fbb;
}

/* ============ TOASTS (mensajeToast / toastr) EN EL LOGIN ============
   toastr es una librería global de todo el sistema - esta regla solo se
   aplica cuando la tarjeta de login está presente en la página (osea,
   sin sesión activa), para no cambiar el color de los toasts en el resto
   del sistema ya autenticado. */
body:has(.mpf-login-shell) #toast-container > div {
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .35) !important;
  opacity: 1 !important;
}

/* Separación de 18px desde la esquina (el default de toastr es 12px) -
   afecta a los 4 tipos de toast por igual porque comparten un mismo
   contenedor posicionado, no hay forma de mover solo uno. */
body:has(.mpf-login-shell) #toast-container.toast-top-right {
  top: 18px !important;
  right: 18px !important;
}

/* "Usuario autenticado" - verde esmeralda oscuro integrado al azul noche
   de SmartNexo ERP (a pedido explícito, más chico y sobrio que el verde
   brillante por defecto de toastr). Solo se toca este tipo de toast. */
body:has(.mpf-login-shell) #toast-container > .toast-success {
  background: linear-gradient(135deg, #087a55 0%, #0c9b68 100%) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237CF5C4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #087a55 0%, #0c9b68 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 16px center, 0 0 !important;
  background-size: 18px 18px, auto !important;
  border: 1px solid rgba(70, 223, 158, 0.35) !important;
  border-radius: 12px !important;
  color: #eafff6 !important;
  max-width: 320px !important;
  width: auto !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32) !important;
  opacity: 1 !important;
}

body:has(.mpf-login-shell) #toast-container > .toast-success .toast-progress {
  height: 2px !important;
  background-color: #eafff6 !important;
  opacity: .55 !important;
}

body:has(.mpf-login-shell) #toast-container > .toast-error {
  background-color: #d7263d !important;
  border: 1px solid rgba(255, 128, 128, 0.35) !important;
}

body:has(.mpf-login-shell) #toast-container > .toast-warning {
  background-color: #c9821a !important;
  border: 1px solid rgba(255, 200, 120, 0.35) !important;
}

body:has(.mpf-login-shell) #toast-container > .toast-info {
  background-color: var(--mpf-azul-electrico) !important;
  border: 1px solid rgba(114, 168, 255, 0.4) !important;
}

/* ============ TOAST DE SWEETALERT2 (confirmación de restablecer contraseña) ============
   Reemplaza el Swal.fire() bloqueante y centrado de "Código verificado..."
   por un toast compacto en la esquina, usando el propio modo "toast" de
   SweetAlert2 (ya está cargado en el sistema, versión 10.15.6 - no se
   agregó ninguna librería nueva). Separado de los toasts de toastr de
   arriba porque es un componente distinto. */
.swal2-container.swal2-top-end {
  top: 20px !important;
  right: 20px !important;
}

.smartnexo-toast.swal2-popup {
  width: 370px !important;
  max-width: calc(100vw - 28px);
  padding: 16px 18px !important;
  border: 1px solid rgba(70, 223, 158, 0.35) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #111841 0%, #08102f 100%) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.38), 0 0 30px rgba(2, 83, 225, 0.10) !important;
  color: #ffffff !important;
}

.smartnexo-toast .swal2-icon {
  width: 34px !important;
  height: 34px !important;
  margin: 0 12px 0 0 !important;
}

.smartnexo-toast .swal2-success-ring {
  border-color: rgba(70, 223, 158, 0.35) !important;
}

.smartnexo-toast .swal2-success-line-tip,
.smartnexo-toast .swal2-success-line-long {
  background-color: #46df9e !important;
}

.smartnexo-toast .swal2-success-fix {
  background-color: transparent !important;
}

.smartnexo-toast .swal2-x-mark-line-left,
.smartnexo-toast .swal2-x-mark-line-right {
  background-color: #ff8080 !important;
}

.smartnexo-toast .swal2-close {
  color: #aebbd7 !important;
  font-size: 20px !important;
}

.smartnexo-toast .swal2-close:hover {
  color: #ffffff !important;
}

.smartnexo-toast-title {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin: 0 0 2px !important;
}

.smartnexo-toast-message {
  color: #aebbd7 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  margin: 0 !important;
}

.smartnexo-toast-progress {
  background: #46df9e !important;
}

/* Variante de error - mismo formato compacto, acento rojo en vez de verde */
.smartnexo-toast-error.swal2-popup {
  border-color: rgba(255, 128, 128, 0.35) !important;
}

.smartnexo-toast-progress-error {
  background: #ff8080 !important;
}

@media (max-width: 480px) {
  .smartnexo-toast.swal2-popup {
    width: calc(100vw - 28px) !important;
    margin: 14px !important;
  }

  .swal2-container.swal2-top-end {
    top: 14px !important;
    right: 14px !important;
  }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 480px) {
  .mpf-login-shell {
    padding: 14px;
  }

  .mpf-login-card {
    max-width: calc(100% - 28px);
    padding: 24px;
    border-radius: 18px;
  }

  .mpf-login-logo {
    width: 62px;
    height: 62px;
    border-radius: 16px;
  }

  .mpf-login-brand {
    font-size: 1.1rem;
  }

  .title {
    font-size: 1.12rem;
  }

  .input-field {
    height: 48px;
  }

  .btn.mpf-btn-submit {
    height: 48px;
  }
}