/* ============================================================
   SeleFin - Sele Gestor Financeiro
   Identidade visual (Design System Sele, manual 2021).
   Tokens oficiais: Azul Institucional #002F8E, Azul Brilhante #007FFF,
   Verde-Limao #AEE046, Cinza #6C6764. Fonte de marca Akrobat
   (fallback Montserrat). Gerado a partir do bundle Claude Design.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Azul Institucional (brand core) ---- */
  --blue-50:  #E6EDF7;  --blue-100: #C4D4EC; --blue-200: #8AA8D7;
  --blue-300: #4F7BC0;  --blue-400: #1E52A8; --blue-500: #0A3C95;
  --blue-600: #002F8E;  /* Azul Institucional */
  --blue-700: #00276F;  --blue-800: #001E54; --blue-900: #001436;

  /* ---- Azul Brilhante (secondary / digital) ---- */
  --bright-50:  #E6F2FF; --bright-100: #C2E0FF; --bright-200: #90C8FF;
  --bright-300: #5CACFF; --bright-400: #2E94FF; --bright-500: #007FFF;
  --bright-600: #0067D6; --bright-700: #0050A8;

  /* ---- Verde-Limao (accent) ---- */
  --lime-50:  #F4FAE0; --lime-100: #E8F5C0; --lime-200: #D9EE93;
  --lime-300: #C9E76B; --lime-400: #BBE253; --lime-500: #AEE046;
  --lime-600: #8CBE2E; --lime-700: #6B9420;

  /* ---- Cinza (neutral, ancorado em #6C6764) ---- */
  --gray-0: #FFFFFF; --gray-25: #FAFAF9; --gray-50: #F5F5F3; --gray-100: #EBEAE8;
  --gray-200: #DBD9D6; --gray-300: #C0BDB9; --gray-400: #98948F; --gray-500: #7C7772;
  --gray-600: #6C6764; --gray-700: #4C4945; --gray-800: #322F2C; --gray-900: #1B1917;

  /* ---- Money positive (Entrada / Receita) ---- */
  --green-50: #E7F5EC; --green-100: #C7E7D2; --green-300: #71C492;
  --green-500: #1F9D57; --green-600: #178049; --green-700: #115F37;
  /* ---- Money negative (Saida / Despesa / Vencido) ---- */
  --red-50: #FBEAEA; --red-100: #F5CFD0; --red-300: #E88E92;
  --red-500: #D83A42; --red-600: #BC2F37; --red-700: #93242B;
  /* ---- Warning (Pendente / A vencer) ---- */
  --amber-50: #FBF1DD; --amber-100: #F6E0B4; --amber-300: #ECC169;
  --amber-500: #E0992B; --amber-600: #BE7C18; --amber-700: #92600F;

  /* ---- Semantic aliases ---- */
  --brand: var(--blue-600); --brand-strong: var(--blue-700); --brand-stronger: var(--blue-800);
  --brand-soft: var(--blue-50); --brand-soft-2: var(--blue-100); --brand-contrast: #FFFFFF;
  --brand-navy: var(--blue-900);
  --brand-bright: var(--bright-500); --brand-bright-strong: var(--bright-600); --brand-bright-soft: var(--bright-50);
  --accent: var(--lime-500); --accent-strong: var(--lime-600); --accent-soft: var(--lime-50);
  --accent-contrast: var(--blue-600);
  --brand-gradient: linear-gradient(135deg, #007FFF 0%, #002F8E 100%);

  --surface-app: var(--gray-50); --surface-card: var(--gray-0); --surface-sunken: var(--gray-100);
  --surface-raised: var(--gray-0); --surface-inverse: var(--blue-600);
  --surface-hover: var(--gray-50); --surface-selected: var(--blue-50);

  --border-subtle: var(--gray-200); --border-default: var(--gray-300); --border-strong: var(--gray-400);
  --border-brand: var(--blue-400); --border-focus: var(--blue-600);

  --text-strong: var(--gray-900); --text-body: var(--gray-700); --text-muted: var(--gray-500);
  --text-subtle: var(--gray-400); --text-on-brand: #FFFFFF; --text-on-inverse: #E7EEF8;
  --text-link: var(--bright-600);

  --pos: var(--green-600); --pos-soft: var(--green-50); --neg: var(--red-600); --neg-soft: var(--red-50);
  --warn: var(--amber-600); --warn-soft: var(--amber-50); --info: var(--bright-600); --info-soft: var(--bright-50);
  --status-ok: var(--green-600); --status-pending: var(--amber-600); --status-error: var(--red-600); --status-neutral: var(--gray-500);
  --ring: 0 0 0 3px color-mix(in oklch, var(--blue-600) 34%, transparent);

  /* ---- Typography ---- */
  --font-sans: "Akrobat", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-numeric: var(--font-sans);
  --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.875rem;
  --text-base: 0.9375rem; --text-lg: 1.0625rem; --text-xl: 1.3125rem; --text-2xl: 1.625rem;
  --text-3xl: 2rem; --text-4xl: 2.625rem; --text-5xl: 3.25rem;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-tight: -0.018em; --tracking-snug: -0.01em; --tracking-normal: 0;
  --tracking-wide: 0.04em; --tracking-caps: 0.07em;

  /* ---- Spacing / radius / layout (grid 4px) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem; --space-9: 3rem; --space-10: 4rem; --space-12: 5rem;
  --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --radius-2xl: 22px; --radius-pill: 999px; --radius-circle: 50%;
  --control-sm: 30px; --control-md: 38px; --control-lg: 46px;
  --sidebar-w: 248px; --topbar-h: 60px; --container-max: 1320px;

  /* ---- Elevation (sombras frias) ---- */
  --shadow-color: 214 32% 24%;
  --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.06);
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 1px 3px hsl(var(--shadow-color) / 0.08);
  --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.06), 0 4px 10px hsl(var(--shadow-color) / 0.08);
  --shadow-lg: 0 8px 18px hsl(var(--shadow-color) / 0.10), 0 2px 6px hsl(var(--shadow-color) / 0.06);
  --shadow-xl: 0 18px 40px hsl(var(--shadow-color) / 0.16), 0 4px 12px hsl(var(--shadow-color) / 0.08);
  --elevation-card: var(--shadow-sm); --elevation-raised: var(--shadow-md);
  --elevation-overlay: var(--shadow-lg); --elevation-modal: var(--shadow-xl);

  /* ---- Motion (calmo, businesslike) ---- */
  --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-colors: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* ---- Tabular figures helper (valores monetarios alinhados) ---- */
