/* =========================================================
   LOGIN LACTIA PRO — HD + vidrio ultra-transparente (20260709b)
   Alcance: solo #login paso bienvenida
   ========================================================= */

/* Quitar foto embebida en #login; capa .login-bg con <picture> */
html body #login.login-serio-v1,
html body.light #login.login-serio-v1 {
  background: #0c1018 !important;
  background-image: none !important;
}

html body #login.login-serio-v1 .login-bg {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

html body #login.login-serio-v1 .login-bg picture,
html body #login.login-serio-v1 .login-bg .login-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

html body #login.login-serio-v1 .login-bg .login-bg-img {
  object-fit: cover;
  object-position: center 38%;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Scrim más suave en el centro para que las vacas se lean mejor */
html body #login.login-serio-v1 .login-bg-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(8, 12, 18, 0.42) 0%,
      rgba(8, 12, 18, 0.08) 30%,
      rgba(8, 12, 18, 0.02) 58%,
      rgba(8, 12, 18, 0.12) 82%,
      rgba(8, 12, 18, 0.38) 100%
    ),
    radial-gradient(ellipse 120% 60% at 50% 45%, transparent 40%, rgba(8, 12, 18, 0.06) 100%);
  pointer-events: none;
}

html body #login.login-serio-v1 .login-orb,
html body #login.login-serio-v1 .login-particles {
  display: none !important;
}

html body #login.login-serio-v1 .login-container {
  position: relative;
  z-index: 2;
}

/* Recargar: esquina superior izquierda (no heredar position:relative del bloque anterior) */
html body #login.login-serio-v1 .login-btn-top.login-btn-reload {
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top, 0px)) !important;
  left: max(10px, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 999 !important;
  margin: 0 !important;
  transform: none !important;
}

/* Logo más arriba + scroll si hace falta */
html body #login.login-serio-v1.login-fase-bienvenida {
  padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start !important;
}

html body #login.login-serio-v1.login-fase-bienvenida #login-paso-bienvenida.login-container {
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

html body #login.login-serio-v1.serio-v2.login-fase-bienvenida .login-brand--top {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

html body #login.login-serio-v1.serio-v2.login-fase-bienvenida .login-brand--top .login-brand-img {
  max-height: min(36vw, 156px) !important;
}

html body #login.login-serio-v1.serio-v2.login-fase-bienvenida .login-brand-sub {
  margin-top: 2px !important;
}

/* Pie legal + redes: fijo abajo, siempre visible */
#login #login-paso-bienvenida .login-foot {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 12px max(8px, env(safe-area-inset-bottom, 0px)) !important;
  pointer-events: auto !important;
  background: linear-gradient(180deg, rgba(8, 12, 18, 0) 0%, rgba(8, 12, 18, 0.62) 38%, rgba(8, 12, 18, 0.82) 100%) !important;
  box-sizing: border-box !important;
}

#login #login-paso-bienvenida .login-foot__legal {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

#login #login-paso-bienvenida .login-foot__legal a {
  color: rgba(255, 255, 255, 0.94) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
  pointer-events: auto !important;
}

#login #login-paso-bienvenida .login-foot__legal a:hover {
  color: #ffffff !important;
}

#login #login-paso-bienvenida .login-foot__www {
  display: block !important;
  margin-top: 2px !important;
}

/* ── Panel Bienvenido: vidrio casi invisible ── */
#login #login-paso-bienvenida .login-bienvenida-card--v2.login-finca-new-modal > .mbox.bitacora-mbox.login-finca-new-modal__mbox.login-bienvenida-mbox--v2,
body.light #login #login-paso-bienvenida .login-bienvenida-card--v2.login-finca-new-modal > .mbox.bitacora-mbox.login-finca-new-modal__mbox.login-bienvenida-mbox--v2,
#login #login-paso-bienvenida .login-bienvenida-card.login-finca-new-modal > .mbox.bitacora-mbox.login-finca-new-modal__mbox,
body.light #login #login-paso-bienvenida .login-bienvenida-card.login-finca-new-modal > .mbox.bitacora-mbox.login-finca-new-modal__mbox {
  background: rgba(255, 255, 255, 0.04) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(6px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(115%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 20px rgba(8, 6, 5, 0.12) !important;
}

#login #login-paso-bienvenida .login-bienvenida__body--v2.login-finca-new-modal__body.modal-serio-body,
body.light #login #login-paso-bienvenida .login-bienvenida__body--v2.login-finca-new-modal__body.modal-serio-body,
#login #login-paso-bienvenida .login-bienvenida-card .login-finca-new-modal__body.modal-serio-body,
body.light #login #login-paso-bienvenida .login-bienvenida-card .login-finca-new-modal__body.modal-serio-body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ── Botones: diseño rail glass (sin pastillas blancas ni chips verdes) ── */
#login #login-paso-bienvenida .login-bienvenida__actions {
  max-width: 268px !important;
  gap: 12px !important;
}

