/* ═══════════════════════════════════════════════════════════
   Bookendo Mail — 2026 Premium Login v4
   ═══════════════════════════════════════════════════════════ */

/* ── Animated Mesh Background ── */
body.task-login {
  margin: 0 !important;
  padding: 0 !important;
  background: #050510 !important;
  overflow: hidden !important;
}

body.task-login::before {
  content: "" !important;
  position: fixed !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(79,70,229,0.15) 0%, transparent 50%) !important;
  animation: aurora 15s ease-in-out infinite alternate !important;
  z-index: 0 !important;
}

@keyframes aurora {
  0%   { transform: translate(0,0) rotate(0deg); }
  33%  { transform: translate(3%,-3%) rotate(2deg); }
  66%  { transform: translate(-2%,2%) rotate(-1deg); }
  100% { transform: translate(1%,-1%) rotate(1deg); }
}

/* ── Layout ── */
body.task-login #layout {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 20px !important;
  position: relative !important;
  z-index: 1 !important;
}

body.task-login h1.voice,
body.task-login #logo,
body.task-login #supportlink { display: none !important; }

/* subtle noise */
body.task-login #layout::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  opacity: 0.025 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Card — dark glass ── */
body.task-login #layout-content {
  all: unset !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(15,15,30,0.75) !important;
  backdrop-filter: blur(60px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(130%) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 0 80px rgba(99,102,241,0.08),
    0 24px 48px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  width: 440px !important;
  max-width: 100% !important;
  padding: 52px 40px 40px !important;
  box-sizing: border-box !important;
  position: relative !important;
  animation: cardIn 0.7s cubic-bezier(0.16,1,0.3,1) both !important;
  z-index: 2 !important;
}

@keyframes cardIn {
  0%   { opacity: 0; transform: translateY(24px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── No extra pseudo on card ── */
body.task-login #layout-content::after {
  content: none !important;
  display: none !important;
}

/* ── Logo "B" ── */
body.task-login #layout-content::before {
  content: "B" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border-radius: 16px !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  margin: 0 0 32px 0 !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
  box-shadow: 0 0 24px rgba(99,102,241,0.35), 0 4px 12px rgba(0,0,0,0.3) !important;
  animation: pulse 4s ease-in-out infinite !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  order: -1 !important;
}

@keyframes pulse {
  0%,100% { box-shadow: 0 0 24px rgba(99,102,241,0.35), 0 4px 12px rgba(0,0,0,0.3); }
  50%     { box-shadow: 0 0 36px rgba(99,102,241,0.5),  0 4px 12px rgba(0,0,0,0.3); }
}

/* ── Form ── */
body.task-login #login-form {
  all: unset !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  order: 0 !important;
}

/* ── Title — inside form so it stays in order ── */
body.task-login #login-form::before {
  content: "Bienvenido de nuevo" !important;
  display: block !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: -0.3px !important;
  margin: 0 0 6px 0 !important;
  order: -2 !important;
}

/* ── Subtitle ── */
body.task-login #login-form::after {
  content: "Accede a tu correo Bookendo" !important;
  display: block !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.4) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  margin: 0 0 36px 0 !important;
  font-weight: 400 !important;
  order: -1 !important;
}

/* ── Table reset ── */
body.task-login #login-form table {
  all: unset !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  order: 0 !important;
}
body.task-login #login-form table tbody {
  all: unset !important;
  display: contents !important;
}
body.task-login #login-form table tr {
  all: unset !important;
  display: block !important;
}
body.task-login #login-form table td {
  all: unset !important;
  display: block !important;
}

/* ── Labels hidden ── */
body.task-login #login-form label { display: none !important; }
body.task-login .input-group { display: block !important; }
body.task-login .input-group-prepend,
body.task-login .input-group-text { display: none !important; }

/* ── Inputs ── */
body.task-login #login-form input.form-control,
body.task-login #rcmloginuser,
body.task-login #rcmloginpwd {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  font-size: 15px !important;
  color: #fff !important;
  background: rgba(255,255,255,0.05) !important;
  outline: none !important;
  transition: all 0.25s ease !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-appearance: none !important;
  height: auto !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

body.task-login #login-form input.form-control::placeholder,
body.task-login #rcmloginuser::placeholder,
body.task-login #rcmloginpwd::placeholder {
  color: rgba(255,255,255,0.3) !important;
  font-size: 15px !important;
}

body.task-login #login-form input.form-control:hover,
body.task-login #rcmloginuser:hover,
body.task-login #rcmloginpwd:hover {
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.07) !important;
}

body.task-login #login-form input.form-control:focus,
body.task-login #rcmloginuser:focus,
body.task-login #rcmloginpwd:focus {
  border-color: rgba(99,102,241,0.6) !important;
  background: rgba(255,255,255,0.08) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12), 0 0 16px rgba(99,102,241,0.08) !important;
  padding: 16px 18px !important;
}

/* ── Button ── */
body.task-login .formbuttons {
  all: unset !important;
  display: block !important;
  margin: 28px 0 0 0 !important;
  order: 1 !important;
}

body.task-login #rcmloginsubmit,
body.task-login .button.mainaction {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px 32px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  text-align: center !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 20px rgba(99,102,241,0.35) !important;
  line-height: 1.5 !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  text-transform: none !important;
  position: relative !important;
  overflow: hidden !important;
}

body.task-login #rcmloginsubmit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,0.45) !important;
  filter: brightness(1.1) !important;
}

body.task-login #rcmloginsubmit:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3) !important;
}

/* ── Divider line above footer ── */
body.task-login .formbuttons::after {
  content: "" !important;
  display: block !important;
  height: 1px !important;
  background: rgba(255,255,255,0.06) !important;
  margin-top: 32px !important;
}

/* ── Footer ── */
body.task-login #login-footer {
  all: unset !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 16px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.25) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  order: 2 !important;
}

body.task-login #login-footer a {
  color: rgba(167,139,250,0.6) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}

body.task-login #login-footer a:hover {
  color: #a78bfa !important;
}

/* ── Messages ── */
body.task-login #messagestack {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 999 !important;
}

body.task-login .noscriptwarning {
  text-align: center !important;
  padding: 12px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.4) !important;
}

/* ═══════════════════════════════════════
   Post-login accent
   ═══════════════════════════════════════ */
.listing li.selected > *,
.listing tr.selected td { background: #eef2ff !important; }
a.button.compose {
  background: #6366f1 !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* ═══════════════════════════════════════
   Mobile
   ═══════════════════════════════════════ */
@media (max-width: 480px) {
  body.task-login #layout-content {
    padding: 36px 24px 28px !important;
    border-radius: 22px !important;
    width: 100% !important;
  }
  body.task-login #layout-content::before {
    width: 44px !important; height: 44px !important;
    font-size: 24px !important; border-radius: 14px !important;
    margin-bottom: 24px !important;
  }
  body.task-login #login-form::before { font-size: 22px !important; }
  body.task-login #login-form::after { font-size: 13px !important; }
}