/* ==========================================================================
   Webmania Painel v2 — LOGIN design system (lean extract)
   --------------------------------------------------------------------------
   Enqueued ONLY on is_page('login') for page-login.php (.pn-login markup).
   Extracted from the former panel-v2.css (§1b tokens + §1c @font-face +
   §13 DS primitives + §14 Login DS). The full panel-v2.css reskin was
   removed when the WP panel pivoted to auth-only (PR #6837); the React app
   (Webmania_Painel) owns the post-login UI now.
   Font paths (../fonts/borna, ../fonts/inter) stay valid — same css/ dir.
   ========================================================================== */

/* Legacy :root base vars referenced by the login block (carried over verbatim
   from the original panel-v2.css :root so the extract is self-contained). */
:root {
  --pn-bg: #F4F7F5;
  --pn-card: #FFFFFF;
  --pn-border: #E2E8E4;
  --pn-shadow-card: 0 1px 2px rgba(10,41,33,0.04), 0 2px 8px rgba(10,41,33,0.04);
  --pn-shadow-hover: 0 2px 4px rgba(10,41,33,0.06), 0 12px 28px rgba(10,41,33,0.08);
  --wm-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
}

/* --------------------------------------------------------------------------
   ## 1b. DS Foundation tokens (Webmania v2)
   Full DS token set — extends the legacy :root block above.
   Source: colors_and_type.css + tokens.css (Design_System_v2/painel-fase1)
   -------------------------------------------------------------------------- */
:root {
  /* ============ BRAND CORE — Green Ramp ============ */
  --wm-green-900: #00251F;
  --wm-green-800: #003D33;
  --wm-green-700: #00695A;
  --wm-green-600: #008070;
  --wm-green-500: #0E9984;
  --wm-green-400: #2CB39C;
  --wm-green-300: #6FCEBD;
  --wm-green-200: #AEE3D6;
  --wm-green-100: #D6F0E8;
  --wm-green-50:  #EBF7F3;
  --wm-green-mist: #DFF5EC;
  --wm-green-vivid: #19C592;

  /* ============ NEUTRALS (warm-green undertone) ============ */
  --wm-white:   #FFFFFF;
  --wm-ink-50:  #F4F7F5;
  --wm-ink-100: #E8EDEA;
  --wm-ink-200: #D4DCD8;
  --wm-ink-300: #B3BDB8;
  --wm-ink-400: #8B9691;
  --wm-ink-500: #687370;
  --wm-ink-600: #4D5854;
  --wm-ink-700: #343D39;
  --wm-ink-800: #1F2724;
  --wm-ink-900: #0A110E;

  /* ============ NEUTRAL OBSERVATION — Sand Ramp ============
     Calm earth-tone neutral used to communicate "informação calma /
     observação / recepção" (e.g. Monitor module). Distinct from
     amber, which remains reserved for warnings/alerts. */
  --wm-sand-50:  #F5F1E8;
  --wm-sand-100: #EAE2CE;
  --wm-sand-600: #8C7B5C;
  --wm-sand-700: #6E5F44;
  --wm-sand-800: #4D3F26;

  /* ============ SEMANTIC ACCENTS ============ */
  --wm-amber-600: #B86F1A;
  --wm-amber-500: #D98A2B;
  --wm-amber-100: #FBEAD2;
  /* Bootstrap-legacy warning palette — retained for backward compat with --wm-warning-* aliases */
  --wm-amber-warn-bg:     #fff3cd;
  --wm-amber-warn-border: #ffc107;
  --wm-amber-warn-text:   #856404;
  --wm-red-600:   #C2413A;
  --wm-red-100:   #F8DDDB;
  --wm-purple-600: #7A4DB0;
  --wm-purple-100: #E8DEF5;
  --wm-teal-600:  #1E7A8A;
  --wm-teal-100:  #D4EAEF;
  --wm-blue-600:  #2C6FB8;
  --wm-blue-100:  #DAE7F5;
  --wm-slate-600: #5C6B78;
  --wm-slate-100: #E3E7EB;
  --wm-success:   var(--wm-green-600);
  --wm-success-bg: var(--wm-green-100);

  /* ============ SEMANTIC SURFACES ============ */
  --wm-bg:            var(--wm-white);
  --wm-bg-alt:        var(--wm-ink-50);
  --wm-bg-sunken:     var(--wm-ink-100);
  --wm-bg-brand:      var(--wm-green-700);
  --wm-bg-brand-deep: var(--wm-green-900);
  --wm-bg-brand-tint: var(--wm-green-50);

  --wm-fg:            var(--wm-ink-900);
  --wm-fg-muted:      var(--wm-ink-500);
  --wm-fg-subtle:     var(--wm-ink-400);
  --wm-fg-brand:      var(--wm-green-700);
  --wm-fg-on-brand:   var(--wm-white);
  --wm-fg-on-brand-muted: rgba(255, 255, 255, 0.72);

  --wm-border-strong: var(--wm-ink-300);
  --wm-border-brand:  var(--wm-green-600);

  /* ============ TYPOGRAPHY ============ */
  --wm-font-display: 'Borna', 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
  --wm-font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale */
  --wm-text-xs:    11px;
  --wm-text-sm:    13px;
  --wm-text-base:  15px;
  --wm-text-md:    17px;
  --wm-text-lg:    20px;
  --wm-text-xl:    24px;
  --wm-text-2xl:   32px;
  --wm-text-3xl:   42px;
  --wm-text-4xl:   56px;
  --wm-text-5xl:   72px;
  --wm-text-6xl:   96px;
  --wm-text-display: 128px;

  /* Leading */
  --wm-leading-tight:   1.08;
  --wm-leading-snug:    1.22;
  --wm-leading-normal:  1.48;
  --wm-leading-relaxed: 1.62;

  /* Tracking */
  --wm-tracking-tight:   -0.025em;
  --wm-tracking-snug:    -0.012em;
  --wm-tracking-normal:  0;
  --wm-tracking-wide:    0.06em;
  --wm-tracking-caps:    0.14em;

  /* Font weights */
  --wm-fw-regular:  400;
  --wm-fw-medium:   500;
  --wm-fw-semibold: 600;
  --wm-fw-bold:     700;

  /* ============ SPACING (4px base) ============ */
  --wm-space-0:   0;
  --wm-space-1:   4px;
  --wm-space-2:   8px;
  --wm-space-3:   12px;
  --wm-space-4:   16px;
  --wm-space-5:   20px;
  --wm-space-6:   24px;
  --wm-space-8:   32px;
  --wm-space-10:  40px;
  --wm-space-12:  48px;
  --wm-space-16:  64px;
  --wm-space-20:  80px;
  --wm-space-24:  96px;
  --wm-space-32:  128px;

  /* ============ RADII ============ */
  --wm-radius-xs:   4px;
  --wm-radius-sm:   6px;
  --wm-radius-md:   10px;
  --wm-radius-lg:   14px;
  --wm-radius-xl:   20px;
  --wm-radius-2xl:  28px;
  --wm-radius-pill: 999px;

  /* ============ ELEVATION (verde-tinted, never pure black) ============ */
  --wm-shadow-xs:    0 1px 2px rgba(10, 41, 33, 0.06);
  --wm-shadow-sm:    0 2px 6px rgba(10, 41, 33, 0.06), 0 1px 2px rgba(10, 41, 33, 0.04);
  --wm-shadow-md:    0 6px 18px rgba(10, 41, 33, 0.08), 0 2px 4px rgba(10, 41, 33, 0.04);
  --wm-shadow-lg:    0 18px 40px rgba(10, 41, 33, 0.12), 0 6px 12px rgba(10, 41, 33, 0.06);
  --wm-shadow-xl:    0 32px 80px rgba(10, 41, 33, 0.18), 0 12px 24px rgba(10, 41, 33, 0.08);
  --wm-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* Glass / transparency */
  --wm-glass-light: rgba(255, 255, 255, 0.72);
  --wm-glass-brand: rgba(14, 89, 73, 0.72);
  --wm-glass-ink:   rgba(10, 15, 13, 0.64);
  --wm-blur-glass:  blur(18px) saturate(160%);

  /* ============ MOTION ============ */
  --wm-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --wm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --wm-ease-linear: linear;
  --wm-dur-fast:    120ms;
  --wm-dur-med:     220ms;
  --wm-dur-slow:    420ms;

  /* ============ Z-INDEX ============ */
  --wm-z-base:    1;
  --wm-z-sticky:  50;
  --wm-z-overlay: 100;
  --wm-z-modal:   200;
  --wm-z-toast:   300;
}

/* --------------------------------------------------------------------------
   ## 1c. @font-face — Borna (8 weights) + Inter Variable (2 faces)
   Relative paths from css/ → ../fonts/borna/ and ../fonts/inter/
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Borna';
  src: url('../fonts/borna/Borna-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Borna';
  src: url('../fonts/borna/Borna-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Borna';
  src: url('../fonts/borna/Borna-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Borna';
  src: url('../fonts/borna/Borna-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Borna';
  src: url('../fonts/borna/Borna-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Borna';
  src: url('../fonts/borna/Borna-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Borna';
  src: url('../fonts/borna/Borna-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Borna';
  src: url('../fonts/borna/Borna-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-Italic-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   ## 13. DS primitives
   Reusable low-level classes — used throughout Leva 2 (Empresas/Emissor)
   -------------------------------------------------------------------------- */

/* Mono / tabular numerals */
.pn-mono {
  font-family: var(--wm-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Eyebrow / label caps */
.pn-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--wm-tracking-caps);
  text-transform: uppercase;
  color: var(--wm-fg-muted);
}

/* Card surface */
.pn-card {
  background: var(--pn-card);
  border: 1px solid var(--pn-border);
  border-radius: 16px;
  box-shadow: var(--pn-shadow-card);
  transition: transform 220ms var(--wm-ease-out), box-shadow 220ms var(--wm-ease-out);
}
.pn-card.hoverable:hover {
  transform: translateY(-1px);
  box-shadow: var(--pn-shadow-hover);
}

/* Buttons */
.pn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-family: var(--wm-font-body);
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms;
  text-decoration: none;
}
.pn-btn-primary {
  background: var(--wm-green-600);
  color: #fff;
  border-color: var(--wm-green-600);
}
.pn-btn-primary:hover {
  background: var(--wm-green-700);
  border-color: var(--wm-green-700);
  color: #fff;
  text-decoration: none;
}
.pn-btn-ghost {
  background: var(--pn-card);
  border-color: var(--pn-border);
  color: var(--wm-fg);
}
.pn-btn-ghost:hover {
  background: var(--pn-bg);
  border-color: var(--wm-green-500);
  color: var(--wm-fg);
  text-decoration: none;
}
.pn-btn-danger {
  background: var(--wm-red-600);
  color: #fff;
  border-color: var(--wm-red-600);
}
.pn-btn-danger:hover {
  opacity: 0.88;
  color: #fff;
  text-decoration: none;
}
.pn-btn-sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}
.pn-btn[disabled],
.pn-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Pills / status badges */
.pn-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--wm-radius-pill);
  font-size: 11px;
  font-weight: 600;
  gap: 4px;
  white-space: nowrap;
}
.pn-pill.aut   { background: var(--wm-green-100); color: var(--wm-green-800); }
.pn-pill.proc  { background: var(--wm-blue-100);  color: var(--wm-blue-600); }
.pn-pill.rej   { background: var(--wm-red-100);   color: var(--wm-red-600); }
.pn-pill.canc  { background: var(--wm-slate-100); color: var(--wm-slate-600); }
.pn-pill.amber { background: var(--wm-amber-100); color: var(--wm-amber-600); }
.pn-pill.cont  { background: var(--wm-teal-100);  color: var(--wm-teal-600); }
.pn-pill.den   { background: var(--wm-purple-100); color: var(--wm-purple-600); }

/* Certificate status dots */
.pn-cert-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--wm-radius-pill);
}
.pn-cert-dot.ok   { background: var(--wm-green-600); }
.pn-cert-dot.bad  { background: var(--wm-red-600); }
.pn-cert-dot.warn { background: var(--wm-amber-600); }

/* Alert bars */
.pn-alertbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid;
}
.pn-alertbar.warn { background: var(--wm-amber-100); border-color: var(--wm-amber-600); color: var(--wm-amber-600); }
.pn-alertbar.info { background: var(--wm-blue-100);  border-color: var(--wm-blue-600);  color: var(--wm-blue-600); }
.pn-alertbar.err  { background: var(--wm-red-100);   border-color: var(--wm-red-600);   color: var(--wm-red-600); }

/* Stat cards */
.pn-statcard {
  background: var(--pn-card);
  border: 1px solid var(--pn-border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pn-statcard-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--wm-tracking-caps);
  text-transform: uppercase;
  color: var(--wm-fg-muted);
}
.pn-statcard-num {
  font-family: var(--wm-font-display);
  font-size: 36px;
  font-weight: 500;
  color: var(--wm-fg);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.pn-statcard-meta {
  font-size: 12px;
  color: var(--wm-fg-muted);
}
.pn-statcard.tone-warn {
  border-color: var(--wm-amber-600);
  background: linear-gradient(160deg, var(--wm-amber-100) 0%, var(--pn-card) 100%);
}
.pn-statcard.tone-good {
  border-color: var(--wm-green-600);
}

/* --------------------------------------------------------------------------
   ## 14. Login DS v2
   New login markup: .pn-login > .pn-login-card > .pn-login-form + .pn-login-aside
   -------------------------------------------------------------------------- */

/* Defensive reset — app.css line 3814 has a global `aside { position: fixed;
   margin-left: -240px; height: 100%; margin-top: 60px; }` rule used by the
   legacy product sidebar. If any consumer keeps an <aside> tag inside the
   login card, neutralize it here so the grid stays intact. */
.pn-login aside,
.pn-login .pn-login-aside,
aside.pn-login-aside {
  position: static;
  margin: 0;
  height: auto;
}

/* Stripe-style centered card on a decorative tinted backdrop.
   `position: fixed; inset: 0` keeps the takeover (escapes the legacy .wrap
   container in header.php without touching theme PHP), but instead of
   filling edge-to-edge with the card itself, we center a card on top of a
   mesh-gradient backdrop. */
.pn-login {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  font-family: var(--wm-font-body);
  background-color: var(--wm-ink-50);
  background-image:
    radial-gradient(ellipse 1000px 700px at 8% 14%, rgba(46, 179, 156, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 800px 700px at 92% 86%, rgba(0, 105, 90, 0.10) 0%, transparent 60%);
}

/* Very subtle SVG wave pattern — kept calm so the card reads as the focus. */
.pn-login::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='none'><g fill='none' stroke='%2300695A' stroke-width='1'><path d='M-100 140 Q 250 60 500 160 T 1300 110' /><path d='M-100 280 Q 280 200 520 290 T 1300 240' /><path d='M-100 420 Q 300 340 540 430 T 1300 380' /><path d='M-100 560 Q 280 480 520 570 T 1300 520' /><path d='M-100 700 Q 300 620 540 710 T 1300 660' /></g></svg>");
  background-size: cover;
}

/* Centered card with internal split (form + slogan aside).
   Stripe-style: card sits on top of the decorative tinted backdrop,
   contained and elevated. */
.pn-login-card {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--pn-card);
  border: 1px solid rgba(10, 41, 33, 0.06);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(10, 41, 33, 0.03),
    0 12px 32px rgba(10, 41, 33, 0.06),
    0 32px 80px rgba(10, 41, 33, 0.05);
  overflow: hidden;
  min-height: 580px;
}


/* Left column — form area inside the card.
   Vertically centered, horizontally centered on a constrained inner stack
   (max-width 380px) so logo / title / fields / button / status all align
   on the same vertical axis. */
.pn-login-form {
  padding: 44px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  justify-content: center;
  box-sizing: border-box;
}
/* Each block inside spans the inner stack width. */
.pn-login-form > .pn-logo,
.pn-login-form > .pn-login-title,
.pn-login-form > .pn-login-fields,
.pn-login-form > .pn-login-row,
.pn-login-form > .pn-login-submit,
.pn-login-form > .pn-login-2fa-note,
.pn-login-form > .pn-login-status,
.pn-login-form > .warning-box {
  width: 100%;
  max-width: 380px;
}
.pn-login-form > .pn-logo {
  height: 22px;
  width: auto;
  max-width: 380px;
}
.pn-login-title {
  text-align: center;
}
.pn-login-row,
.pn-login-2fa-note {
  text-align: center;
}
.pn-login-status {
  justify-content: center;
}
/* Footer pinned at the bottom while the rest of the column stays centered. */
.pn-login-form > .pn-login-foot {
  margin-top: auto;
  width: 100%;
}

/* SSL badge */
.pn-login-ssl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wm-fg-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Institutional pitch headline above the wordmark (OpenAI Platform-style).
   Sits at the top of the form column, large, neutral dark gray (not brand
   green), with generous breathing room before the logo. */
.pn-login-pitch {
  font-family: var(--wm-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--wm-ink-900);
  margin: 0 0 32px;
  max-width: 380px;
}