#login #login-paso-bienvenida .btn-login-bienvenida__in .serio-v1-icon-box.header-bloque,
body.light #login #login-paso-bienvenida .btn-login-bienvenida__in .serio-v1-icon-box.header-bloque {
  --pes-serio-v1-flank: 42px;
  width: var(--pes-serio-v1-flank) !important;
  min-width: var(--pes-serio-v1-flank) !important;
  max-width: var(--pes-serio-v1-flank) !important;
  height: var(--pes-serio-v1-flank) !important;
  min-height: var(--pes-serio-v1-flank) !important;
  max-height: var(--pes-serio-v1-flank) !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#login #login-paso-bienvenida #btn-bienvenida-google.btn-login-google .serio-v1-icon-box.header-bloque,
body.light #login #login-paso-bienvenida #btn-bienvenida-google.btn-login-google .serio-v1-icon-box.header-bloque {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Base común botones */
#login #login-paso-bienvenida .btn-login.btn-login-google,
#login #login-paso-bienvenida .btn-login.login-bienvenida-demo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 54px !important;
  padding: 7px 12px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  gap: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition:
    transform 0.18s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease !important;
}

#login #login-paso-bienvenida .btn-login.btn-login-google:hover,
#login #login-paso-bienvenida .btn-login.login-bienvenida-demo:hover {
  transform: translateY(-1px) !important;
  filter: none !important;
}

/* 1 · Registrar Nueva Finca — primario slate B2 */
#login #login-paso-bienvenida .btn-login.btn-login-google:not(#btn-bienvenida-google) {
  background: var(--manto-btn-b2-bg, linear-gradient(180deg, #475569 0%, #334155 48%, #1e293b 100%)) !important;
  background-color: transparent !important;
  border: var(--manto-btn-b2-border, 1px solid #1e293b) !important;
  color: var(--manto-btn-b2-color, #f8fafc) !important;
  -webkit-text-fill-color: var(--manto-btn-b2-color, #f8fafc) !important;
  box-shadow: var(--manto-btn-b2-shadow, 0 4px 14px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#login #login-paso-bienvenida .btn-login.btn-login-google:not(#btn-bienvenida-google):hover {
  background: linear-gradient(180deg, #64748b 0%, #475569 48%, #334155 100%) !important;
  border-color: #334155 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

#login #login-paso-bienvenida .btn-login.btn-login-google:not(#btn-bienvenida-google) .btn-login-bienvenida__lbl,
#login #login-paso-bienvenida .btn-login.btn-login-google:not(#btn-bienvenida-google) .btn-login-bienvenida__hint {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  text-shadow: none !important;
}

#login #login-paso-bienvenida .btn-login.btn-login-google:not(#btn-bienvenida-google) .btn-login-bienvenida__hint {
  color: rgba(248, 250, 252, 0.72) !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.72) !important;
}

#login #login-paso-bienvenida .btn-login.btn-login-google:not(#btn-bienvenida-google) .serio-v1-icon-box.header-bloque {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 2 · Ingresar con Google — vitreo claro, texto blanco */
#login #login-paso-bienvenida #btn-bienvenida-google.btn-login-google {
  background: rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.48) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 16px rgba(8, 6, 5, 0.14) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
}

#login #login-paso-bienvenida #btn-bienvenida-google.btn-login-google:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 6px 20px rgba(8, 6, 5, 0.18) !important;
}

#login #login-paso-bienvenida #btn-bienvenida-google.btn-login-google .btn-login-bienvenida__lbl,
#login #login-paso-bienvenida #btn-bienvenida-google.btn-login-google .btn-login-bienvenida__hint {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

#login #login-paso-bienvenida #btn-bienvenida-google.btn-login-google .btn-login-bienvenida__hint {
  color: rgba(255, 255, 255, 0.78) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
}

/* 3 · Finca Demostración — ghost con borde punteado */
#login #login-paso-bienvenida .btn-login.login-bienvenida-demo {
  background: rgba(15, 23, 42, 0.18) !important;
  background-color: rgba(15, 23, 42, 0.18) !important;
  background-image: none !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

#login #login-paso-bienvenida .btn-login.login-bienvenida-demo:hover {
  background: rgba(15, 23, 42, 0.28) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.58) !important;
  border-style: dashed !important;
  box-shadow: 0 4px 14px rgba(8, 6, 5, 0.12) !important;
}

#login #login-paso-bienvenida .btn-login.login-bienvenida-demo .serio-v1-icon-box.header-bloque {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px dashed rgba(255, 255, 255, 0.35) !important;
}

/* Separador más sutil */
#login #login-paso-bienvenida .login-bienvenida__sep {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent) !important;
  opacity: 0.85 !important;
}

/* Demo perfil — coherente con botones ghost */
#login #login-paso-bienvenida .login-demo-perfil-row__lbl {
  color: rgba(255, 255, 255, 0.72) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

#login #login-paso-bienvenida .login-demo-perfil-btn {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

#login #login-paso-bienvenida .login-demo-perfil-btn:hover,
#login #login-paso-bienvenida .login-demo-perfil-btn.active {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

#login #login-paso-bienvenida .login-foot__soc {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  backdrop-filter: blur(8px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #login.login-serio-v1 .login-bg .login-bg-img {
    transform: none;
  }

  #login #login-paso-bienvenida .btn-login.btn-login-google:hover,
  #login #login-paso-bienvenida .btn-login.login-bienvenida-demo:hover {
    transform: none !important;
  }
}

@media (min-width: 768px) {
  html body #login.login-serio-v1 .login-bg .login-bg-img {
    object-position: center 42%;
  }
}