/* ============================================================
   WhatMas — Login page (drop-in stylesheet)
   Carga DESPUÉS de main.css. Sobrescribe los estilos legacy del login
   sin tocar markup ni JS de producción.
   ============================================================ */

:root {
  --lg-bg-1:        #0E1620;
  --lg-bg-2:        #1F3D6B;
  --lg-card:        #FFFFFF;
  --lg-text:        #1A1A1A;
  --lg-muted:       #5A6573;
  --lg-faint:       #8A95A3;
  --lg-border:      #E7ECF2;
  --lg-surface:     #F6F8FB;
  --lg-green:       #5BB04B;
  --lg-green-600:   #4A9C3A;
  --lg-green-50:    #EEF8EB;
  --lg-emerald:     #005C4B;
  --lg-cyan:        #4FB6E0;
  --lg-blue:        #3D7DD9;
  --lg-magenta:     #C73E70;
  --lg-orange:      #E27A3F;
  --lg-error:       #DC2626;
  --lg-shadow-lg:   0 30px 80px rgba(15,23,32,.18);
}

[data-theme="dark"] {
  --lg-card:        #161B22;
  --lg-text:        #E8ECF1;
  --lg-muted:       #97A1B0;
  --lg-faint:       #6B7588;
  --lg-border:      #2D333D;
  --lg-surface:     #20262F;
  --lg-shadow-lg:   0 30px 80px rgba(0,0,0,.6);
}

/* Reset y shell */
html, body { height: 100vh; margin: 0; padding: 0; font-family: 'Inter', 'DM Sans', system-ui, sans-serif; }
body {
  background:
    radial-gradient(ellipse at top left, rgba(91,176,75,.18) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(79,182,224,.14) 0%, transparent 50%),
    linear-gradient(135deg, var(--lg-bg-1) 0%, var(--lg-bg-2) 100%);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

/* Patrón de circuito (matching el logo) en el background */
body::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(91,176,75,.4) 4px, transparent 4px),
    radial-gradient(circle at 25% 65%, rgba(79,182,224,.3) 3px, transparent 3px),
    radial-gradient(circle at 80% 30%, rgba(61,125,217,.3) 4px, transparent 4px),
    radial-gradient(circle at 70% 80%, rgba(199,62,112,.3) 3px, transparent 3px),
    radial-gradient(circle at 90% 50%, rgba(226,122,63,.3) 3px, transparent 3px);
  background-size: 600px 600px;
  opacity: .8;
  animation: lg-stars 80s linear infinite;
  pointer-events: none;
}
@keyframes lg-stars {
  to { background-position: 600px 600px, 600px 600px, -600px 600px, 600px -600px, -600px -600px; }
}

/* SVG líneas de circuito decorativas */
body::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' opacity='.06'><path d='M100 100 L100 400 L300 400 L300 200 L500 200' stroke='%235BB04B' stroke-width='2' fill='none'/><path d='M700 100 L700 300 L500 300 L500 500 L300 500' stroke='%234FB6E0' stroke-width='2' fill='none'/><path d='M600 700 L600 500 L400 500' stroke='%23C73E70' stroke-width='2' fill='none'/><circle cx='100' cy='100' r='4' fill='%235BB04B'/><circle cx='300' cy='200' r='4' fill='%235BB04B'/><circle cx='500' cy='200' r='4' fill='%235BB04B'/><circle cx='700' cy='100' r='4' fill='%234FB6E0'/><circle cx='500' cy='500' r='4' fill='%234FB6E0'/><circle cx='400' cy='500' r='4' fill='%23C73E70'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80vmin;
  opacity: .7;
  pointer-events: none;
}