/* Logo wordmark */
.pn-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: none;
  /* Legacy text-mode styles kept for any consumer that still renders the
     wordmark via <span> instead of <img> — harmless when the element is <img>. */
  font-family: var(--wm-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--wm-green-700);
  line-height: 1;
}
.pn-logo sup {
  font-style: normal;
  font-size: 9px;
  font-weight: 400;
  margin-left: 2px;
  transform: translateY(-7px);
  display: inline-block;
  opacity: 0.7;
}

/* Heading + sub */
.pn-login-title {
  font-family: var(--wm-font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--wm-fg);
  margin: 8px 0 0;
  line-height: 1.15;
}
.pn-login-sub {
  font-family: var(--wm-font-body);
  font-size: 13.5px;
  color: var(--wm-fg-muted);
  margin-bottom: 8px;
  margin-top: 0;
}

/* Field group */
.pn-login-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pn-login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pn-login-field label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wm-fg-muted);
}
.pn-login-field input {
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--pn-border);
  background: var(--wm-white);
  font-family: var(--wm-font-body);
  font-size: 14px;
  color: var(--wm-fg);
  outline: none;
  transition: border-color 160ms, box-shadow 160ms;
  -webkit-appearance: none;
}
.pn-login-field input:focus {
  border-color: var(--wm-green-600);
  box-shadow: 0 0 0 3px rgba(0, 105, 90, 0.18);
}

/* Inline row (forgot / steps) */
.pn-login-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}

/* Forgot link */
.pn-login-forgot { color: var(--wm-fg-muted); }
.pn-login-forgot a {
  color: var(--wm-green-700);
  font-weight: 600;
  text-decoration: none;
}
.pn-login-forgot a:hover { text-decoration: underline; }

/* Primary submit button — DS v2 primary green (--wm-green-600).
   Hover steps up to --wm-green-700, matching the .pn-btn-primary spec.
   The aggressive resets below cancel any chrome the theme legacy stack
   might inject (OS button skin, border-image, focus rings, text-shadow,
   inset shadow) that would otherwise show as a faint white line. */
.pn-login-submit,
.pn-login-submit:focus,
.pn-login-submit:active,
.pn-login-submit:hover {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0 !important;
  border-image: none !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
}
.pn-login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  width: 100%;
  background-color: var(--wm-green-600);
  color: #fff;
  font-family: var(--wm-font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 160ms;
}
.pn-login-submit:hover { background: var(--wm-green-700); }
.pn-login-submit:disabled,
.pn-login-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 2FA WhatsApp explainer — discreet inline note, no card chrome.
   Pure visual disclosure of behaviour the backend already implements
   via Twilio. Does NOT add any new login mechanism. */
.pn-login-2fa-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--wm-fg-muted);
}
.pn-login-2fa-note svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

/* System status strip — three live service indicators below the form.
   Each item is a clickable anchor (status page) with a colored dot.
   Default state is grey ("verificando…"). The dot only paints green
   after a confirmed "ok" comes back from the backend proxy. */
.pn-login-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--wm-fg-muted);
}
.pn-login-status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: color 160ms;
}
.pn-login-status-item:hover,
.pn-login-status-item:focus-visible {
  color: var(--wm-fg);
  text-decoration: none;
}
.pn-login-status-item:focus-visible {
  outline: 2px solid var(--wm-green-500);
  outline-offset: 2px;
  border-radius: 4px;
}
.pn-login-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--wm-ink-300);
  flex-shrink: 0;
  transition: background 220ms;
}
.pn-login-status-item[data-status="ok"]       .pn-login-status-dot { background: var(--wm-green-600); }
.pn-login-status-item[data-status="degraded"] .pn-login-status-dot { background: var(--wm-amber-600); }
.pn-login-status-item[data-status="down"]     .pn-login-status-dot { background: var(--wm-red-600); }

/* Footer / copyright — no divider; breathing room separates it from status. */
.pn-login-foot {
  font-size: 11px;
  color: var(--wm-fg-muted);
  margin-top: auto;
  padding-top: 12px;
  text-align: center;
}
.pn-login-foot b {
  color: var(--wm-fg);
  font-weight: 600;
}

/* Aside — right half of the card. Slogan + stats row, centered both axes. */
.pn-login-aside {
  background:
    radial-gradient(ellipse at 78% 18%, rgba(46, 179, 156, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 12% 82%, rgba(0, 37, 31, 0.55) 0%, transparent 60%),
    linear-gradient(155deg, var(--wm-green-700) 0%, var(--wm-green-900) 100%);
  color: #fff;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Wavy lines pattern removed from the aside (product request — the slogan
   panel reads cleaner as a flat gradient without the decorative SVG strokes).
   .pn-login-aside keeps position:relative/overflow:hidden below only for its
   gradient background and the > * z-index stacking, no ::before is needed. */

/* Constrain aside content so headlines don't sprawl on ultra-wide monitors. */
.pn-login-aside > * {
  max-width: 560px;
  position: relative; /* sit above the decorative pattern */
  z-index: 1;
}

/* Top spacer kept empty so the slogan reads as the visual anchor */
.pn-login-aside-top { min-height: 24px; }

/* Slogan — brand voice, the only content in the aside. */
.pn-login-aside-slogan {
  font-family: var(--wm-font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.pn-login-aside-slogan span { display: block; }
.pn-login-aside-slogan span + span { margin-top: 4px; }
.pn-login-aside-slogan span.accent {
  font-style: italic;
  color: var(--wm-green-300);
  font-weight: 600;
}

/* Sub-tagline below the slogan — quiet supporting line */
.pn-login-aside-tagline {
  font-family: var(--wm-font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 22px;
  max-width: 420px;
}

.pn-login-aside-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.pn-login-aside-title {
  font-family: var(--wm-font-display);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 12px 0 14px;
}
.pn-login-aside-title em {
  font-style: italic;
  color: var(--wm-green-300);
  font-weight: 600;
}

.pn-login-aside-body {
  font-family: var(--wm-font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 380px;
}

.pn-login-aside-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wm-green-300);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  margin-top: 22px;
  transition: gap 160ms;
}
.pn-login-aside-cta:hover {
  gap: 8px;
  color: var(--wm-green-300);
  text-decoration: none;
}

/* Progress dots */
.pn-login-aside-dots {
  display: flex;
  gap: 6px;
}
.pn-login-aside-dots i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--wm-radius-pill);
  background: rgba(255, 255, 255, 0.3);
  transition: width 200ms, background 200ms;
  font-style: normal;
}
.pn-login-aside-dots i.on {
  background: var(--wm-green-300);
  width: 18px;
}

/* Metrics row */
.pn-login-aside-meta {
  display: flex;
  gap: 22px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.pn-login-aside-meta div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pn-login-aside-meta b {
  font-family: var(--wm-font-display);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pn-login-aside-meta span {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
}

/* Client logo wall — bottom half of the aside.
   Logos are normalised to monochrome white at 70% opacity, hovering to
   100%. They are decorative (no link, no badge). The grid is 4 columns
   on desktop, drops to 3 on mobile. */
.pn-login-clients {
  margin-top: auto;
}
.pn-login-clients-title {
  font-family: var(--wm-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 16px;
}
.pn-login-clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 22px;
  align-items: center;
}
.pn-login-clients-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  opacity: 0.7;
  transition: opacity 220ms;
}
.pn-login-clients-item:hover {
  opacity: 1;
}
.pn-login-clients-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Normalise to monochrome white regardless of source colour. */
  filter: brightness(0) invert(1);
}

/* Recover-state extras */
.pn-login-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--wm-fg-muted);
  text-decoration: none;
}
.pn-login-back:hover {
  color: var(--wm-green-700);
  text-decoration: none;
}

.pn-login-steps {
  display: inline-flex;
  gap: 4px;
  font-family: var(--wm-font-mono);
  font-size: 12px;
  color: var(--wm-fg-muted);
}
.pn-login-steps b { color: var(--wm-green-700); }

/* Suppress legacy login classes if they ever leak */
.pn-login .footer-login,
.pn-login .login-page,
.pn-login .login-card { display: none !important; }

/* Warning box inside login (for wmbr_notices) */
.pn-login .warning-box:empty { display: none; }
.pn-login .warning-box { margin: 0; }

/* Responsive — stack columns below 680px */
@media (max-width: 768px) {
  /* Aside drops below the form (per spec, viewport < 768px). */
  .pn-login-card {
    grid-template-columns: 1fr;
  }
  .pn-login-form {
    padding: 32px 24px;
  }
  .pn-login-aside {
    padding: 32px 24px;
  }
  .pn-login-pitch {
    font-size: 22px;
    margin-bottom: 24px;
  }
  .pn-login-aside-slogan {
    font-size: 32px;
  }
  /* Logo wall: 3 columns on mobile, hide extras to keep it compact. */
  .pn-login-clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .pn-login-clients-item:nth-child(n+10) {
    display: none;
  }
}