/* =========================================================
   BLM Agenda — Plataforma
   CSS separado para acompanhar o app.js atual
   Estrutura:
   - index.html: containers/abas/IDs
   - app.js: dados e renderização
   - styles.css: identidade visual rígida
   ========================================================= */

:root {
  --page-bg: #f4f7fb;
  --card: #ffffff;
  --card-soft: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --border: rgba(226, 232, 240, .96);
  --border-soft: rgba(226, 232, 240, .72);
  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --purple: #7c3aed;
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 34px rgba(15, 23, 42, .055);
  --shadow-card: 0 10px 26px rgba(15, 23, 42, .045);
  --shadow-hero: 0 16px 38px rgba(15, 23, 42, .22);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --sidebar-w: 282px;
}

* { box-sizing: border-box; }

html {
  background: var(--page-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .08), transparent 26%),
    radial-gradient(circle at 92% 80%, rgba(96, 165, 250, .09), transparent 28%),
    var(--page-bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

button,
input,
select,
textarea { font: inherit; }

button { cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
}

.hidden { display: none !important; }

.muted,
.text-muted { color: var(--muted); }

.eyebrow,
.panel-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 6px;
  margin: 0 0 9px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #ffffff;
  color: var(--text);
  padding: 0 14px;
  outline: 0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea {
  min-height: 112px;
  padding: 13px 14px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder { color: #94a3b8; }

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(37, 99, 235, .48);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
  background: #ffffff;
}

button,
.btn-primary,
.btn-secondary,
.logout,
.btn-mini {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, background .16s ease, border-color .16s ease;
}

button:hover,
.btn-primary:hover,
.btn-mini:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(37, 99, 235, .20);
}

button:active { transform: translateY(0) scale(.985); }

button:disabled {
  cursor: not-allowed;
  opacity: .65;
  transform: none;
  box-shadow: none;
}

.btn-secondary,
.logout,
.btn-mini.dark {
  background: #ffffff;
  color: #1e293b;
  border-color: rgba(203, 213, 225, .92);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.btn-secondary:hover,
.logout:hover,
.btn-mini.dark:hover {
  border-color: rgba(37, 99, 235, .32);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}

.btn-mini.ok {
  background: #059669;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(5, 150, 105, .18);
}

.btn-mini {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 13px;
  font-size: 11px;
}

.msg,
.toast-msg {
  min-height: 20px;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.45;
}

.msg.success,
.toast-ok,
.sucesso { color: var(--success) !important; }

.erro,
.toast-erro { color: var(--danger) !important; }

/* Login */
.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .12), transparent 28%),
    radial-gradient(circle at 92% 80%, rgba(96, 165, 250, .12), transparent 28%),
    var(--page-bg);
}

.login-shell {
  width: min(1060px, 100%);
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 18px;
  align-items: stretch;
}

.login-hero,
.login-card {
  overflow: hidden;
  border-radius: 30px;
  box-shadow: var(--shadow-soft);
}

.login-hero {
  position: relative;
  min-height: 620px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
  background:
    radial-gradient(circle at 92% 4%, rgba(37, 99, 235, .34), transparent 28%),
    radial-gradient(circle at 74% 34%, rgba(96, 165, 250, .12), transparent 34%),
    linear-gradient(135deg, #1e293b 0%, #0f172a 55%, #020617 100%);
  box-shadow: var(--shadow-hero);
}

.login-hero::before,
.login-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(37, 99, 235, .14);
  pointer-events: none;
}

.login-hero::before { top: -42px; right: -32px; width: 168px; height: 168px; }
.login-hero::after { top: 52px; right: 46px; width: 86px; height: 86px; }

.login-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  font-weight: 750;
}

.login-brand img {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  object-fit: cover;
}

.login-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.login-copy .panel-kicker {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(96, 165, 250, .12);
  color: #60a5fa;
}

.login-copy h1 {
  max-width: 620px;
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.login-copy p:not(.panel-kicker) {
  max-width: 560px;
  margin: 0;
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.6;
}

.login-badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.login-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
}

.login-card {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 36px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .96);
}

.login-card h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.04em;
}

.login-card p { margin: 0; line-height: 1.5; }

.field,
.login-card label,
.modal-form label {
  display: grid;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
}

/* Layout */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  background: transparent;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid rgba(226, 232, 240, .78);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: var(--shadow-soft);
}

.brand-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #eff6ff;
  flex: 0 0 auto;
}

.brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.brand span {
  display: block;
  max-width: 166px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar nav {
  display: grid;
  gap: 8px;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 17px;
  border: 1px solid transparent;
  background: transparent;
  color: #334155;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
}

.nav-btn:hover,
.nav-btn.active {
  transform: none;
  color: #0f172a;
  border-color: var(--border);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px rgba(15, 23, 42, .045);
}

.nav-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--primary);
  font-size: 13px;
  flex: 0 0 auto;
}

.nav-btn.active .nav-icon {
  background: #2563eb;
  color: #ffffff;
}

.nav-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.mini-profile {
  padding: 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

#perfilUsuarioBadge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: var(--success);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mini-profile small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.content {
  min-width: 0;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 22px;
}

.tab-panel {
  display: none;
  animation: fadeUp .28s ease both;
}

.tab-panel.active { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero */
.page-head-executive {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 158px;
  margin: 0 0 18px;
  padding: 28px 32px;
  overflow: hidden;
  border: 0;
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 4%, rgba(37, 99, 235, .34), transparent 28%),
    radial-gradient(circle at 74% 34%, rgba(96, 165, 250, .12), transparent 34%),
    linear-gradient(135deg, #1e293b 0%, #0f172a 55%, #020617 100%);
  box-shadow: var(--shadow-hero);
  color: #ffffff;
}

.page-head-executive::before,
.page-head-executive::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(37, 99, 235, .14);
  pointer-events: none;
}

.page-head-executive::before { top: -42px; right: -32px; width: 168px; height: 168px; }
.page-head-executive::after { top: 52px; right: 46px; width: 86px; height: 86px; }

.page-head-executive > * {
  position: relative;
  z-index: 1;
}

.page-head-executive .panel-kicker {
  margin: 0 0 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(96, 165, 250, .12);
  color: #60a5fa;
  font-weight: 650;
}