/* Wrapper centrado */
.wrapper {
  width: 100%; max-width: 100%;
  padding: 20px;
  min-height: auto !important;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

/* Card del formulario — glassmorphism + slide-up entrance */
#formContent {
  background: var(--lg-card) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px !important;
  box-shadow: var(--lg-shadow-lg) !important;
  padding: 0 !important;
  width: 100%;
  max-width: 440px !important;
  position: relative;
  overflow: hidden;
  animation: lg-card-in .6s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes lg-card-in {
  0%   { opacity: 0; transform: translateY(30px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Banda superior — gradiente verde con líneas decorativas */
#formContent::before {
  content: '';
  display: block;
  height: 8px;
  background: linear-gradient(90deg, var(--lg-green) 0%, var(--lg-cyan) 25%, var(--lg-blue) 50%, var(--lg-magenta) 75%, var(--lg-orange) 100%);
  border-radius: 24px 24px 0 0;
}

/* Logo area */
.fadeIn.first {
  padding: 36px 36px 20px;
  text-align: center;
  margin: 0 !important;
}
.fadeIn.first #icon,
#icon {
  width: 88px !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 auto 16px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(91,176,75,.18));
  animation: lg-logo-float 4s ease-in-out infinite;
}
@keyframes lg-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.fadeIn.first h4 {
  font-size: 20px !important;
  font-weight: 700;
  color: var(--lg-text);
  margin: 0;
  letter-spacing: -.01em;
}
.fadeIn.first h4::after {
  content: 'Acceso al panel de operador';
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--lg-muted);
  margin-top: 6px;
  letter-spacing: 0;
}

/* Form */
.js-frm-login {
  padding: 0 36px 16px;
}
.js-frm-login .row { margin: 0 !important; }
.js-frm-login .row > [class*="col-"],
.js-frm-login .offset-md-2,
.js-frm-login .offset-lg-2,
.js-frm-login .col-md-8,
.js-frm-login .col-lg-8 {
  width: 100% !important; max-width: 100% !important;
  padding: 0 !important; margin: 0 !important;
  flex: 1 1 100% !important;
}

/* Form group */
.js-frm-login .form-group {
  position: relative;
  margin-bottom: 16px !important;
}
.js-frm-login .form-control-label {
  display: block;
  font-size: 12px !important;
  font-weight: 700;
  color: var(--lg-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px !important;
}

/* Inputs */
.js-frm-login .form-control,
.js-frm-login .form-control-alternative,
.js-user, .js-pass {
  width: 100% !important;
  height: 48px !important;
  background: var(--lg-surface) !important;
  border: 1.5px solid transparent !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  font-size: 14.5px !important;
  color: var(--lg-text) !important;
  text-align: left !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all .15s ease;
  display: block !important;
  margin: 0 !important;
}
.js-frm-login .form-control::placeholder { color: var(--lg-faint) !important; }
.js-frm-login .form-control:focus,
.js-user:focus, .js-pass:focus {
  background: var(--lg-card) !important;
  border-color: var(--lg-green) !important;
  box-shadow: 0 0 0 4px rgba(91,176,75,.12) !important;
}
.js-frm-login .form-control.border-danger {
  border-color: var(--lg-error) !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,.10) !important;
}

/* Password input + toggle eye */
.js-frm-login .input-group {
  position: relative;
  width: 100%;
  display: flex;
}
.js-frm-login .input-group .form-control,
.js-frm-login .input-group .js-pass {
  border-radius: 12px !important;
  padding-right: 48px !important;
}
.js-frm-login .input-group-prepend {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  margin: 0 !important;
  width: auto !important;
}
.js-frm-login .input-group-text,
.js-frm-login .input-group-text.js-see {
  width: 40px; height: 40px;
  border: 0 !important;
  background: transparent !important;
  color: var(--lg-faint) !important;
  border-radius: 50% !important;
  display: inline-grid !important; place-items: center;
  cursor: pointer;
  font-size: 14px !important;
  transition: all .15s ease;
  padding: 0 !important;
}
.js-frm-login .input-group-text:hover { color: var(--lg-green) !important; background: var(--lg-green-50) !important; }

/* Error / mensaje */
.js-login-message,
.js-p-login-error {
  margin: 6px 0 0 !important;
  padding: 0;
  font-size: 12.5px;
  color: var(--lg-error);
  text-align: center;
  min-height: 18px;
  font-weight: 600;
}
.js-login-message:not(:empty)::before {
  content: '\f071';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 6px;
}

/* reCAPTCHA wrapper */
.container-recaptcha {
  margin: 12px 0;
  display: flex !important;
  justify-content: center;
}
.container-recaptcha.elementHide { display: none !important; }
.css-captcha-div { transform: scale(.95); transform-origin: center; }