.is-numeric, [data-numeric] {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
}

/* ---- Money coloring ---- */
.money-pos { color: var(--pos); }
.money-neg { color: var(--neg); }

/* ---- Eyebrow / column-head label ---- */
.eyebrow {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
}

@keyframes sele-spin { to { transform: rotate(360deg); } }
@keyframes sele-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

::selection { background: var(--blue-100); color: var(--blue-900); }

/* ============================================================
   App-level: aplica a identidade ao MudBlazor (alem do MudTheme C#)
   ============================================================ */
html, body { font-family: var(--font-sans); background: var(--surface-app); }

/* Sidebar (MudDrawer) navy institucional + logo branca no topo */
.sele-drawer .mud-drawer-content { background: var(--brand); }
.sele-drawer .mud-navmenu { padding-top: var(--space-3); }
.sele-drawer-logo {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid color-mix(in oklch, #FFFFFF 16%, transparent);
}
.sele-drawer-logo img { height: 30px; width: auto; }
.sele-drawer .mud-navmenu .mud-nav-link { color: var(--text-on-inverse); border-radius: var(--radius-md); margin: 2px var(--space-3); }
.sele-drawer .mud-navmenu .mud-nav-link:hover { background: color-mix(in oklch, #FFFFFF 12%, transparent); }
.sele-drawer .mud-navmenu .mud-nav-link.active {
  background: color-mix(in oklch, #FFFFFF 16%, transparent); color: #FFFFFF;
  border-left: 3px solid var(--accent);
}
.sele-drawer .mud-navmenu .mud-nav-link .mud-icon-root { color: var(--text-on-inverse); }
.sele-drawer .mud-nav-group .mud-nav-link-text,
.sele-drawer .mud-navmenu .mud-nav-group > .mud-nav-link { color: #C4D4EC; }

/* App bar branca com texto institucional */
.sele-appbar.mud-appbar { background: var(--surface-card); color: var(--text-strong); border-bottom: 1px solid var(--border-subtle); }
.sele-appbar .mud-icon-button { color: var(--text-body); }
.sele-appbar-logo { display: inline-flex; align-items: center; margin-left: 6px; line-height: 0; }
.sele-appbar-logo img { height: 30px; width: auto; display: block; }
@media (max-width: 600px) { .sele-appbar-logo img { height: 26px; } }

/* Cards com a sombra e raio da marca */
.mud-paper { border-radius: var(--radius-lg); }

/* ---- Login: fundo institucional + logo + card ---- */
.sele-login-bg {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-6); padding: var(--space-6);
  background: var(--brand-gradient);
}
.sele-login-logo { height: 44px; width: auto; }
.sele-login-card {
  width: 100%; max-width: 400px; background: var(--surface-card);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: var(--space-8);
  animation: sele-fade-in var(--dur-base) var(--ease-out);
}

/* ---- Campos de formulario da marca (login e telas de senha) ---- */
.sele-field-label {
  display: block; font-size: var(--text-sm); color: var(--text-body);
  font-weight: var(--weight-medium); margin-bottom: var(--space-2);
}
.sele-field {
  width: 100%; box-sizing: border-box; height: var(--control-md);
  padding: 0 var(--space-3); margin-bottom: var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--text-md); color: var(--text-strong);
  background: var(--surface-card); transition: var(--transition-colors), box-shadow var(--dur-fast) var(--ease-standard);
}
.sele-field:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }
.sele-btn-primary {
  width: 100%; height: var(--control-lg); border: 0; border-radius: var(--radius-md);
  background: var(--brand); color: var(--text-on-brand); font-family: var(--font-sans);
  font-size: var(--text-base); font-weight: var(--weight-semibold); cursor: pointer;
  transition: var(--transition-colors);
}
.sele-btn-primary:hover { background: var(--brand-strong); }
.sele-login-erro {
  background: var(--neg-soft); color: var(--red-700); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); margin-bottom: var(--space-4); font-size: var(--text-sm);
}

/* ---- Login split (kit SeleFin): painel de marca + formulario ---- */
.sele-login-split { display: flex; min-height: 100vh; }
.sele-login-brand {
  flex: 1 1 46%; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #002F8E 0%, #001A4F 55%, #00091F 100%);
  display: flex; flex-direction: column; justify-content: space-between; padding: 48px 52px; color: #fff;
}

/* Lockup grande e nitido (icone em alta + wordmark vetorial) */
.sele-login-lockup { display: flex; align-items: center; gap: 14px; }
.sele-login-lockup img { height: 62px; width: auto; }
.sele-login-lockup .wm { font-size: 44px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; }
.sele-login-lockup .wm i { color: var(--accent); font-style: normal; }
.sele-login-brand::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.16), transparent 55%);
}
.sele-login-brand > * { position: relative; z-index: 1; }
.sele-login-brand-logo { height: 60px; width: auto; align-self: flex-start; }
.sele-login-eyebrow {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.8);
}
.sele-login-eyebrow .bar { height: 3px; width: 18px; background: var(--accent); border-radius: 2px; }
.sele-login-headline { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #fff; max-width: 380px; }
.sele-login-lede { font-size: 15px; color: rgba(255,255,255,.72); margin-top: 14px; max-width: 400px; line-height: 1.6; }
.sele-login-values { display: flex; gap: 22px; margin-top: 26px; }
.sele-login-values .v { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,.88); }
.sele-login-version { font-size: 12px; color: rgba(255,255,255,.45); }
.sele-login-formwrap { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; background: var(--surface-card); padding: 32px; }
.sele-login-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 18px; animation: sele-fade-in var(--dur-base) var(--ease-out); }
.sele-input-wrap { position: relative; display: flex; align-items: center; }
.sele-input-wrap .pfx { position: absolute; left: 11px; display: inline-flex; color: var(--text-subtle); pointer-events: none; }
.sele-input-wrap .sele-field { padding-left: 38px; margin-bottom: 0; }
.sele-login-row { display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 880px) { .sele-login-brand { display: none; } }

/* ============================================================
   Landing page publica (SeleFin)
   ============================================================ */
.lp { font-family: var(--font-sans); color: var(--text-body); background: var(--surface-card); }
.lp-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center;
  justify-content: space-between; padding: 22px clamp(20px, 5vw, 64px); }
.lp-nav img { height: 34px; }
.lp-nav-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px;
  border-radius: var(--radius-pill); background: rgba(255,255,255,.12); color: #fff; font-weight: 600;
  font-size: var(--text-sm); border: 1px solid rgba(255,255,255,.28); text-decoration: none; transition: var(--transition-colors); }
.lp-nav-cta:hover { background: rgba(255,255,255,.22); }

.lp-hero { position: relative; overflow: hidden; color: #fff; padding: 132px clamp(20px,5vw,64px) 92px;
  background: linear-gradient(160deg, #002F8E 0%, #001A4F 55%, #00091F 100%); }
.lp-hero::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 100% 0%, rgba(0,127,255,.30), transparent 55%); }
.lp-hero::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 440px; height: 440px;
  background: url('img/brand/selefin-icon-white.png') no-repeat center / contain; opacity: .06; }
.lp-hero-inner { position: relative; max-width: 1160px; margin: 0 auto; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.lp-eyebrow .bar { width: 22px; height: 3px; background: var(--accent); border-radius: 2px; }
.lp-title { font-size: clamp(34px, 5vw, 56px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
  color: #fff; max-width: 740px; margin: 18px 0 0; }
.lp-title .hl { color: var(--accent); }
.lp-sub { font-size: clamp(16px, 1.5vw, 19px); color: rgba(255,255,255,.78); max-width: 600px; margin-top: 20px; line-height: 1.6; }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.lp-btn { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 26px; border: 0;
  border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-base); text-decoration: none; transition: var(--transition-control); }
.lp-btn-primary { background: var(--accent); color: var(--blue-800); }
.lp-btn-primary:hover { background: var(--lime-400); transform: translateY(-1px); }
.lp-btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.30); }
.lp-btn-ghost:hover { background: rgba(255,255,255,.18); }
.lp-values { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 42px; }
.lp-values .v { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); color: rgba(255,255,255,.9); }

.lp-section { max-width: 1160px; margin: 0 auto; padding: clamp(56px,8vw,92px) clamp(20px,5vw,64px); }
.lp-section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.lp-section-eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-bright); }
.lp-section-title { font-size: clamp(26px,3.2vw,36px); font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); margin-top: 10px; }
.lp-section-sub { font-size: var(--text-base); color: var(--text-muted); margin-top: 12px; line-height: 1.6; }

.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  padding: 28px; box-shadow: var(--elevation-card); transition: var(--transition-control); }
.lp-card:hover { transform: translateY(-3px); box-shadow: var(--elevation-overlay); border-color: var(--border-brand); }
.lp-card-ico { width: 46px; height: 46px; border-radius: var(--radius-md); display: inline-flex; align-items: center;
  justify-content: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 16px; }
.lp-card h3 { font-size: var(--text-lg); color: var(--text-strong); margin: 0; }
.lp-card p { font-size: var(--text-sm); color: var(--text-muted); margin-top: 8px; line-height: 1.6; }

.lp-cta-band { position: relative; overflow: hidden; text-align: center; color: #fff;
  background: linear-gradient(135deg, #002F8E, #001436); border-radius: var(--radius-2xl); padding: clamp(40px,6vw,64px); }
.lp-cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(100% 100% at 0% 0%, rgba(0,127,255,.30), transparent 50%); }
.lp-cta-band > * { position: relative; }
.lp-cta-band h2 { font-size: clamp(26px,3.4vw,38px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.lp-cta-band p { color: rgba(255,255,255,.80); margin-top: 12px; font-size: var(--text-base); }

.lp-footer { max-width: 1160px; margin: 0 auto; border-top: 1px solid var(--border-subtle);
  padding: 30px clamp(20px,5vw,64px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.lp-footer img { height: 26px; }
.lp-footer span { font-size: var(--text-xs); color: var(--text-muted); }

/* ---- Como funciona (passos numerados) ---- */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-step { padding: 28px 24px 24px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); }
.lp-step-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand); font-weight: 700;
  font-size: var(--text-base); margin-bottom: 14px; }
.lp-step h3 { font-size: var(--text-lg); color: var(--text-strong); margin: 0; }
.lp-step p { font-size: var(--text-sm); color: var(--text-muted); margin-top: 8px; line-height: 1.6; }

/* ---- Dores resolvidas ---- */
.lp-pains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-pain { display: flex; gap: 12px; align-items: flex-start; padding: 20px; background: var(--surface-sunken); border-radius: var(--radius-lg); }
.lp-pain .mud-icon-root { color: var(--neg); flex: none; margin-top: 2px; }
.lp-pain p { font-size: var(--text-sm); color: var(--text-body); margin: 0; line-height: 1.55; }

/* ---- FAQ (details/summary nativo) ---- */
.lp-faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.lp-faq-item { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 4px 22px; }
.lp-faq-item summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: var(--text-base);
  color: var(--text-strong); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after { content: "+"; font-size: 22px; color: var(--brand); flex: none; }
.lp-faq-item[open] summary::after { content: "\2212"; }
.lp-faq-item p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; margin: 0 0 18px; }

/* ---- Preco (sob consulta) ---- */
.lp-price { max-width: 560px; margin: 0 auto; text-align: center; background: var(--surface-sunken); border-radius: var(--radius-2xl); padding: clamp(32px,5vw,48px); }
.lp-price-value { font-size: clamp(28px,4vw,38px); font-weight: 800; color: var(--text-strong); letter-spacing: -.02em; margin-top: 8px; }
.lp-price p { color: var(--text-muted); margin-top: 10px; font-size: var(--text-base); }

/* ---- Credibilidade ---- */
.lp-credibility { max-width: 680px; margin: 0 auto; text-align: center; padding: 8px 24px; border-left: 3px solid var(--accent); }
.lp-credibility p { font-size: var(--text-lg); color: var(--text-strong); font-weight: 500; line-height: 1.5; margin: 0; }

/* ---- Formulario de contato ---- */
.lp-form-wrap { max-width: 720px; margin: 0 auto; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl); box-shadow: var(--elevation-card); padding: clamp(28px,5vw,44px); }
.lp-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lp-form-grid .lp-form-full { grid-column: 1 / -1; }
/* Honeypot: fora da tela, mas presente no layout (NUNCA display:none — alguns bots ignoram campos assim ocultos). */
.lp-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.lp-form-success { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 24px 0; }
.lp-form-success .mud-icon-root { color: var(--pos); font-size: 2.6rem; }

/* ---- Breakpoints da landing (equivalentes aos de .lp-grid) ---- */
@media (max-width: 1000px) {
  .lp-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-steps { grid-template-columns: repeat(2, 1fr); }
  .lp-pains { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lp-grid { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-pains { grid-template-columns: 1fr; }
  .lp-form-grid { grid-template-columns: 1fr; }
}

/* ---- Matriz de permissoes (papel x modulo) ---- */
.sele-matriz { width: 100%; border-collapse: collapse; }
.sele-matriz th, .sele-matriz td { padding: 9px 16px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.sele-matriz thead th {
  text-align: left; background: var(--surface-sunken); color: var(--text-muted);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.sele-matriz thead th:not(:first-child) { text-align: center; }
.sele-matriz td:first-child { color: var(--text-strong); font-weight: 500; }

/* ============================================================
   Dashboard (telas do UI kit SeleFin)
   ============================================================ */
.sele-dash { display: flex; flex-direction: column; gap: 18px; max-width: 1280px; margin: 0 auto; }
.sele-dash-grid-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sele-dash-grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }
.sele-dash-grid-2b { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) {
  .sele-dash-grid-kpi { grid-template-columns: repeat(2, 1fr); }
  .sele-dash-grid-2, .sele-dash-grid-2b { grid-template-columns: 1fr; }
}

/* StatCard (KPI) */
.sele-statcard { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--elevation-card);
  padding: var(--space-5); min-width: 0; }
.sele-statcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sele-statcard-label { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-medium); }
.sele-statcard-chip { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  flex: none; border-radius: var(--radius-md); }
.sele-statcard-chip .mud-icon-root { font-size: 1.1rem; }
.sele-statcard-chip.accent-brand { background: var(--brand-soft); color: var(--brand-strong); }
.sele-statcard-chip.accent-positive { background: var(--green-50); color: var(--green-600); }
.sele-statcard-chip.accent-negative { background: var(--red-50); color: var(--red-600); }
.sele-statcard-chip.accent-warning { background: var(--amber-50); color: var(--amber-600); }
.sele-statcard-chip.accent-neutral { background: var(--gray-100); color: var(--gray-600); }
.sele-statcard-value-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sele-statcard-value { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--text-strong); }
.sele-statcard-delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.sele-statcard-foot { font-size: var(--text-xs); color: var(--text-subtle); }

/* Card com cabecalho (titulo / subtitulo / acoes) */
.sele-card { background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-card); }
.sele-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: var(--space-5) var(--space-5) var(--space-4); }
.sele-card-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); }
.sele-card-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.sele-card-body { padding: 0 var(--space-5) var(--space-5); }
.sele-card-body.flush { padding: 0; }

/* Linhas de lista (vencimentos / lancamentos) */
.sele-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-subtle); }
.sele-list-row:last-child { border-bottom: none; }
.sele-row-main { flex: 1; min-width: 0; }
.sele-row-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sele-row-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.sele-empty { padding: 26px 8px; text-align: center; color: var(--text-muted); font-size: var(--text-sm); }
.sele-icon-pill { width: 30px; height: 30px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.sele-icon-pill.pos { background: var(--green-50); color: var(--green-600); }
.sele-icon-pill.neg { background: var(--red-50); color: var(--red-600); }

/* Conciliacao: marca do banco + barra de progresso */
.sele-bankmark { width: 34px; height: 34px; flex: none; border-radius: 8px; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 12px; color: #fff; }
.sele-progress { height: 6px; border-radius: var(--radius-pill); background: var(--gray-100); overflow: hidden; }
.sele-progress > span { display: block; height: 100%; border-radius: var(--radius-pill); }
.tone-positive { background: var(--green-500); }
.tone-warning { background: var(--amber-500); }
.tone-negative { background: var(--red-500); }

/* Badge pequeno (dot) */
.sele-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600;
  padding: 3px 9px; border-radius: var(--radius-pill); }
.sele-badge.warning { background: var(--amber-50); color: var(--amber-700); }
.sele-badge.neutral { background: var(--gray-100); color: var(--gray-700); }
.sele-badge.positive { background: var(--green-50); color: var(--green-700); }
.sele-badge.negative { background: var(--red-50); color: var(--red-700); }
.sele-badge.info { background: var(--bright-50); color: var(--bright-700); }
.sele-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================================================
   Cabecalho de pagina (titulo + subtitulo + acoes)
   ============================================================ */
.sele-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sele-page-title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--text-strong);
  letter-spacing: var(--tracking-snug); margin: 0; line-height: var(--leading-snug); }
.sele-page-sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: 3px; }
.sele-page-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ============================================================
   Marca aplicada aos componentes MudBlazor (todas as telas)
   ============================================================ */
/* Cards / paineis no conteudo: borda fina + sombra fria + raio da marca */
.mud-main-content .mud-paper { border: 1px solid var(--border-subtle); box-shadow: var(--elevation-card); }
.mud-main-content .mud-paper.mud-elevation-0 { box-shadow: none; }

/* Tabelas: cabecalho "eyebrow", linhas com hover institucional */
.mud-table.mud-paper { overflow: hidden; }
.mud-table .mud-table-head .mud-table-cell {
  background: var(--surface-sunken); color: var(--text-muted);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}
.mud-table .mud-table-body .mud-table-cell {
  font-size: var(--text-sm); color: var(--text-body); border-bottom: 1px solid var(--border-subtle);
}
.mud-table-hover .mud-table-row:hover { background: var(--surface-hover) !important; }

/* Numeros (valor, moeda) com figuras tabulares onde marcado */
.mud-table-cell .is-numeric { font-variant-numeric: tabular-nums lining-nums; }

/* Tabs: indicador e item ativo na marca */
.mud-tabs .mud-tab.mud-tab-active { color: var(--brand); }
.mud-tabs .mud-tab-slider { background: var(--brand); }

/* Chips de status arredondados */
.mud-chip { border-radius: var(--radius-pill); font-weight: var(--weight-semibold); }

/* Alertas mais discretos, no raio da marca */
.mud-alert { border-radius: var(--radius-md); }

/* Botoes: peso e raio da marca */
.mud-button-root { font-weight: var(--weight-semibold); }

/* Dialogos no raio/sombra da marca */
.mud-dialog { border-radius: var(--radius-xl); box-shadow: var(--elevation-modal); }

/* Espacamento de pagina mais respiravel no container */
.mud-main-content .mud-container { padding-top: var(--space-2); }

/* ============================================================
   Central de Ajuda (/ajuda) - grid de topicos (Onda G)
   ============================================================ */
.sele-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sele-help-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.sele-help-card-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md); display: inline-flex;
  align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand-strong);
}
.sele-help-card-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); }
.sele-help-card-resumo { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); flex: 1; }
.sele-help-card-link { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
@media (max-width: 1100px) { .sele-help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sele-help-grid { grid-template-columns: 1fr; } }