.page-head-executive h2,
.page-head-executive h3 {
  max-width: 620px;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.page-head-executive p:not(.panel-kicker),
.page-head-executive span:not(.badge) {
  display: block;
  max-width: 660px;
  margin: 0;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.5;
}

.page-head-actions,
.top-actions,
#acoesCadastro,
.row-actions,
.card-actions,
.payment-hero-actions,
.commission-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.page-head-actions {
  min-width: 220px;
}

.platform-actions-slot {
  display: contents;
}

.page-head-actions .badge,
.page-head-actions .btn-secondary,
.page-head-actions button {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .10);
  color: #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 12px 26px rgba(15, 23, 42, .16);
  backdrop-filter: blur(12px);
}

.page-head-actions .btn-primary,
.page-head-actions button:not(.btn-secondary) {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(255, 255, 255, .34);
}

.filter-slot {
  margin: -2px 0 18px;
}

.filter-slot:empty { display: none; }

.filter-card {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 170px 190px auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
}

.filter-card--payments {
  grid-template-columns: minmax(220px, 1fr) 170px 190px 180px auto;
}

.filter-card--partners {
  grid-template-columns: minmax(260px, 1fr) 170px 200px auto;
}

.filter-card--commissions {
  grid-template-columns: minmax(220px, 1fr) 190px 190px 190px auto;
}

/* Generic cards */
.dashboard-kpis,
.metrics-grid,
.cards,
.commission-summary-grid,
.payment-overview,
.entity-meta,
.detail-grid {
  display: grid;
  gap: 12px;
}

.dashboard-kpis,
.metrics-grid,
.cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 18px;
}

.metric-card,
.dashboard-kpi-card,
.panel-card,
.company-card,
.partner-card,
.payment-overview-card,
.commission-summary-grid article,
.detail-grid article,
.entity-meta article,
.section-toolbar,
.empty-state,
.payment-history-card,
.commission-partners-panel,
.commission-detail-panel,
.details-panel {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
  color: var(--text);
}

.metric-card,
.dashboard-kpi-card {
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(34px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 118px;
  padding: 17px 18px 15px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 8%, rgba(59, 130, 246, .12), transparent 34%),
    radial-gradient(circle at 10% 110%, rgba(148, 163, 184, .10), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.metric-card::before,
.dashboard-kpi-card::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 40px;
  height: 40px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(239, 246, 255, .98), rgba(219, 234, 254, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 8px 18px rgba(37, 99, 235, .10);
}

.metric-card::after,
.dashboard-kpi-card::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 13px;
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59, 130, 246, .20), rgba(59, 130, 246, .02));
}

.metric-card:first-child,
.dashboard-kpi-card:first-child {
  border-color: transparent;
  background:
    radial-gradient(circle at 92% 6%, rgba(37, 99, 235, .36), transparent 30%),
    radial-gradient(circle at 76% 46%, rgba(96, 165, 250, .14), transparent 34%),
    linear-gradient(135deg, #1e293b 0%, #0f172a 58%, #020617 100%);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.metric-card:first-child .metric-label,
.metric-card:first-child strong,
.metric-card:first-child small,
.dashboard-kpi-card:first-child * { color: #ffffff !important; }

.metric-card.is-danger { border-color: rgba(220, 38, 38, .20); }
.metric-card.is-warn { border-color: rgba(217, 119, 6, .22); }
.metric-card.is-ok { border-color: rgba(5, 150, 105, .20); }
.metric-card.is-purple { border-color: rgba(124, 58, 237, .20); }

.metric-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: calc(100% - 48px);
}

.metric-label {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.metric-icon {
  position: absolute;
  right: -54px;
  top: -3px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  z-index: 2;
}

.metric-card strong {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 100%;
  margin: 2px 0 0;
  overflow: hidden;
  color: #0f172a;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 720;
  line-height: .95;
  letter-spacing: -.055em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card small {
  position: relative;
  z-index: 1;
  color: #94a3b8;
  font-size: 11.5px;
  line-height: 1.25;
}

.panel-card,
.company-card,
.partner-card,
.payment-history-card,
.commission-partners-panel,
.commission-detail-panel,
.details-panel {
  border-radius: 30px;
  overflow: hidden;
}

.panel-card,
.company-card,
.partner-card,
.commission-detail-panel,
.commission-partners-panel,
.details-panel {
  padding: 18px;
}

.section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  margin-bottom: 18px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .96);
}

.section-toolbar h2,
.panel-head h2,
.panel-head h3,
.entity-title strong,
.payment-client-copy h2,
.commission-partner-hero h2 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.section-toolbar p,
.entity-title small,
.panel-head span,
.panel-head p:not(.panel-kicker),
.payment-client-copy span,
.commission-partner-hero span,
.stack-item small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.panel-head,
.card-head,
.payment-hero,
.commission-partner-hero,
.commission-ledger-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.badge,
.status,
.status-pill,
.payment-status,
.commission-status,
.payment-applied,
.commission-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, .14);
  background: #eef4ff;
  color: var(--primary-2);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.payment-status-dot,
.commission-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.badge-ativa,
.status-ok,
.status-success,
.payment-paid,
.commission-paid,
.payment-applied.yes,
.positive {
  border-color: rgba(5, 150, 105, .16) !important;
  background: #ecfdf5 !important;
  color: var(--success) !important;
}

.badge-trial,
.status-warn,
.payment-pending,
.commission-open,
.payment-applied.no,
.attention {
  border-color: rgba(245, 158, 11, .18) !important;
  background: #fffbeb !important;
  color: #b7791f !important;
}

.badge-vencida,
.badge-inadimplente,
.badge-bloqueada,
.badge-cancelada,
.status-danger,
.payment-overdue,
.payment-canceled,
.payment-failed,
.commission-canceled,
.negative {
  border-color: rgba(220, 38, 38, .14) !important;
  background: #fef2f2 !important;
  color: var(--danger) !important;
}

.status-purple {
  border-color: rgba(124, 58, 237, .16);
  background: #f5f3ff;
  color: var(--purple);
}

.dashboard-grid,
.split-view,
.commission-board {
  display: grid;
  gap: 16px;
  align-items: start;
}

.dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr); }
.split-view { grid-template-columns: 340px minmax(0, 1fr); }
.commission-board { grid-template-columns: 330px minmax(0, 1fr); }

.stack-list,
.company-grid,
.partner-grid,
.company-list,
.payment-ledger,
.commission-ledger,
.commission-partner-list,
.commission-list {
  display: grid;
  gap: 10px;
}

.company-grid,
.partner-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stack-item,
.company-item,
.commission-partner-item,
.payment-row,
.commission-row {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #f8fafc;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.stack-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
}

.company-card-premium,
.partner-card-premium {
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .08), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.entity-title-with-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.payment-company-logo,
.commission-partner-avatar {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  background:
    radial-gradient(circle at 80% 10%, rgba(37, 99, 235, .20), transparent 36%),
    #eff6ff;
  color: var(--primary);
  font-weight: 800;
}

.payment-company-logo.has-image span {
  display: none;
}

.payment-company-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.payment-company-logo.is-fallback img {
  display: none;
}

.commission-partner-avatar.large {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  font-size: 23px;
}

.company-item,
.commission-partner-item {
  width: 100%;
  padding: 13px 14px;
  color: var(--text);
  text-align: left;
  background: #ffffff;
  box-shadow: none;
}

.company-item:hover,
.commission-partner-item:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .20);
  box-shadow: 0 12px 24px rgba(15, 23, 42, .06);
}

.company-item.active,
.commission-partner-item.active {
  border-color: rgba(37, 99, 235, .30);
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  box-shadow: inset 4px 0 0 #2563eb, 0 14px 26px rgba(37, 99, 235, .08);
}

.payment-company-compact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
}

.payment-company-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.payment-company-copy strong,
.payment-company-line strong,
.company-item strong,
.partner-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

.payment-company-copy small,
.payment-company-line small,
.company-item small,
.partner-card small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

.payment-company-copy .status-pill {
  justify-self: start;
  min-height: 24px;
  font-size: 10px;
}

.entity-meta,
.payment-overview,
.payment-overview.finance-overview,
.commission-summary-grid,
.detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.entity-meta article,
.payment-overview-card,
.commission-summary-grid article,
.detail-grid article {
  min-height: 76px;
  padding: 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 8%, rgba(37, 99, 235, .08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: none;
}

.entity-meta span,
.payment-overview-card span,
.commission-summary-grid span,
.detail-grid span,
.payment-row-value span,
.commission-row-money span {
  display: block;
  margin-bottom: 6px;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.entity-meta strong,
.payment-overview-card strong,
.commission-summary-grid strong,
.detail-grid strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  font-weight: 750;
  word-break: break-word;
}

.entity-meta small,
.payment-overview-card small,
.commission-summary-grid small,
.detail-grid small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
}

/* Payments */
.payments-view {
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
}

.company-selector {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.company-selector .company-list {
  overflow: auto;
  padding-right: 4px;
  max-height: calc(100vh - 168px);
}

.details-panel {
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.payments-shell {
  display: grid;
  gap: 16px;
}

.payment-hero.premium-finance,
.payment-hero {
  position: relative;
  overflow: hidden;
  align-items: center;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 96% 12%, rgba(37, 99, 235, .12), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: var(--shadow-soft);
}

.payment-hero::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -44px;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .07);
  pointer-events: none;
}

.payment-hero-main,
.commission-partner-hero-main,
.commission-partner-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.finance-main-value {
  display: grid;
  justify-items: end;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.finance-main-value span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.finance-main-value strong {
  color: #0f172a;
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: 1;
}

.payment-history-card {
  padding: 0;
  overflow: hidden;
  border-radius: 30px;
  background: #ffffff;
}

.payment-history-card .payment-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.payment-history-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 740;
  letter-spacing: -.04em;
}

.payment-history-head small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
}

.payment-counter {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
}

.payment-ledger {
  padding: 14px;
  gap: 10px;
}

.payment-row,
.commission-row,
.payment-row-v5 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border-radius: 20px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.payment-row:hover,
.commission-row:hover,
.payment-row-v5:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .18);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.payment-row-topline,
.commission-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.payment-row-title strong,
.commission-row-main strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}

.payment-row-title span,
.commission-row-main small,
.commission-row-main p,
.commission-row-money small,
.payment-row-value small {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.payment-row-value,
.commission-row-money {
  text-align: right;
  white-space: nowrap;
}

.payment-row-value strong,
.commission-row-money strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
}

.payment-row-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Commissions */
.commission-partners-panel {
  position: sticky;
  top: 18px;
}

.commission-partner-list {
  max-height: calc(100vh - 210px);
  overflow: auto;
  padding-right: 4px;
}

.commission-partner-copy strong,
.commission-partner-copy span,
.commission-partner-copy small {
  display: block;
}

.commission-partner-copy span,
.commission-partner-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.commission-ledger-head {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #f8fafc;
}

.commission-ledger {
  margin-top: 10px;
}

.premium-scroll {
  max-height: 680px;
  overflow: auto;
  padding-right: 4px;
}

.empty-state {
  min-height: 74px;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 20px;
  border-style: dashed;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
}

.empty-state-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 13px;
  border: 1px solid rgba(37, 99, 235, .14);
  background: #eef4ff;
  color: var(--primary-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(8px);
}

.modal-card {
  width: min(920px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.modal-header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 26px;
  font-weight: 720;
  letter-spacing: -.04em;
}

.icon-btn {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #f8fafc;
  color: #334155;
  box-shadow: none;
  font-size: 24px;
}

.modal-form {
  display: grid;
  gap: 14px;
}

.grid-2,
.grid-3 {
  display: grid;
  gap: 14px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.form-note {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(37, 99, 235, .14);
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 12px;
  line-height: 1.5;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #ffffff;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
}

th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

tr:last-child td { border-bottom: 0; }

/* Responsive */
@media (max-width: 1280px) {
  .dashboard-kpis,
  .metrics-grid,
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .company-grid,
  .partner-grid,
  .dashboard-grid,
  .split-view,
  .commission-board {
    grid-template-columns: 1fr;
  }

  .commission-partners-panel,
  .company-selector {
    position: static;
  }

  .company-selector {
    max-height: none;
  }

  .company-selector .company-list,
  .commission-partner-list {
    max-height: none;
  }

  .payment-overview,
  .payment-overview.finance-overview,
  .commission-summary-grid,
  .entity-meta,
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .app {
    display: block;
    min-height: 100dvh;
  }

  .content {
    max-width: none;
    padding: 14px;
  }

  .page-head-executive {
    display: block;
    min-height: 190px;
    margin: 0 0 16px;
    padding: 20px;
    border-radius: 28px;
  }

  .page-head-executive h2,
  .page-head-executive h3 {
    max-width: 310px;
    font-size: 28px;
    line-height: 1.02;
    letter-spacing: -.045em;
  }

  .page-head-executive p:not(.panel-kicker),
  .page-head-executive span:not(.badge) {
    max-width: 360px;
    font-size: 13px;
  }

  .page-head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: 18px;
    gap: 10px;
    justify-content: stretch;
  }

  .page-head-actions > * {
    width: 100%;
  }

  .page-head-actions .platform-actions-slot {
    display: contents;
  }

  .page-head-actions button,
  .page-head-actions .btn-secondary,
  .page-head-actions .badge {
    width: 100%;
    min-height: 40px;
    padding-inline: 10px;
    border-radius: 15px;
    font-size: 12px;
  }

  .filter-card,
  .filter-card--payments,
  .filter-card--partners,
  .filter-card--commissions {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
    border-radius: 24px;
  }

  .filter-card input,
  .filter-card select,
  .filter-card button {
    width: 100%;
  }

  .dashboard-kpis,
  .metrics-grid,
  .cards,
  .payment-overview,
  .payment-overview.finance-overview,
  .commission-summary-grid,
  .entity-meta,
  .detail-grid,
  .grid-2,
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .metric-card,
  .dashboard-kpi-card,
  .payment-overview-card,
  .commission-summary-grid article,
  .entity-meta article,
  .detail-grid article {
    min-height: 104px;
    padding: 12px;
    border-radius: 20px;
  }

  .metric-card strong {
    font-size: 25px;
  }

  .panel-card,
  .company-card,
  .partner-card,
  .payment-history-card,
  .commission-partners-panel,
  .commission-detail-panel,
  .details-panel {
    border-radius: 24px;
  }

  .section-toolbar,
  .panel-head,
  .card-head,
  .payment-hero,
  .commission-partner-hero,
  .commission-ledger-head,
  .payment-history-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .payment-row,
  .commission-row,
  .payment-row-v5 {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    border-radius: 20px;
  }

  .payment-row-topline,
  .commission-row-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .payment-row-value,
  .commission-row-money,
  .finance-main-value {
    text-align: left;
    justify-items: start;
  }

  .payment-row-badges {
    justify-content: flex-start;
  }

  .modal-card {
    width: min(100%, 680px);
    border-radius: 26px;
  }
}

@media (max-width: 700px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-hero {
    min-height: 430px;
    padding: 24px;
    border-radius: 26px;
  }

  .login-card {
    padding: 24px;
    border-radius: 26px;
  }

  .company-grid,
  .partner-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .content {
    padding: 12px;
  }

  .page-head-executive {
    min-height: 205px;
    padding: 18px;
    border-radius: 26px;
  }

  .page-head-executive h2,
  .page-head-executive h3 {
    max-width: 260px;
    font-size: 26px;
  }

  .dashboard-kpis,
  .metrics-grid,
  .cards,
  .payment-overview,
  .payment-overview.finance-overview,
  .commission-summary-grid,
  .entity-meta,
  .detail-grid,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .payment-company-compact {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .payment-company-compact > .badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
}


/* =========================================================
   Sidebar refinada — visual premium e navegação mais clara
   ========================================================= */
.sidebar {
  background:
    radial-gradient(circle at 110% -10%, rgba(37, 99, 235, .10), transparent 34%),
    rgba(255, 255, 255, .90);
}

.brand {
  min-height: 78px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .10), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.brand-icon {
  box-shadow: 0 10px 24px rgba(37, 99, 235, .12);
}

.sidebar nav {
  padding: 4px;
  border-radius: 24px;
  background: rgba(248, 250, 252, .78);
  border: 1px solid rgba(226, 232, 240, .62);
}

.nav-btn {
  min-height: 50px;
  border-radius: 18px;
}

.nav-btn.active {
  border-color: rgba(37, 99, 235, .20);
  background: #ffffff;
  box-shadow: inset 4px 0 0 #2563eb, 0 10px 22px rgba(37, 99, 235, .09);
}

.nav-btn.active .nav-icon {
  background: #2563eb;
  color: #ffffff;
}

.mini-profile {
  background:
    radial-gradient(circle at 100% 0%, rgba(5, 150, 105, .08), transparent 35%),
    #ffffff;
}

.payment-company-logo.is-fallback img { display: none; }
.payment-company-logo.is-fallback span { display: grid; }
.payment-company-logo.has-image span { display: none; }

@media (min-width: 921px) {
  .sidebar {
    box-shadow: inset -1px 0 0 rgba(226, 232, 240, .72);
  }
}

/* =========================================================
   Refinamento: logos de empresas em todas as listas
   ========================================================= */
.stack-item--company {
  align-items: center;
}

.stack-company-line,
.commission-company-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.stack-company-line > div,
.commission-company-line > div {
  min-width: 0;
}

.commission-row-main--company {
  min-width: 0;
}

.commission-company-line .payment-company-logo,
.stack-company-line .payment-company-logo {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 16px;
}

.company-card .payment-company-logo,
.payment-company-compact .payment-company-logo,
.payment-hero .payment-company-logo,
.modal-header .payment-company-logo {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid rgba(37, 99, 235, .12);
}

.payment-company-logo.is-fallback span {
  display: grid;
}

.payment-company-logo.has-image span {
  display: none;
}

.payment-company-logo.has-image img {
  display: block;
}

@media (max-width: 720px) {
  .stack-item--company {
    display: grid;
    gap: 12px;
  }

  .stack-company-line,
  .commission-company-line {
    align-items: flex-start;
  }
}

/* =========================================================
   Área Pix — parceiro edita, dono consulta
   ========================================================= */
.pix-area {
  display: grid;
  gap: 16px;
}

.pix-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.pix-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.pix-partners-panel {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 36px);
}

.pix-partner-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}

.pix-partner-item {
  width: 100%;
}

.pix-view-panel,
.pix-form-panel {
  display: grid;
  gap: 16px;
}

.pix-summary-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 26px;
  background:
    radial-gradient(circle at 96% 12%, rgba(37, 99, 235, .12), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: var(--shadow-soft);
}

.pix-summary-card::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -44px;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .07);
  pointer-events: none;
}

.pix-summary-card > * {
  position: relative;
  z-index: 1;
}

.pix-summary-copy {
  min-width: 0;
  flex: 1;
}

.pix-summary-copy h2 {
  margin: 0 0 5px;
  color: #0f172a;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 740;
  line-height: 1.05;
  letter-spacing: -.045em;
}

.pix-summary-copy span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pix-detail-grid {
  margin: 0;
}

.pix-form {
  padding-top: 2px;
}

.pix-readonly-head {
  padding: 0 0 4px;
}

/* Sidebar com 6 itens continua confortável */
.sidebar nav {
  gap: 7px;
}

.nav-btn[data-tab="pix"] .nav-icon {
  background: #f5f3ff;
  color: var(--purple);
}

.nav-btn[data-tab="pix"].active .nav-icon {
  background: var(--purple);
  color: #ffffff;
}

@media (max-width: 1180px) {
  .pix-layout {
    grid-template-columns: 1fr;
  }

  .pix-partners-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 920px) {
  .pix-summary-card {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 24px;
  }
}

/* =========================================================
   Modal Nova Empresa — versão limpa e estável
   - remove sticky com margem negativa que cortava botões
   - mantém card premium
   - melhora retorno de sucesso
   - mobile responsivo sem lixo de configuração
   ========================================================= */

body.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow-y: auto;
  background: rgba(15, 23, 42, .50);
  backdrop-filter: blur(8px);
  -webkit-overflow-scrolling: touch;
}

.modal-card {
  width: min(920px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
}

.modal-card:focus {
  outline: none;
}

.modal-card-company {
  width: min(1040px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(226, 232, 240, .88);
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .30);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.modal-header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 26px;
  font-weight: 720;
  letter-spacing: -.04em;
}

.modal-card-company .modal-header-premium {
  flex: 0 0 auto;
  margin: 0;
  padding: 24px 26px;
  color: #ffffff;
  background:
    radial-gradient(circle at 92% 0%, rgba(37, 99, 235, .38), transparent 30%),
    linear-gradient(135deg, #1e293b 0%, #0f172a 55%, #020617 100%);
}

.modal-header-premium h2,
.modal-header-premium p {
  color: #ffffff;
}

.modal-header-premium p:not(.eyebrow) {
  max-width: 720px;
  margin: 8px 0 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.45;
}

.modal-header-premium .eyebrow {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.icon-btn,
.modal-header-premium .icon-btn {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 15px;
  box-shadow: none;
  font-size: 24px;
}

.icon-btn {
  border: 1px solid var(--border);
  background: #f8fafc;
  color: #334155;
}

.modal-header-premium .icon-btn {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .10);
  color: #ffffff;
}

.modal-form {
  display: grid;
  gap: 14px;
}

.modal-form-company {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 14px;
  overflow-y: auto;
  padding: 22px;
  background: #f8fafc;
  -webkit-overflow-scrolling: touch;
}

.modal-section {
  display: grid;
  gap: 15px;
  padding: 18px;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .04);
}

.modal-section-highlight {
  border-color: rgba(37, 99, 235, .22);
  background:
    radial-gradient(circle at 96% 12%, rgba(37, 99, 235, .08), transparent 30%),
    #ffffff;
}

.modal-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.modal-section-head > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #eff6ff;
  color: var(--primary);
  font-size: 13px;
  font-weight: 850;
}

.modal-section-head h3 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 18px;
  letter-spacing: -.03em;
}

.modal-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.modal-form label small,
.form-info-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.form-info-card {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 13px 14px;
  border: 1px dashed rgba(37, 99, 235, .28);
  border-radius: 16px;
  background: #f8fbff;
}

.form-info-card strong {
  color: #1e293b;
  font-size: 12px;
}

.access-explain-grid,
.success-links-grid,
.created-access-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.access-explain-grid article,
.success-links-grid article,
.created-access-box > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 18px;
  background: #f8fafc;
}

.access-explain-grid strong,
.success-links-grid span,
.created-access-box span {
  display: block;
  margin-bottom: 5px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
}

.access-explain-grid span,
.created-access-box span {
  color: var(--muted);
  font-weight: 650;
}

.success-links-grid a {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  word-break: break-word;
}

.company-pricing-grid {
  align-items: stretch;
}

.commission-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  background: #ecfdf5;
  border-color: rgba(5, 150, 105, .16);
  color: #065f46;
}

.commission-preview div {
  display: grid;
  gap: 5px;
}

.commission-preview span {
  color: #047857;
  font-size: 11px;
  font-weight: 800;
}

.commission-preview strong {
  color: #064e3b;
  font-size: 16px;
}

/* Rodapé do modal: sem sticky, sem margem negativa e sem corte de botões */
.modal-sticky-actions {
  position: static;
  bottom: auto;
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 4px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  background: transparent;
  backdrop-filter: none;
}

.modal-sticky-actions .msg {
  min-width: 0;
  margin: 0;
  color: var(--danger);
}

.modal-sticky-actions .row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.modal-sticky-actions .row-actions button {
  width: auto;
  min-width: 140px;
}

.modal-success-box {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(5, 150, 105, .18);
  background: #ecfdf5;
}

#formEmpresa #modalMsg.msg.success {
  display: block;
  width: 100%;
  padding: 0;
  color: #047857 !important;
}

#formEmpresa #modalMsg.msg.success a {
  color: #1d4ed8;
  font-weight: 800;
  word-break: break-word;
}

#formEmpresa #modalMsg.msg.success strong {
  color: #064e3b;
}

#formEmpresa #modalMsg.msg.success:has(.modal-success-box) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#formEmpresa .modal-sticky-actions:has(#modalMsg.msg.success:not(:empty)) {
  grid-template-columns: 1fr;
}

#formEmpresa .modal-sticky-actions:has(#modalMsg.msg.success:not(:empty)) #modalMsg {
  width: 100%;
}

#formEmpresa .modal-sticky-actions:has(#modalMsg.msg.success:not(:empty)) .row-actions {
  width: 100%;
  justify-content: flex-end;
}

.created-access-box {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.created-access-box strong {
  color: #064e3b;
  word-break: break-word;
}

@media (max-width: 760px) {
  .modal-backdrop {
    padding: 0;
    place-items: stretch;
  }

  .modal-card,
  .modal-card-company {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .modal-card-company .modal-header-premium {
    padding: max(18px, env(safe-area-inset-top)) 18px 18px;
  }

  .modal-form-company {
    padding: 14px;
  }

  .modal-section {
    padding: 14px;
    border-radius: 20px;
  }

  .access-explain-grid,
  .success-links-grid,
  .created-access-box,
  .commission-preview,
  .company-pricing-grid,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
  }

  .modal-sticky-actions {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  .modal-sticky-actions .row-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .modal-sticky-actions .row-actions button,
  .modal-sticky-actions button {
    width: 100%;
    min-width: 0;
  }

  .modal-section-head h3 {
    font-size: 16px;
  }
}

/* =========================================================
   Refatoração mobile — KPIs compactos e hero sem efeito fixo
   ========================================================= */
@media (max-width: 920px) {
  html,
  body,
  #appView,
  #appView .content,
  .tab-panel,
  .page-head-executive {
    overflow-anchor: none;
  }

  .mobile-appbar {
    position: static !important;
    margin: 12px 14px 0 !important;
  }

  #appView.app {
    padding-top: 0 !important;
  }

  .page-head-executive,
  .dashboard-page-head {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    transform: none !important;
    margin-top: 0 !important;
  }

  #cardsDashboard,
  #cardsDashboard.dashboard-kpis,
  #cardsDashboard.metrics-grid,
  .dashboard-kpis,
  .metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #cardsDashboard .metric-card,
  .dashboard-kpis .metric-card,
  .metrics-grid .metric-card {
    min-height: 92px !important;
    padding: 10px 8px 9px !important;
    border-radius: 18px !important;
    gap: 5px !important;
  }

  #cardsDashboard .metric-card::before,
  .dashboard-kpis .metric-card::before,
  .metrics-grid .metric-card::before {
    right: 8px !important;
    top: 8px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 11px !important;
  }

  #cardsDashboard .metric-card::after,
  .dashboard-kpis .metric-card::after,
  .metrics-grid .metric-card::after {
    left: 10px !important;
    bottom: 8px !important;
    width: 24px !important;
    height: 3px !important;
  }

  #cardsDashboard .metric-top,
  .dashboard-kpis .metric-top,
  .metrics-grid .metric-top {
    max-width: calc(100% - 28px) !important;
    gap: 6px !important;
  }

  #cardsDashboard .metric-label,
  .dashboard-kpis .metric-label,
  .metrics-grid .metric-label {
    font-size: 8.5px !important;
    line-height: 1.12 !important;
    letter-spacing: .045em !important;
  }

  #cardsDashboard .metric-icon,
  .dashboard-kpis .metric-icon,
  .metrics-grid .metric-icon {
    right: -34px !important;
    top: -1px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 11px !important;
    font-size: 9px !important;
  }

  #cardsDashboard .metric-card strong,
  .dashboard-kpis .metric-card strong,
  .metrics-grid .metric-card strong {
    font-size: clamp(17px, 5.2vw, 22px) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #cardsDashboard .metric-card small,
  .dashboard-kpis .metric-card small,
  .metrics-grid .metric-card small {
    display: none !important;
  }
}

@media (max-width: 430px) {
  #cardsDashboard,
  #cardsDashboard.dashboard-kpis,
  #cardsDashboard.metrics-grid,
  .dashboard-kpis,
  .metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #cardsDashboard .metric-card,
  .dashboard-kpis .metric-card,
  .metrics-grid .metric-card {
    min-height: 86px !important;
    padding: 9px 6px 8px !important;
    border-radius: 16px !important;
  }

  #cardsDashboard .metric-label,
  .dashboard-kpis .metric-label,
  .metrics-grid .metric-label {
    font-size: 7.8px !important;
  }

  #cardsDashboard .metric-card strong,
  .dashboard-kpis .metric-card strong,
  .metrics-grid .metric-card strong {
    font-size: clamp(15px, 5vw, 19px) !important;
  }
}

/* =========================================================
   PADRÃO APP MOBILE — KPIs compactos em todas as abas
   Mantém o mesmo visual dos cards do Dashboard nas abas de
   Empresas, Pagamentos, Parceiros, Comissões e Área Pix.
   ========================================================= */
@media (max-width: 920px) {
  /* Garante que nenhum hero/topo fique preso durante o scroll */
  .mobile-appbar,
  .page-head-executive,
  .dashboard-page-head,
  .content > .page-head-executive,
  .tab-panel > .page-head-executive {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .mobile-appbar {
    z-index: 20 !important;
    margin: 12px 14px 0 !important;
  }

  .tab-panel,
  .content,
  #appView {
    overflow: visible !important;
  }

  /* Todos os grids que funcionam como indicadores passam a ter cara de app */
  #cardsDashboard,
  .dashboard-kpis,
  .metrics-grid,
  .cards,
  .payment-overview,
  .payment-overview.finance-overview,
  .commission-summary-grid,
  .entity-meta,
  .detail-grid,
  .pix-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Cards compactos e consistentes em todas as abas */
  #cardsDashboard .metric-card,
  .dashboard-kpis .metric-card,
  .metrics-grid .metric-card,
  .cards .metric-card,
  .payment-overview-card,
  .commission-summary-grid article,
  .entity-meta article,
  .detail-grid article,
  .pix-detail-grid article {
    min-height: 86px !important;
    padding: 10px 8px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  /* Texto dos cards compactos */
  .payment-overview-card span,
  .commission-summary-grid span,
  .entity-meta span,
  .detail-grid span,
  .pix-detail-grid span,
  #cardsDashboard .metric-label,
  .dashboard-kpis .metric-label,
  .metrics-grid .metric-label,
  .cards .metric-label {
    margin-bottom: 5px !important;
    font-size: 8.2px !important;
    line-height: 1.12 !important;
    letter-spacing: .045em !important;
  }

  .payment-overview-card strong,
  .commission-summary-grid strong,
  .entity-meta strong,
  .detail-grid strong,
  .pix-detail-grid strong,
  #cardsDashboard .metric-card strong,
  .dashboard-kpis .metric-card strong,
  .metrics-grid .metric-card strong,
  .cards .metric-card strong {
    font-size: clamp(15px, 4.5vw, 20px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  /* Descrição menor não cabe bem em 3 colunas no mobile */
  #cardsDashboard .metric-card small,
  .dashboard-kpis .metric-card small,
  .metrics-grid .metric-card small,
  .cards .metric-card small,
  .payment-overview-card small,
  .commission-summary-grid small,
  .entity-meta small,
  .detail-grid small,
  .pix-detail-grid small {
    display: none !important;
  }

  /* Cards dentro de cards de empresa/parceiro ficam com visual mais limpo */
  .company-card .entity-meta,
  .partner-card .entity-meta {
    margin: 12px 0 0 !important;
  }

  .company-card .entity-meta article,
  .partner-card .entity-meta article {
    min-height: 74px !important;
    padding: 9px 7px !important;
    border-radius: 16px !important;
  }

  /* Evita que ações ou badges estourem a largura da tela */
  .page-head-actions,
  .row-actions,
  .card-actions,
  .payment-hero-actions,
  .commission-row-actions {
    min-width: 0 !important;
  }

  .page-head-actions > *,
  .row-actions > *,
  .card-actions > * {
    min-width: 0 !important;
  }
}

@media (max-width: 430px) {
  #cardsDashboard,
  .dashboard-kpis,
  .metrics-grid,
  .cards,
  .payment-overview,
  .payment-overview.finance-overview,
  .commission-summary-grid,
  .entity-meta,
  .detail-grid,
  .pix-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #cardsDashboard .metric-card,
  .dashboard-kpis .metric-card,
  .metrics-grid .metric-card,
  .cards .metric-card,
  .payment-overview-card,
  .commission-summary-grid article,
  .entity-meta article,
  .detail-grid article,
  .pix-detail-grid article {
    min-height: 78px !important;
    padding: 8px 6px !important;
    border-radius: 15px !important;
  }

  .payment-overview-card span,
  .commission-summary-grid span,
  .entity-meta span,
  .detail-grid span,
  .pix-detail-grid span,
  #cardsDashboard .metric-label,
  .dashboard-kpis .metric-label,
  .metrics-grid .metric-label,
  .cards .metric-label {
    font-size: 7.2px !important;
  }

  .payment-overview-card strong,
  .commission-summary-grid strong,
  .entity-meta strong,
  .detail-grid strong,
  .pix-detail-grid strong,
  #cardsDashboard .metric-card strong,
  .dashboard-kpis .metric-card strong,
  .metrics-grid .metric-card strong,
  .cards .metric-card strong {
    font-size: clamp(13px, 4.4vw, 17px) !important;
  }
}

@media (max-width: 360px) {
  /* Em telas muito pequenas ainda mantém 3 colunas, mas mais compacto */
  #cardsDashboard,
  .dashboard-kpis,
  .metrics-grid,
  .cards,
  .payment-overview,
  .payment-overview.finance-overview,
  .commission-summary-grid,
  .entity-meta,
  .detail-grid,
  .pix-detail-grid {
    gap: 6px !important;
  }

  #cardsDashboard .metric-card,
  .dashboard-kpis .metric-card,
  .metrics-grid .metric-card,
  .cards .metric-card,
  .payment-overview-card,
  .commission-summary-grid article,
  .entity-meta article,
  .detail-grid article,
  .pix-detail-grid article {
    min-height: 72px !important;
    padding: 7px 5px !important;
  }
}

/* =========================================================
   VERSÃO FINAL — Plataforma BLM Agenda
   Refinamento visual web/mobile, logos e experiência de app
   ========================================================= */

/* Layout geral mais limpo */
.content {
  max-width: 1540px;
}

.panel-card,
.company-card,
.partner-card,
.payment-history-card,
.commission-partners-panel,
.commission-detail-panel {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.company-card:hover,
.partner-card:hover,
.panel-card:hover,
.commission-detail-panel:hover {
  border-color: rgba(37, 99, 235, .16);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .075);
}

/* Logos das empresas — padrão premium */
.payment-company-logo {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(37, 99, 235, .12);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .08), inset 0 1px 0 rgba(255,255,255,.82);
}

.payment-company-logo.has-image {
  background: #ffffff;
}

.payment-company-logo.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.payment-company-logo.is-fallback {
  background:
    radial-gradient(circle at 86% 10%, rgba(37, 99, 235, .24), transparent 38%),
    linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.payment-company-logo.is-fallback span {
  display: grid;
  place-items: center;
  color: var(--primary-2);
  font-weight: 850;
}

/* Faixa de logos no dashboard */
.dashboard-logo-strip {
  display: grid;
  gap: 16px;
  margin: -2px 0 18px;
  padding: 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 96% 0%, rgba(37, 99, 235, .10), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.dashboard-logo-strip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dashboard-logo-strip-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -.04em;
}

.dashboard-logo-strip-head span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12.5px;
}

.dashboard-logo-strip-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-logo-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 20px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.dashboard-logo-item .payment-company-logo {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 15px;
}

.dashboard-logo-item > div:last-child {
  min-width: 0;
}

.dashboard-logo-item strong,
.dashboard-logo-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-logo-item strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 820;
}

.dashboard-logo-item span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
}

/* Cards de empresas mais profissionais */
.company-card-premium .card-head,
.partner-card-premium .card-head {
  align-items: center;
}

.company-card-premium .payment-company-logo,
.payment-hero .payment-company-logo,
.modal-header .payment-company-logo {
  flex-basis: 54px;
  width: 54px;
  height: 54px;
  border-radius: 19px;
}

.company-card-premium .entity-title strong,
.payment-client-copy h2 {
  letter-spacing: -.035em;
}

.card-actions .btn-mini,
.row-actions .btn-mini,
.payment-hero-actions .btn-mini {
  min-height: 36px;
}

/* Histórico e listas com aparência de aplicativo */
.stack-item,
.company-item,
.payment-row,
.commission-row,
.commission-partner-item {
  background: rgba(255,255,255,.94);
}

.stack-item:hover,
.company-item:hover,
.payment-row:hover,
.commission-row:hover,
.commission-partner-item:hover {
  border-color: rgba(37, 99, 235, .18);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .065);
}

/* Modal final sem rodapé cortado */
.modal-card-company {
  overflow: hidden !important;
}

.modal-form-company {
  overflow-y: auto !important;
}

.modal-sticky-actions {
  position: relative !important;
  bottom: auto !important;
  margin: 4px 0 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.96) !important;
}

.modal-sticky-actions .row-actions {
  justify-content: flex-end !important;
}

.modal-success-box {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile appbar não fica fixa: rola junto com a página */
.mobile-appbar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 12px 12px 0 !important;
  z-index: 20 !important;
}

@media (max-width: 920px) {
  #appView.app {
    padding-top: 0 !important;
  }

  #appView .sidebar {
    top: 12px !important;
  }

  .content {
    padding-top: 12px !important;
  }

  .page-head-executive {
    min-height: auto !important;
  }

  .dashboard-logo-strip {
    padding: 14px;
    border-radius: 24px;
  }

  .dashboard-logo-strip-head {
    align-items: stretch;
  }

  .dashboard-logo-strip-head .btn-mini {
    align-self: flex-start;
  }

  .dashboard-logo-strip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-logo-item {
    padding: 8px;
    border-radius: 17px;
  }

  .dashboard-logo-item .payment-company-logo {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }

  .company-card-premium .payment-company-logo,
  .payment-hero .payment-company-logo,
  .modal-header .payment-company-logo {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  .company-card-premium .card-head,
  .partner-card-premium .card-head {
    gap: 12px;
  }

  .card-actions,
  .row-actions,
  .payment-hero-actions,
  .commission-row-actions {
    gap: 7px !important;
  }

  .btn-mini {
    min-height: 34px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 520px) {
  .dashboard-logo-strip-head {
    display: grid;
    gap: 10px;
  }

  .dashboard-logo-strip-head .btn-mini {
    width: 100%;
  }

  .dashboard-logo-strip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-logo-item {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 7px;
  }

  .dashboard-logo-item .payment-company-logo {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .dashboard-logo-item strong,
  .dashboard-logo-item span {
    max-width: 100%;
  }

  .company-card .card-head,
  .partner-card .card-head,
  .payment-hero,
  .commission-partner-hero {
    align-items: flex-start !important;
  }

  .company-card .card-head .badge,
  .partner-card .card-head .badge {
    align-self: flex-start;
  }

  .modal-sticky-actions {
    padding: 12px !important;
  }

  .modal-sticky-actions .row-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .modal-sticky-actions .row-actions button {
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  .dashboard-logo-strip-list {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-logo-item strong {
    font-size: 11px;
  }
}

/* =========================================================
   Alterar senha — aba, modal de primeiro acesso e mobile
   ========================================================= */
.security-area {
  display: grid;
  gap: 16px;
}

.security-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.security-hero-card,
.security-form-card {
  display: grid;
  align-content: start;
  gap: 16px;
}

.security-hero-card {
  min-height: 280px;
  background:
    radial-gradient(circle at 94% 8%, rgba(37, 99, 235, .13), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.security-hero-card h3,
.password-first-access-card h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -.045em;
}

.security-hero-card p:not(.panel-kicker),
.password-first-access-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.security-icon-large {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 8%, rgba(37, 99, 235, .24), transparent 40%),
    #eff6ff;
  color: var(--primary);
  font-size: 26px;
  box-shadow: 0 14px 26px rgba(37, 99, 235, .10);
}

.modal-card-security {
  width: min(720px, 100%);
  padding: 0;
  overflow: hidden;
}

.modal-card-security .modal-header-security {
  margin: 0;
  padding: 24px 26px;
}

.password-first-access-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 96% 12%, rgba(37, 99, 235, .10), transparent 30%),
    #ffffff;
  box-shadow: var(--shadow-soft);
}

.modal-form-password {
  padding: 20px;
  background: #ffffff;
}

.security-note {
  border-color: rgba(37, 99, 235, .16);
  background: #eef4ff;
}

.password-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 20px 20px;
}

.modal-form-password .password-actions-row {
  padding: 0;
  margin-top: 2px;
}

.password-actions-row .msg {
  flex: 1;
  margin: 0;
  text-align: left;
}

.security-page-actions {
  border-top: 1px solid var(--border-soft);
  padding-top: 14px !important;
}

.nav-btn[data-tab="seguranca"] .nav-icon {
  background: #eef4ff;
  color: var(--primary-2);
}

.nav-btn[data-tab="seguranca"].active .nav-icon {
  background: var(--primary);
  color: #ffffff;
}

@media (max-width: 920px) {
  .security-layout {
    grid-template-columns: 1fr;
  }

  .security-hero-card {
    min-height: auto;
  }

  .modal-card-security {
    width: min(100%, 680px);
    border-radius: 26px;
  }
}

@media (max-width: 760px) {
  .modal-card-security {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .modal-card-security .modal-header-security {
    padding: max(18px, env(safe-area-inset-top)) 18px 18px;
  }

  .password-first-access-card {
    flex-direction: column;
    align-items: flex-start;
    margin: 14px;
    padding: 16px;
    border-radius: 22px;
  }

  .modal-form-password {
    padding: 14px;
  }

  .password-actions-row {
    flex-direction: column;
    align-items: stretch;
    padding: 0 14px 14px;
  }

  .modal-form-password .password-actions-row {
    padding: 0;
  }

  .password-actions-row .msg,
  .password-actions-row button {
    width: 100%;
  }
}