/* Botón Ingresar — full width verde con shimmer */
.js-btn-login,
.logIn.js-btn-login {
  display: block !important;
  width: calc(100% - 72px) !important;
  margin: 0 36px 24px !important;
  height: 48px !important;
  background: linear-gradient(135deg, var(--lg-green) 0%, var(--lg-green-600) 100%) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: .02em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(91,176,75,.32) !important;
  transition: all .2s ease;
  padding: 0 !important;
}
.js-btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(91,176,75,.45) !important;
  background: linear-gradient(135deg, var(--lg-green-600) 0%, var(--lg-green) 100%) !important;
}
.js-btn-login:active {
  transform: translateY(0);
}
.js-btn-login::after {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-left: 8px;
  display: inline-block;
  transition: transform .15s ease;
}
.js-btn-login:hover::after { transform: translateX(4px); }

/* Shimmer animation en el botón */
.js-btn-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: lg-shimmer 3s ease-in-out infinite;
}
@keyframes lg-shimmer {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Loading state */
.js-btn-login.is-loading {
  pointer-events: none;
  background: var(--lg-green-600) !important;
  color: transparent !important;
}
.js-btn-login.is-loading::after { display: none; }
.js-btn-login.is-loading::before {
  content: '';
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lg-spin .8s linear infinite;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  margin: 0;
  display: block;
}
@keyframes lg-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Footer del card — links auxiliares */
.lg-card-footer {
  padding: 16px 36px 28px;
  border-top: 1px solid var(--lg-border);
  text-align: center;
  font-size: 12.5px;
  color: var(--lg-muted);
}
.lg-card-footer a {
  color: var(--lg-emerald);
  font-weight: 600;
  text-decoration: none;
}
.lg-card-footer a:hover { text-decoration: underline; }

/* Login centrado en TODAS las pantallas (panel de marca eliminado) */

/* Responsive */
@media (max-width: 480px) {
  #formContent { max-width: 100% !important; }
  .fadeIn.first { padding: 28px 24px 16px; }
  .js-frm-login { padding: 0 24px 16px; }
  .js-btn-login { width: calc(100% - 48px) !important; margin: 0 24px 22px !important; }
  .lg-card-footer { padding: 14px 24px 24px; }
  .fadeIn.first #icon { width: 72px !important; }
  .fadeIn.first h4 { font-size: 18px !important; }
}

/* Modo oscuro — gradiente de fondo distinto */
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at top left, rgba(91,176,75,.12) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(79,182,224,.08) 0%, transparent 50%),
    linear-gradient(135deg, #050810 0%, #0A0F1A 100%);
}
[data-theme="dark"] #formContent {
  border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .lg-card-footer { border-top-color: var(--lg-border); }

/* Theme toggle */
.lg-theme-toggle {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 100;
  width: 40px; height: 40px;
  border-radius: 50%;
  /* Chip oscuro translúcido: visible tanto sobre la tarjeta blanca del formulario
     (desktop, el botón queda encima) como sobre el fondo oscuro. Antes era
     color:#fff sobre fondo casi transparente → invisible sobre la tarjeta. */
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(14,22,32,.55);
  color: #fff;
  display: inline-grid; place-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: all .15s ease;
  backdrop-filter: blur(10px);
}
.lg-theme-toggle:hover {
  transform: rotate(15deg);
  background: rgba(255,255,255,.18);
}

/* Hide deprecated elementHide */
.elementHide { display: none !important; }
.text-red { color: var(--lg-error) !important; }

/* ============================================================
   Overrides de integración — vencer a css/operador/main.css
   que fuerza `body{ background:#f4f3ef !important }`.
   ============================================================ */
html, body {
  background:
    radial-gradient(ellipse at top left, rgba(91,176,75,.18) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(79,182,224,.14) 0%, transparent 50%),
    linear-gradient(135deg, #0E1620 0%, #1F3D6B 100%) !important;
  background-attachment: fixed !important;
}
[data-theme="dark"] html,
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at top left, rgba(91,176,75,.12) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(79,182,224,.08) 0%, transparent 50%),
    linear-gradient(135deg, #050810 0%, #0A0F1A 100%) !important;
  background-attachment: fixed !important;
}

/* Texto del card legible en ambos temas (vence a colores blancos legacy) */
#formContent h4,
#formContent .fadeIn.first h4 { color: var(--lg-text) !important; }
.js-frm-login .form-control-label { color: var(--lg-muted) !important; }
.js-user, .js-pass,
.js-frm-login .form-control { color: var(--lg-text) !important; }

/* Toggle de tema más visible */
.lg-theme-toggle { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }