/* =========================================================
   VORTEXGRID CENTRAL — DESIGN SYSTEM
   Painel Administrativo
   Identidade: Grafite / Roxo / Branco
   Arquivo: public/style.css
   Compatível com o HTML atualizado e app.js existente
   ========================================================= */

/* =========================================================
   1. TOKENS E RESET
   ========================================================= */

:root {
  color-scheme: light;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  --primary: #7047eb;
  --primary-hover: #5d35d5;
  --primary-dark: #4e2bbd;
  --primary-soft: #f1edff;
  --primary-border: #e2d9ff;

  --sidebar: #0d1220;
  --sidebar-raised: #151b2c;
  --sidebar-hover: #1b2236;
  --sidebar-active: #24213e;
  --sidebar-text: #d4d8e5;
  --sidebar-muted: #858da5;
  --sidebar-border: rgba(255, 255, 255, .075);

  --background: #f5f6fa;
  --surface: #ffffff;
  --surface-alt: #fafaff;
  --surface-hover: #f8f7fc;

  --text: #1d2233;
  --text-secondary: #42495d;
  --muted: #788096;
  --muted-light: #9ba2b3;

  --border: #e6e8f0;
  --border-strong: #d8dce8;

  --success: #16835d;
  --success-bg: #e8f7ef;
  --success-border: #c6ead7;

  --warning: #a9690a;
  --warning-bg: #fff4dc;
  --warning-border: #f5dfae;

  --danger: #c53e4b;
  --danger-bg: #fff0f1;
  --danger-border: #f4d0d4;

  --info: #3268d8;
  --info-bg: #edf3ff;
  --info-border: #d6e3ff;

  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius-md: 13px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  --shadow-xs: 0 1px 2px rgba(19, 25, 44, .035);
  --shadow-sm: 0 3px 12px rgba(19, 25, 44, .045);
  --shadow: 0 6px 24px rgba(19, 25, 44, .045);
  --shadow-lg: 0 18px 55px rgba(19, 25, 44, .13);
  --shadow-modal: 0 26px 90px rgba(10, 13, 27, .28);

  --sidebar-width: 264px;
  --content-width: 1640px;
  --transition: .18s ease;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--background);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

button,
input,
select,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(112, 71, 235, .3);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--primary-hover);
}

img,
svg {
  max-width: 100%;
}

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

::selection {
  background: rgba(112, 71, 235, .17);
  color: var(--text);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 20px;
  background: #cfd3df;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #aeb4c5;
  background-clip: padding-box;
}

/* =========================================================
   2. ELEMENTOS COMPARTILHADOS
   ========================================================= */

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.65px;
  line-height: 1.5;
  text-transform: uppercase;
}

.status-dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #42c990;
  box-shadow: 0 0 0 4px rgba(66, 201, 144, .12);
}

.avatar {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(112, 71, 235, .14);
  border-radius: 12px;
  background: linear-gradient(145deg, #f1edff, #e4dcff);
  color: var(--primary);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.message {
  min-height: 0;
  margin: 0;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.6;
}

.message:empty {
  display: none;
}

/* =========================================================
   3. IDENTIDADE DA MARCA
   ========================================================= */

.brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

.brand-mark {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  background: linear-gradient(145deg, #9473ff 0%, #7047eb 48%, #512cc4 100%);
  box-shadow:
    0 7px 18px rgba(112, 71, 235, .24),
    inset 0 1px 0 rgba(255, 255, 255, .24);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -2px;
}

.brand-mark.small {
  width: 41px;
  height: 41px;
  border-radius: 12px;
  font-size: 21px;
}

.brand-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.brand-copy strong {
  color: inherit;
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.65px;
  line-height: 1.25;
}

.brand-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .65px;
  line-height: 1.6;
}

/* =========================================================
   4. LOGIN
   Compatível com o novo HTML: login-page / login-shell
   ========================================================= */

#login-view,
.login-page {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 38px 24px;
  background:
    radial-gradient(ellipse at 12% 12%, rgba(112, 71, 235, .10), transparent 36%),
    radial-gradient(ellipse at 90% 86%, rgba(67, 105, 219, .08), transparent 33%),
    linear-gradient(145deg, #fafaff 0%, #f5f6fb 55%, #f2f3fa 100%);
}

.login-page::before {
  position: absolute;
  top: -190px;
  right: -160px;
  width: 470px;
  height: 470px;
  border: 1px solid rgba(112, 71, 235, .08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.login-page::after {
  position: absolute;
  right: -95px;
  bottom: -285px;
  width: 530px;
  height: 530px;
  border: 1px solid rgba(112, 71, 235, .07);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.login-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 452px);
  margin: auto;
}

.login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 31px;
}

.login-brand .brand-copy strong {
  font-size: 20px;
}

.login-brand .brand-copy small {
  font-size: 10px;
}

.login-card {
  padding: 37px;
  border: 1px solid rgba(224, 226, 239, .9);
  border-radius: 23px;
  background: rgba(255, 255, 255, .94);
  box-shadow:
    0 25px 75px rgba(28, 31, 59, .075),
    0 2px 8px rgba(28, 31, 59, .025);
  backdrop-filter: blur(18px);
}

.login-heading {
  margin-bottom: 28px;
}

.login-heading .eyebrow {
  margin-bottom: 19px;
  padding: 8px 10px;
  border: 1px solid #e7e0ff;
  border-radius: 8px;
  background: #f8f5ff;
  font-size: 9px;
  letter-spacing: 1.05px;
}

.login-heading .status-dot {
  width: 6px;
  height: 6px;
}

.login-heading h1 {
  margin: 0;
  color: #1a1d2d;
  font-family: "Manrope", sans-serif;
  font-size: clamp(26px, 5vw, 32px);
  font-weight: 800;
  letter-spacing: -1.35px;
  line-height: 1.25;
}

.login-heading p {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
}

#login-form {
  display: grid;
  gap: 19px;
}

#login-form .form-field {
  gap: 8px;
}

#login-form .form-field label {
  color: #353a4e;
  font-size: 12px;
  font-weight: 700;
}

#login-form input {
  width: 100%;
  min-width: 0;
  min-height: 49px;
  padding: 13px 14px;
  border: 1px solid #dfe2ec;
  border-radius: 11px;
  outline: none;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

#login-form input::placeholder {
  color: #a3a8b7;
}

#login-form input:hover {
  border-color: #c8c0e6;
}

#login-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(112, 71, 235, .10);
}

.login-submit {
  display: flex;
  width: 100%;
  min-height: 49px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 3px;
  padding: 12px 16px 12px 19px;
  border: 1px solid var(--primary);
  border-radius: 11px;
  background: linear-gradient(110deg, #7952f1, #633ce0);
  box-shadow: 0 7px 18px rgba(112, 71, 235, .20);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

.login-submit span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--transition);
}

.login-submit:hover {
  transform: translateY(-1px);
  background: linear-gradient(110deg, #7047eb, #5630cf);
  box-shadow: 0 10px 23px rgba(112, 71, 235, .26);
}

.login-submit:hover span {
  transform: translateX(2px);
}

.login-submit:active {
  transform: translateY(0);
}

.login-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 26px;
  padding-top: 19px;
  border-top: 1px solid #eceef4;
  color: #858b9e;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.login-security > span {
  color: var(--primary);
  font-size: 11px;
}

.login-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  color: #8c91a3;
  font-size: 10px;
  font-weight: 600;
}

/* =========================================================
   5. ESTRUTURA DA APLICAÇÃO
   ========================================================= */

#app-view,
.app-layout {
  min-height: 100vh;
}

.app-layout {
  background: var(--background);
}

.sidebar {
  position: fixed;
  z-index: 50;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  padding: 25px 16px 17px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, .035);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(112, 71, 235, .10), transparent 45%),
    var(--sidebar);
  color: #fff;
  scrollbar-color: #343a50 transparent;
  scrollbar-width: thin;
}

.sidebar > .brand {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 0 8px;
  color: #fff;
}

.sidebar > .brand .brand-copy strong {
  color: #fff;
  font-size: 16px;
}

.sidebar > .brand .brand-copy small {
  color: var(--sidebar-muted);
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.sidebar-divider {
  height: 1px;
  flex: 0 0 auto;
  margin: 25px 5px 22px;
  background: var(--sidebar-border);
}

.sidebar-nav,
.sidebar nav,
.nav-menu {
  display: grid;
  align-content: start;
  gap: 5px;
}

.sidebar-nav > #users-nav {
  display: grid;
  gap: 5px;
}

.nav-label {
  margin: 17px 10px 7px;
  color: #727b93;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.25px;
  line-height: 1.5;
}

.nav-label:first-child {
  margin-top: 0;
}

.nav-item,
.sidebar [data-page],
.nav-menu [data-page] {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--sidebar-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.nav-item:hover,
.sidebar [data-page]:hover,
.nav-menu [data-page]:hover {
  border-color: rgba(255, 255, 255, .045);
  background: var(--sidebar-hover);
  color: #fff;
}

.nav-item:active {
  transform: scale(.99);
}

.nav-item.active,
.sidebar [data-page].active,
.nav-menu [data-page].active {
  border-color: rgba(164, 139, 255, .15);
  background: linear-gradient(100deg, rgba(112, 71, 235, .25), rgba(112, 71, 235, .10));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  color: #fff;
}

.nav-item.active::before,
.sidebar [data-page].active::before,
.nav-menu [data-page].active::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -1px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #a58aff;
  content: "";
}

.nav-icon {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  color: #9da6bd;
  font-size: 18px;
  line-height: 1;
  transition:
    color var(--transition),
    background var(--transition);
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  color: #c3b3ff;
}

.nav-item.active .nav-icon {
  background: rgba(153, 124, 255, .12);
}

.sidebar-nav [hidden],
.sidebar [hidden],
.nav-menu [hidden] {
  display: none !important;
}

.sidebar-spacer {
  min-height: 25px;
  flex: 1 1 auto;
}

.sidebar-system {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 20px 0 15px;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

.sidebar-system .status-dot {
  margin-top: 5px;
  width: 6px;
  height: 6px;
}

.sidebar-system > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.sidebar-system strong {
  color: #e3e6ef;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
}

.sidebar-system small {
  color: var(--sidebar-muted);
  font-size: 9px;
  line-height: 1.5;
}

.sidebar-bottom {
  display: grid;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-user {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 5px 4px;
}

.sidebar-user .avatar {
  width: 35px;
  height: 35px;
  border-color: rgba(167, 143, 255, .25);
  border-radius: 10px;
  background: linear-gradient(145deg, #7653e9, #4933a5);
  color: #fff;
  font-size: 12px;
}

.sidebar-user-info {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.sidebar-user-info strong {
  overflow: hidden;
  color: #f1f2f8;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-info small {
  color: var(--sidebar-muted);
  font-size: 9px;
}

.logout,
.sidebar [data-logout],
.sidebar [data-action="logout"] {
  display: flex;
  width: 100%;
  min-height: 39px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #aeb5c7;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  transition:
    background var(--transition),
    color var(--transition);
}

.logout:hover,
.sidebar [data-logout]:hover,
.sidebar [data-action="logout"]:hover {
  border-color: rgba(255, 255, 255, .055);
  background: rgba(255, 255, 255, .055);
  color: #fff;
}

.logout > span:first-child {
  font-size: 17px;
}

.main-area {
  display: flex;
  min-width: 0;
  min-height: 100vh;
  flex-direction: column;
  margin-left: var(--sidebar-width);
}

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  min-height: 106px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 21px 38px;
  border-bottom: 1px solid rgba(226, 229, 239, .85);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.topbar-heading {
  min-width: 0;
}

.topbar-heading .eyebrow {
  margin-bottom: 4px;
  color: #8b79c9;
  font-size: 9px;
  letter-spacing: 1.4px;
}

.topbar h1,
.topbar-title {
  margin: 0;
  color: #1c2031;
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.65px;
  line-height: 1.4;
}

.topbar-description {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 12px 7px 7px;
  border: 1px solid #ececf3;
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.user-chip .avatar {
  width: 35px;
  height: 35px;
  border-radius: 10px;
}

.user-chip-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.user-chip-copy strong,
.topbar [data-user-name] {
  max-width: 180px;
  overflow: hidden;
  color: #33384c;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip-copy small,
.topbar [data-user-email] {
  max-width: 200px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-content,
.content {
  width: 100%;
  max-width: var(--content-width);
  flex: 1 0 auto;
  margin: 0 auto;
  padding: 32px 38px 40px;
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding: 17px 38px;
  border-top: 1px solid #e8eaf1;
  color: #9096a7;
  font-size: 10px;
  font-weight: 500;
}

.app-footer span:first-child {
  color: #697086;
  font-weight: 700;
}

/* =========================================================
   6. NOTIFICAÇÕES
   ========================================================= */

#notice,
.notice {
  position: fixed;
  z-index: 11000;
  top: 22px;
  right: 24px;
  bottom: auto;
  width: max-content;
  max-width: min(430px, calc(100vw - 32px));
  padding: 14px 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 38px rgba(25, 28, 48, .13);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.65;
  overflow-wrap: anywhere;
  animation: vgNoticeIn .2s ease-out;
}

@keyframes vgNoticeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   7. CABEÇALHOS DE PÁGINA
   ========================================================= */

.page-header,
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 26px;
}

.page-header > div,
.page-heading > div {
  min-width: 0;
}

.page-header h1,
.page-heading h1 {
  margin: 0;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: clamp(23px, 2vw, 29px);
  font-weight: 800;
  letter-spacing: -1.05px;
  line-height: 1.3;
}

.page-header p,
.page-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

.page-header .btn,
.page-heading .btn {
  flex: 0 0 auto;
}

/* =========================================================
   8. BOTÕES
   ========================================================= */

.btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  color: #34394d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.btn:hover {
  border-color: #c8c0e5;
  background: #faf9ff;
  color: var(--primary-hover);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  transform: none;
  box-shadow: none;
}

.btn-primary {
  border-color: var(--primary);
  background: linear-gradient(110deg, #7851ef, #6740df);
  box-shadow: 0 4px 12px rgba(112, 71, 235, .15);
  color: #fff;
}

.btn-primary:hover {
  border-color: var(--primary-hover);
  background: linear-gradient(110deg, #7047eb, #5c35d5);
  box-shadow: 0 6px 16px rgba(112, 71, 235, .23);
  color: #fff;
}

.btn-secondary {
  border-color: var(--border);
  background: #f8f9fc;
  color: var(--text-secondary);
}

.btn-danger {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}

.btn-danger:hover {
  border-color: #eab5bc;
  background: #ffe7e9;
  color: #a92937;
}

.btn-success {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success);
}

.btn-small {
  min-height: 31px;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 10px;
}

.btn-block {
  width: 100%;
}

/* =========================================================
   9. CARDS E PAINÉIS
   ========================================================= */

.content-card,
.panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 21px;
}

.panel-heading > div {
  min-width: 0;
}

.panel-heading h2 {
  margin: 0;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.35px;
  line-height: 1.5;
}

.panel-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

/* =========================================================
   10. INDICADORES E MÉTRICAS
   ========================================================= */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  margin-bottom: 23px;
}

.stats-grid-admin {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stat-card {
  position: relative;
  min-width: 0;
  padding: 21px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: #ded6f7;
  box-shadow: 0 10px 27px rgba(28, 30, 48, .07);
}

.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stat-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

.stat-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #e9e2ff;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 16px;
  font-weight: 750;
}

.stat-value {
  display: block;
  margin: 16px 0 5px;
  color: #202438;
  font-family: "Manrope", sans-serif;
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -.9px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.stat-description {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

/* =========================================================
   11. DASHBOARD
   ========================================================= */

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .85fr);
  align-items: start;
  gap: 19px;
  margin-bottom: 20px;
}

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

.dashboard-welcome {
  position: relative;
  display: flex;
  min-height: 250px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 92% 8%, rgba(112, 71, 235, .11), transparent 38%),
    linear-gradient(140deg, #fff 35%, #fbfaff 100%);
}

.welcome-copy {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.welcome-copy h2 {
  margin: 0 0 10px;
  color: #1c2032;
  font-family: "Manrope", sans-serif;
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 1.35;
}

.welcome-copy p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.welcome-symbol {
  display: grid;
  width: 110px;
  height: 110px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #e7defe;
  border-radius: 29px;
  background: linear-gradient(145deg, #f3efff, #fff);
  box-shadow: 0 10px 35px rgba(112, 71, 235, .07);
  color: rgba(112, 71, 235, .82);
  transform: rotate(-7deg);
}

.welcome-symbol span {
  font-family: "Manrope", sans-serif;
  font-size: 69px;
  font-weight: 800;
  letter-spacing: -8px;
  line-height: 1;
  transform: rotate(7deg);
}

.summary-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f1f6;
}

.summary-row:last-of-type {
  border-bottom: 0;
}

.summary-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.summary-dot-paid {
  background: #20a36b;
  box-shadow: 0 0 0 4px #e8f7ef;
}

.summary-dot-pending {
  background: #e4a02d;
  box-shadow: 0 0 0 4px #fff4dc;
}

.summary-label {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

.summary-label strong {
  color: #363b4f;
  font-size: 11px;
  font-weight: 750;
}

.summary-label span {
  color: var(--muted);
  font-size: 10px;
}

.summary-value {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

.summary-footer {
  margin-top: 16px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.8;
}

.quick-link-list {
  display: grid;
  gap: 5px;
}

.quick-link {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 11px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition:
    border-color var(--transition),
    background var(--transition);
}

.quick-link:hover {
  border-color: #e9e3fb;
  background: #faf9ff;
}

.quick-link-icon {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #e9e2ff;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 16px;
}

.quick-link > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

.quick-link strong {
  color: #34394d;
  font-size: 11px;
  font-weight: 750;
}

.quick-link small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.quick-link-arrow {
  color: #999eb0;
  font-size: 21px;
  transition: transform var(--transition);
}

.quick-link:hover .quick-link-arrow {
  transform: translateX(2px);
  color: var(--primary);
}

.operation-metric {
  margin: 20px 0;
}

.operation-metric-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #62697d;
  font-size: 11px;
}

.operation-metric-heading strong {
  color: var(--text);
  font-weight: 800;
}

.metric-track {
  height: 7px;
  overflow: hidden;
  border-radius: 20px;
  background: #eeeff5;
}

.metric-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.metric-fill-purple {
  background: linear-gradient(90deg, #7047eb, #a88cff);
}

.metric-fill-blue {
  background: linear-gradient(90deg, #3478f6, #80a9ff);
}

.metric-fill-green {
  background: linear-gradient(90deg, #179b69, #7bd8ac);
}

/* =========================================================
   12. TABELAS
   ========================================================= */

.table-wrapper,
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 11px;
  text-align: left;
}

thead th {
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  background: #f9f9fd;
  color: #727990;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .65px;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody td {
  padding: 14px 15px;
  border-bottom: 1px solid #eff0f5;
  color: #454b60;
  font-size: 11px;
  vertical-align: middle;
}

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

tbody tr {
  transition: background var(--transition);
}

tbody tr:hover {
  background: #faf9ff;
}

tbody td strong {
  color: #2c3145;
  font-weight: 750;
}

tbody td a {
  font-weight: 650;
}

.table-wrapper table,
.table-wrap table {
  min-width: 600px;
}

.table-wrapper thead th,
.table-wrap thead th {
  position: sticky;
  z-index: 2;
  top: 0;
}

.table-actions,
.actions-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.empty-state {
  padding: 43px 20px;
  border: 1px dashed #dcdfea;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

/* =========================================================
   13. STATUS E ETIQUETAS
   ========================================================= */

.status,
.pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: #f0f1f5;
  color: #656b7d;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

.status-active,
.status-paid,
.pill.success {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success);
}

.status-pending,
.status-overdue,
.pill.warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning);
}

.status-inactive,
.status-cancelled,
.pill.danger {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}

.pill.info,
.status-info {
  border-color: var(--info-border);
  background: var(--info-bg);
  color: var(--info);
}

/* =========================================================
   14. FORMULÁRIOS
   ========================================================= */

.form-field {
  display: grid;
  min-width: 0;
  gap: 7px;
  color: #3f4559;
  font-size: 11px;
  font-weight: 700;
}

.form-field > span {
  display: block;
}

.form-field input,
.form-field select,
.form-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #dfe2ec;
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.5;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #a0a6b5;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: #c9c2e2;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(112, 71, 235, .09);
}

.form-field textarea {
  min-height: 100px;
  resize: vertical;
}

.form-field select {
  cursor: pointer;
}

.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled {
  background: #f4f5f9;
  color: #878da0;
  cursor: not-allowed;
}

.form-field input[type="checkbox"],
.form-field input[type="radio"] {
  width: 16px;
  min-height: 16px;
  accent-color: var(--primary);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}

.form-grid .full-width,
.form-grid .field-full {
  grid-column: 1 / -1;
}

/* =========================================================
   15. FICHA DO CLIENTE
   ========================================================= */

.client-record,
.client-record-page,
.record-page {
  display: grid;
  min-width: 0;
  gap: 22px;
}

.client-record-header,
.record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 2px;
}

.client-record-heading,
.record-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 15px;
}

.client-record-avatar,
.record-avatar {
  display: grid;
  width: 57px;
  height: 57px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #e3d9ff;
  border-radius: 16px;
  background: linear-gradient(145deg, #f2edff, #e5dcff);
  color: var(--primary);
  font-family: "Manrope", sans-serif;
  font-size: 21px;
  font-weight: 800;
}

.client-record-title,
.record-title {
  min-width: 0;
}

.client-record-title h1,
.record-title h1 {
  margin: 0;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -.9px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.client-record-title p,
.record-title p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.client-record-actions,
.record-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.client-record .content-card,
.client-record-page .content-card,
.record-page .content-card {
  min-width: 0;
  overflow: hidden;
}

.client-record .panel-heading,
.client-record-page .panel-heading,
.record-page .panel-heading {
  align-items: center;
  margin-bottom: 19px;
}

.client-record .panel-heading h2,
.client-record-page .panel-heading h2,
.record-page .panel-heading h2 {
  font-size: 14px;
}

.client-record .stats-grid,
.client-record-page .stats-grid,
.record-page .stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 0;
}

.client-record .stat-card,
.client-record-page .stat-card,
.record-page .stat-card {
  padding: 17px;
}

.client-record .stat-value,
.client-record-page .stat-value,
.record-page .stat-value {
  margin-top: 14px;
  font-size: clamp(19px, 1.8vw, 25px);
}

.client-record .stat-label,
.client-record-page .stat-label,
.record-page .stat-label {
  line-height: 1.5;
}

.client-record .stat-description,
.client-record-page .stat-description,
.record-page .stat-description {
  margin-top: 5px;
  line-height: 1.5;
}

.client-record .dashboard-grid,
.client-record-page .dashboard-grid,
.record-page .dashboard-grid {
  align-items: start;
}

.client-record .table-wrapper,
.client-record .table-wrap,
.client-record-page .table-wrapper,
.client-record-page .table-wrap,
.record-page .table-wrapper,
.record-page .table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.client-record table,
.client-record-page table,
.record-page table {
  min-width: 640px;
}

.client-record tbody td,
.client-record-page tbody td,
.record-page tbody td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.client-record .btn-small,
.client-record-page .btn-small,
.record-page .btn-small {
  margin: 2px;
}

.client-record .record-section,
.client-record-page .record-section,
.record-page .record-section {
  min-width: 0;
  margin-bottom: 21px;
}

.client-record .record-section:last-child,
.client-record-page .record-section:last-child,
.record-page .record-section:last-child {
  margin-bottom: 0;
}

.client-data-grid,
.client-record-data,
.record-data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.client-data-item,
.record-data-item {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
  padding: 16px 17px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.client-data-item:nth-child(3n),
.record-data-item:nth-child(3n) {
  border-right: 0;
}

.client-data-item:nth-last-child(-n+3),
.record-data-item:nth-last-child(-n+3) {
  border-bottom: 0;
}

.client-data-label,
.record-data-label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.client-data-value,
.record-data-value {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.client-data-value.muted,
.record-data-value.muted {
  color: #969bad;
  font-weight: 450;
}

.client-record .table-wrapper table,
.client-record .table-wrap table {
  border-radius: 12px;
}

.client-record .table-wrapper thead th,
.client-record .table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.client-record .empty-state,
.client-record-page .empty-state,
.record-page .empty-state {
  margin-top: 0;
}

.client-record .record-toolbar,
.client-record-page .record-toolbar,
.record-page .record-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.client-record .record-toolbar p,
.client-record-page .record-toolbar p,
.record-page .record-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.client-record .record-finance-grid,
.client-record-page .record-finance-grid,
.record-page .record-finance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.client-record .record-finance-item,
.client-record-page .record-finance-item,
.record-page .record-finance-item {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.client-record .record-finance-item span,
.client-record-page .record-finance-item span,
.record-page .record-finance-item span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.6;
}

.client-record .record-finance-item strong,
.client-record-page .record-finance-item strong,
.record-page .record-finance-item strong {
  display: block;
  margin-top: 9px;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 800;
  letter-spacing: -.5px;
  overflow-wrap: anywhere;
}

.client-record .record-finance-item small,
.client-record-page .record-finance-item small,
.record-page .record-finance-item small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.client-record .record-finance-item.is-primary,
.client-record-page .record-finance-item.is-primary,
.record-page .record-finance-item.is-primary {
  border-color: #e4dcff;
  background: linear-gradient(145deg, #faf8ff, #fff);
}

.client-record .record-finance-item.is-success strong,
.client-record-page .record-finance-item.is-success strong,
.record-page .record-finance-item.is-success strong {
  color: var(--success);
}

.client-record .record-finance-item.is-warning strong,
.client-record-page .record-finance-item.is-warning strong,
.record-page .record-finance-item.is-warning strong {
  color: var(--warning);
}

.client-record .record-finance-item.is-danger strong,
.client-record-page .record-finance-item.is-danger strong,
.record-page .record-finance-item.is-danger strong {
  color: var(--danger);
}

/* =========================================================
   16. MODAIS
   ========================================================= */

#modal {
  position: fixed;
  z-index: 10000;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 25px 16px;
  isolation: isolate;
}

#modal[hidden] {
  display: none !important;
}

#modal:not([hidden]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: fixed;
  z-index: 0;
  inset: 0;
  background: rgba(12, 15, 30, .58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: vgFadeIn .16s ease-out;
}

.modal-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 580px);
  max-height: calc(100vh - 50px);
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-modal);
  animation: vgModalIn .2s ease-out;
}

.modal-header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 21px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
}

.modal-header h2 {
  margin: 0;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.modal-header .btn {
  min-height: 33px;
}

#record-form {
  margin: 0;
}

.modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 17px;
  padding: 24px;
}

.modal-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: #fcfcff;
}

@keyframes vgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vgModalIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   17. DIALOG NATIVO
   ========================================================= */

dialog {
  width: min(580px, calc(100% - 32px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-modal);
}

dialog::backdrop {
  background: rgba(12, 15, 30, .58);
  backdrop-filter: blur(4px);
}

/* =========================================================
   18. ESTADOS DE CARREGAMENTO E ERRO
   ========================================================= */

.loading {
  padding: 52px 20px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.error-state {
  padding: 28px;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
  background: #fff;
}

.error-state h2 {
  margin: 0 0 9px;
  color: var(--danger);
  font-size: 18px;
}

.error-state p {
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

/* =========================================================
   19. COMPATIBILIDADE COM COMPONENTES ANTIGOS
   ========================================================= */

.brand small,
.brand-subtitle {
  color: var(--muted);
}

.sidebar .brand small,
.sidebar .brand-subtitle {
  color: var(--sidebar-muted);
}

.topbar [data-user-name] {
  font-weight: 750;
}

.topbar [data-user-email] {
  color: var(--muted);
  font-size: 10px;
}

#page-content > * {
  min-width: 0;
}

#page-content .content-card + .content-card,
#page-content .panel + .panel {
  margin-top: 19px;
}

#page-content input:not([type="checkbox"]):not([type="radio"]),
#page-content select,
#page-content textarea {
  max-width: 100%;
}

#page-content img {
  height: auto;
}

#page-content pre {
  max-width: 100%;
  overflow: auto;
}

#page-content code {
  overflow-wrap: anywhere;
}

#page-content ul,
#page-content ol {
  padding-left: 22px;
}

#page-content hr {
  height: 1px;
  margin: 20px 0;
  border: 0;
  background: var(--border);
}

/* =========================================================
   20. RESPONSIVIDADE — TELAS MÉDIAS
   ========================================================= */

@media (max-width: 1350px) {
  :root {
    --sidebar-width: 244px;
  }

  #page-content,
  .content {
    padding-right: 26px;
    padding-left: 26px;
  }

  .topbar {
    padding-right: 26px;
    padding-left: 26px;
  }

  .app-footer {
    padding-right: 26px;
    padding-left: 26px;
  }

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

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

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

  .client-record .stats-grid,
  .client-record-page .stats-grid,
  .record-page .stats-grid,
  .client-record .record-finance-grid,
  .client-record-page .record-finance-grid,
  .record-page .record-finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .client-data-item:nth-child(3n),
  .record-data-item:nth-child(3n) {
    border-right: 1px solid var(--border);
  }

  .client-data-item:nth-child(2n),
  .record-data-item:nth-child(2n) {
    border-right: 0;
  }

  .client-data-item:nth-last-child(-n+3),
  .record-data-item:nth-last-child(-n+3) {
    border-bottom: 1px solid var(--border);
  }

  .client-data-item:nth-last-child(-n+2),
  .record-data-item:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

/* =========================================================
   21. RESPONSIVIDADE — TABLETS
   ========================================================= */

@media (max-width: 950px) {
  :root {
    --sidebar-width: 78px;
  }

  .sidebar {
    align-items: center;
    padding: 20px 9px 14px;
  }

  .sidebar > .brand {
    justify-content: center;
    width: 100%;
    padding: 0;
  }

  .sidebar > .brand .brand-copy,
  .sidebar > .brand .brand-mark:not(.small) {
    display: none;
  }

  .sidebar-divider {
    width: 100%;
    margin: 21px 0;
  }

  .sidebar-nav,
  .sidebar nav,
  .nav-menu {
    width: 100%;
    gap: 7px;
  }

  .nav-label {
    height: 1px;
    margin: 12px 0;
    overflow: hidden;
    font-size: 0;
  }

  .nav-item,
  .sidebar [data-page],
  .nav-menu [data-page] {
    width: 56px;
    min-height: 46px;
    justify-content: center;
    gap: 0;
    margin: 0 auto;
    padding: 9px 4px;
    overflow: hidden;
    font-size: 0;
  }

  .nav-icon {
    width: 26px;
    height: 26px;
    font-size: 19px;
  }

  .nav-item.active::before,
  .sidebar [data-page].active::before,
  .nav-menu [data-page].active::before {
    top: 10px;
    bottom: 10px;
    left: -1px;
  }

  .sidebar-system {
    width: 100%;
    justify-content: center;
    padding: 12px 0;
  }

  .sidebar-system > div {
    display: none;
  }

  .sidebar-system .status-dot {
    margin: 0;
  }

  .sidebar-bottom {
    width: 100%;
    justify-items: center;
  }

  .sidebar-user {
    justify-content: center;
    padding: 4px 0;
  }

  .sidebar-user-info {
    display: none;
  }

  .logout,
  .sidebar [data-logout],
  .sidebar [data-action="logout"] {
    width: 48px;
    min-height: 42px;
    justify-content: center;
    gap: 0;
    padding: 8px;
    overflow: hidden;
    font-size: 0;
  }

  .logout > span:first-child {
    font-size: 18px;
  }

  .main-area {
    margin-left: var(--sidebar-width);
  }

  .topbar {
    min-height: 95px;
  }

  .topbar h1,
  .topbar-title {
    font-size: 18px;
  }

  .dashboard-grid-secondary {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-record-header,
  .record-header {
    flex-direction: column;
    align-items: stretch;
  }

  .client-record-actions,
  .record-actions {
    width: 100%;
  }

  .client-record-actions .btn,
  .record-actions .btn {
    flex: 1 1 auto;
  }
}

/* =========================================================
   22. RESPONSIVIDADE — CELULARES
   ========================================================= */

@media (max-width: 600px) {
  .login-page,
  #login-view {
    padding: 24px 15px;
  }

  .login-brand {
    margin-bottom: 23px;
  }

  .login-card {
    padding: 27px 21px;
    border-radius: 18px;
  }

  .login-heading h1 {
    font-size: 27px;
  }

  .login-footer {
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 15px;
    text-align: center;
  }

  :root {
    --sidebar-width: 0px;
  }

  .sidebar {
    display: none;
  }

  .main-area {
    margin-left: 0;
  }

  .topbar {
    position: relative;
    min-height: 80px;
    gap: 12px;
    padding: 15px 16px;
  }

  .topbar-heading {
    flex: 1;
  }

  .topbar-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }

  .topbar h1,
  .topbar-title {
    font-size: 17px;
    letter-spacing: -.4px;
  }

  .topbar-description {
    max-width: 290px;
    font-size: 10px;
  }

  .topbar-actions {
    gap: 0;
  }

  .user-chip {
    gap: 0;
    padding: 4px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .user-chip .avatar {
    width: 34px;
    height: 34px;
  }

  .user-chip-copy {
    display: none;
  }

  #page-content,
  .content {
    padding: 22px 14px 28px;
  }

  .app-footer {
    flex-wrap: wrap;
    gap: 5px 12px;
    padding: 14px;
    font-size: 9px;
  }

  .page-header,
  .page-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 20px;
  }

  .page-header h1,
  .page-heading h1 {
    font-size: 24px;
  }

  .page-header p,
  .page-heading p {
    font-size: 11px;
  }

  .page-header > .btn,
  .page-heading > .btn,
  .page-header > div + button,
  .page-heading > div + button {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 15px;
  }

  .stat-card {
    padding: 14px;
    border-radius: 12px;
  }

  .stat-label {
    font-size: 10px;
  }

  .stat-value {
    margin-top: 13px;
    font-size: 21px;
  }

  .stat-icon {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    font-size: 14px;
  }

  .stat-description {
    font-size: 9px;
    line-height: 1.6;
  }

  .content-card,
  .panel {
    padding: 16px;
    border-radius: 13px;
  }

  .panel-heading {
    gap: 10px;
    margin-bottom: 16px;
  }

  .panel-heading h2 {
    font-size: 14px;
  }

  .dashboard-grid {
    gap: 14px;
    margin-bottom: 14px;
  }

  .dashboard-welcome {
    min-height: auto;
    align-items: flex-start;
    padding: 20px 17px;
  }

  .welcome-symbol {
    display: none;
  }

  .welcome-copy h2 {
    font-size: 24px;
  }

  .welcome-copy p {
    font-size: 11px;
  }

  .quick-actions {
    align-items: stretch;
    flex-direction: column;
    margin-top: 18px;
  }

  .quick-actions .btn {
    width: 100%;
  }

  .summary-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .summary-value {
    margin-left: auto;
  }

  .table-wrapper,
  .table-wrap {
    border-radius: 9px;
  }

  .table-wrapper table,
  .table-wrap table {
    min-width: 570px;
  }

  thead th {
    padding: 12px;
    font-size: 9px;
  }

  tbody td {
    padding: 12px;
    font-size: 10px;
  }

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

  .form-grid .full-width,
  .form-grid .field-full {
    grid-column: auto;
  }

  .client-record,
  .client-record-page,
  .record-page {
    gap: 15px;
  }

  .client-record-header,
  .record-header {
    gap: 14px;
  }

  .client-record-heading,
  .record-heading {
    align-items: flex-start;
    gap: 11px;
  }

  .client-record-avatar,
  .record-avatar {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    font-size: 17px;
  }

  .client-record-title h1,
  .record-title h1 {
    font-size: 21px;
  }

  .client-record-title p,
  .record-title p {
    font-size: 10px;
  }

  .client-record-actions,
  .record-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .client-record-actions .btn,
  .record-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    margin: 0;
    padding: 8px 6px;
    font-size: 10px;
    white-space: normal;
  }

  .client-record .stats-grid,
  .client-record-page .stats-grid,
  .record-page .stats-grid,
  .client-record .record-finance-grid,
  .client-record-page .record-finance-grid,
  .record-page .record-finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .client-record .stat-card,
  .client-record-page .stat-card,
  .record-page .stat-card,
  .client-record .record-finance-item,
  .client-record-page .record-finance-item,
  .record-page .record-finance-item {
    padding: 12px;
  }

  .client-record .stat-value,
  .client-record-page .stat-value,
  .record-page .stat-value {
    font-size: 18px;
  }

  .client-record .record-finance-item strong,
  .client-record-page .record-finance-item strong,
  .record-page .record-finance-item strong {
    font-size: 18px;
  }

  .client-data-grid,
  .client-record-data,
  .record-data-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-data-item,
  .record-data-item,
  .client-data-item:nth-child(2n),
  .client-data-item:nth-child(3n),
  .record-data-item:nth-child(2n),
  .record-data-item:nth-child(3n) {
    padding: 13px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .client-data-item:last-child,
  .record-data-item:last-child {
    border-bottom: 0;
  }

  .client-record .panel-heading,
  .client-record-page .panel-heading,
  .record-page .panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .client-record .record-toolbar,
  .client-record-page .record-toolbar,
  .record-page .record-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .client-record .record-toolbar .btn,
  .client-record-page .record-toolbar .btn,
  .record-page .record-toolbar .btn {
    width: 100%;
  }

  #modal {
    align-items: flex-end !important;
    padding: 10px;
  }

  .modal-dialog {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 16px;
  }

  .modal-header {
    padding: 17px;
  }

  .modal-header h2 {
    font-size: 17px;
  }

  .modal-body {
    gap: 15px;
    padding: 17px;
  }

  .modal-footer {
    gap: 8px;
    padding: 13px 17px;
  }

  .modal-footer .btn {
    flex: 1;
    white-space: normal;
  }

  .error-state {
    padding: 20px;
  }

  #notice,
  .notice {
    top: 12px;
    right: 12px;
    max-width: calc(100vw - 24px);
    padding: 12px 14px;
  }
}

/* =========================================================
   23. TELAS MUITO PEQUENAS
   ========================================================= */

@media (max-width: 370px) {
  .login-card {
    padding: 23px 16px;
  }

  .topbar {
    padding-right: 12px;
    padding-left: 12px;
  }

  #page-content,
  .content {
    padding-right: 10px;
    padding-left: 10px;
  }

  .stats-grid {
    gap: 8px;
  }

  .stat-card {
    padding: 11px;
  }

  .stat-value {
    font-size: 19px;
  }

  .content-card,
  .panel {
    padding: 13px;
  }

  .client-record .stat-card,
  .client-record-page .stat-card,
  .record-page .stat-card,
  .client-record .record-finance-item,
  .client-record-page .record-finance-item,
  .record-page .record-finance-item {
    padding: 10px;
  }
}

/* =========================================================
   24. ACESSIBILIDADE E MOVIMENTO REDUZIDO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   PAINEL ADMIN — SOLICITAÇÕES, GRÁFICO, FILTROS E LISTAS
   ========================================================= */

.nav-badge {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.nav-badge[hidden] {
  display: none;
}

.account-button > span:first-child {
  font-size: 15px;
}

/* Gráfico de barras (recebimentos mensais) */

.bar-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  height: 230px;
}

.bar-col {
  display: grid;
  height: 100%;
  min-width: 0;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  text-align: center;
}

.bar-value {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface-alt);
}

.bar-fill {
  display: block;
  width: 62%;
  max-width: 54px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  transition: height .4s ease;
}

.bar-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Indicadores compactos */

.mini-stats {
  display: grid;
  gap: 12px;
}

.mini-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}

.mini-stats strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
}

.mini-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* Listas (últimas faturas / solicitações) */

.list-rows {
  display: grid;
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

.list-row:last-child {
  border-bottom: 0;
}

.list-row-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.list-row-main strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row-side {
  display: grid;
  flex: none;
  justify-items: end;
  gap: 5px;
}

.list-row-side strong {
  font-size: 13px;
}

/* Filtros */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.filter-search {
  width: min(360px, 100%);
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-tab {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.filter-tab:hover {
  background: var(--surface-hover);
}

.filter-tab.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* Resumo da solicitação (modal de análise) */

.order-summary {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
}

.order-summary > div {
  display: grid;
  gap: 2px;
}

.order-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.order-summary strong {
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.table-wrapper td small {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 950px) {
  .bar-chart {
    height: 190px;
    gap: 8px;
  }

  .list-row {
    align-items: flex-start;
  }
}


/* =========================================================
   DASHBOARD EXECUTIVO — ALERTAS E HIERARQUIA VISUAL
   ========================================================= */

.content > .alert-center {
  margin-bottom: 20px;
  padding: 21px 23px;
}

.alert-center .panel-heading {
  margin-bottom: 16px;
}

.section-eyebrow {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.25px;
}

.alert-center .panel-heading h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -.3px;
}

.alert-center .panel-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.alert-count {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.alert-list {
  display: grid;
  gap: 9px;
}

.dashboard-alert {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 12px;
  background: var(--surface);
}

.dashboard-alert-danger {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, rgba(197, 62, 75, .055), transparent 44%);
}

.dashboard-alert-warning {
  border-left-color: var(--warning);
  background: linear-gradient(90deg, rgba(169, 105, 10, .055), transparent 44%);
}

.dashboard-alert-info {
  border-left-color: var(--info);
  background: linear-gradient(90deg, rgba(50, 104, 216, .055), transparent 44%);
}

.dashboard-alert-symbol {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 800;
}

.dashboard-alert-danger .dashboard-alert-symbol {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}

.dashboard-alert-warning .dashboard-alert-symbol {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning);
}

.dashboard-alert-info .dashboard-alert-symbol {
  border-color: var(--info-border);
  background: var(--info-bg);
  color: var(--info);
}

.dashboard-alert-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 3px;
}

.dashboard-alert-copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-alert-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.dashboard-alert .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.alert-center-clear {
  display: flex;
  align-items: center;
  gap: 13px;
  border-color: var(--success-border);
  background: linear-gradient(100deg, rgba(22, 131, 93, .055), var(--surface) 55%);
}

.alert-clear-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--success-border);
  border-radius: 11px;
  background: var(--success-bg);
  color: var(--success);
  font-size: 17px;
  font-weight: 800;
}

.alert-center-clear > div {
  min-width: 0;
  flex: 1 1 auto;
}

.alert-center-clear strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.alert-center-clear p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 720px) {
  .content > .alert-center {
    padding: 17px;
  }

  .dashboard-alert {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .dashboard-alert-copy {
    flex-basis: calc(100% - 48px);
  }

  .dashboard-alert .btn {
    margin-left: 44px;
  }

  .alert-center-clear {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .alert-center-clear .alert-count {
    margin-left: 49px;
  }

  .alert-center .panel-heading {
    align-items: flex-start;
  }
}


/* =========================================================
   DASHBOARD EXECUTIVO — RESUMO FINANCEIRO
   ========================================================= */

.content > .financial-overview {
  margin-bottom: 20px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(112, 71, 235, .055), transparent 38%),
    var(--surface);
}

.financial-overview-heading {
  margin-bottom: 20px;
}

.financial-overview-heading h2 {
  margin: 0;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.35px;
}

.financial-overview-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.financial-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.financial-summary-item {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .86);
}

.financial-summary-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.financial-summary-item > strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 800;
  letter-spacing: -.65px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.financial-summary-item > small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.financial-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted-light);
}

.financial-dot-success {
  background: var(--success);
}

.financial-dot-neutral {
  background: var(--primary);
}

.financial-dot-danger {
  background: var(--danger);
}

.financial-composition {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.financial-composition-heading,
.financial-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.financial-composition-heading strong {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.financial-composition-heading > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.financial-progress {
  display: flex;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-alt);
  box-shadow: inset 0 0 0 1px rgba(29, 34, 51, .04);
}

.financial-progress-current {
  display: block;
  min-width: 0;
  background: linear-gradient(90deg, #16835d, #35b987);
  transition: width .3s ease;
}

.financial-progress-overdue {
  display: block;
  min-width: 0;
  background: linear-gradient(90deg, #d75a66, var(--danger));
  transition: width .3s ease;
}

.financial-legend {
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 11px;
}

.financial-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 760px) {
  .content > .financial-overview {
    padding: 17px;
  }

  .financial-summary-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .financial-summary-item {
    padding: 14px;
  }

  .financial-summary-item > strong {
    font-size: 22px;
  }

  .financial-composition-heading,
  .financial-legend {
    align-items: flex-start;
  }

  .financial-composition-heading {
    flex-wrap: wrap;
  }

  .financial-legend {
    display: grid;
    gap: 8px;
  }
}


/* DASHBOARD — ATIVIDADE RECENTE */
.activity-center { margin-top: 22px; }
.activity-count { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:5px 11px; border:1px solid var(--border,#e5e7eb); border-radius:999px; color:var(--text-secondary,#6b7280); background:var(--surface-alt,#f8fafc); font-size:12px; font-weight:700; white-space:nowrap; }
.activity-list { display:grid; gap:0; }
.activity-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--border,#e5e7eb); }
.activity-marker { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:12px; background:var(--surface-alt,#f8fafc); color:var(--text-primary,#27272a); font-size:13px; font-weight:800; }
.activity-marker-cliente { color:#7c3aed; background:#f3e8ff; } .activity-marker-pagamento { color:#047857; background:#d1fae5; font-size:11px; } .activity-marker-fatura { color:#1d4ed8; background:#dbeafe; } .activity-marker-ativacao { color:#b45309; background:#fef3c7; } .activity-marker-solicitacao { color:#6d28d9; background:#ede9fe; }
.activity-main { min-width:0; } .activity-title-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .activity-title-line > strong { overflow-wrap:anywhere; font-size:13px; font-weight:750; } .activity-main p { margin:4px 0 0; color:var(--text-secondary,#6b7280); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.activity-type { display:inline-flex; align-items:center; padding:3px 7px; border-radius:6px; background:var(--surface-alt,#f8fafc); color:var(--text-secondary,#6b7280); font-size:10px; font-weight:750; white-space:nowrap; } .activity-type-pagamento { color:#047857; background:#d1fae5; } .activity-type-cliente { color:#6d28d9; background:#f3e8ff; } .activity-type-ativacao { color:#92400e; background:#fef3c7; }
.activity-side { display:flex; align-items:center; justify-content:flex-end; gap:12px; } .activity-side > strong { font-size:13px; white-space:nowrap; }
@media (max-width:720px) { .activity-row { grid-template-columns:36px minmax(0,1fr); gap:10px; padding:13px 0; } .activity-marker { width:36px; height:36px; border-radius:10px; } .activity-side { grid-column:2; justify-content:space-between; padding-top:2px; } }


/* =========================================================
   VORTEXGRID CENTRAL — METALLIC GRAPHITE
   Cinza metálico, grafite e prata; violeta apenas como acento
   ========================================================= */
:root {
  --sidebar: #20242a;
  --sidebar-raised: #292e35;
  --sidebar-hover: #343a43;
  --sidebar-active: #3a3d49;
  --sidebar-text: #e2e5e9;
  --sidebar-muted: #9ca4af;
  --sidebar-border: #3b414a;
  --background: #dfe3e7;
  --surface: #f2f4f6;
  --surface-alt: #e8ebef;
  --surface-hover: #e2e6eb;
  --text: #20252c;
  --text-secondary: #4e5661;
  --muted: #747e89;
  --border: #cbd1d8;
  --border-strong: #b5bdc6;
  --sidebar-width: 264px;
  --metal-accent: #8d82ad;
}

html { background: #dfe3e7; }
body {
  color: var(--text);
  background:
    radial-gradient(ellipse at 74% 0%, rgba(255,255,255,.68), transparent 38%),
    linear-gradient(135deg, #e5e8eb 0%, #dce0e4 48%, #e7e9ec 100%);
}
[hidden] { display: none !important; }

/* Acesso / login */
.login-page {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.14), transparent 48%),
    linear-gradient(145deg, #252a31 0%, #171b20 55%, #343a42 100%);
}
.login-brand .brand,
.login-brand .brand-copy strong { color: #f1f3f5; }
.login-brand .brand-copy small { color: #aab1ba; }
.login-card {
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(145deg, #f7f8f9, #e6e9ec);
  box-shadow: 0 28px 80px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.9);
}
.login-heading h1 { color: #242a31; }
.login-heading p, .login-security, .login-footer { color: #68727e; }
.login-heading .eyebrow { color: #766b91; }
.login-submit {
  border: 1px solid #4c535c;
  background: linear-gradient(180deg, #454c55, #282e35);
  box-shadow: 0 5px 14px rgba(27,32,38,.2);
}
.login-submit:hover { background: linear-gradient(180deg, #555d67, #30363e); }

/* Navegação lateral grafite */
.sidebar {
  padding: 23px 15px 16px;
  border-right: 1px solid #11151a;
  background:
    linear-gradient(160deg, rgba(255,255,255,.045), transparent 34%),
    linear-gradient(180deg, #272c33 0%, #1d2127 100%);
  color: var(--sidebar-text);
  box-shadow: 9px 0 28px rgba(22,27,33,.13);
}
.sidebar > .brand, .sidebar > .brand:hover { color: #f3f5f7; }
.sidebar > .brand .brand-copy strong { color: #f3f5f7; }
.sidebar > .brand .brand-copy small { color: #a3abb5; }
.sidebar .brand-mark {
  border: 1px solid #737b86;
  background: linear-gradient(145deg, #e0e4e8, #8c949e);
  color: #20252c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 3px 9px rgba(0,0,0,.22);
}
.sidebar-divider { margin: 22px 5px 20px; background: #3b424b; }
.nav-label { color: #89929e; letter-spacing: 1.15px; }
.nav-item, .sidebar [data-page], .nav-menu [data-page] {
  min-height: 43px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #b9c0c8;
  font-weight: 650;
}
.nav-item:hover, .sidebar [data-page]:hover, .nav-menu [data-page]:hover {
  border-color: #474d57;
  background: linear-gradient(100deg, #363c44, #2e333b);
  color: #f1f3f5;
}
.nav-item.active, .sidebar [data-page].active, .nav-menu [data-page].active {
  border-color: #555b68;
  background: linear-gradient(100deg, #454b55, #343a43);
  box-shadow: inset 3px 0 0 #a49abb, inset 0 1px 0 rgba(255,255,255,.055);
  color: #fff;
}
.nav-item.active::before, .sidebar [data-page].active::before, .nav-menu [data-page].active::before { display: none; }
.nav-icon { color: #aab2bd; }
.nav-item.active .nav-icon { color: #d0c7e3; }
.sidebar-system {
  border: 1px solid #414851;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
}
.sidebar-system strong { color: #e6e9ed; }
.sidebar-system small { color: #9da6b1; }
.sidebar-user { border-top-color: #3b424b; }
.sidebar-user-info strong { color: #e7eaee; }
.sidebar-user-info small { color: #9ca5b0; }
.sidebar .logout { color: #b9c0c8; }
.sidebar .logout:hover { border-color: #4a515b; background: #343a43; color: #fff; }
.sidebar .account-button { border-color: #414851; }

/* Barra superior e área de trabalho */
.main-area { min-height: 100vh; }
.topbar {
  min-height: 96px;
  padding: 20px clamp(22px, 3vw, 44px);
  border-bottom: 1px solid #cbd1d8;
  background: linear-gradient(180deg, rgba(248,249,250,.96), rgba(230,233,236,.94));
  box-shadow: 0 4px 18px rgba(44,51,59,.055);
}
.topbar-heading .eyebrow { color: #7d8490; }
.topbar h1, .topbar-title {
  color: #252b32;
  font-size: clamp(20px, 1.7vw, 24px);
  letter-spacing: -.7px;
}
.topbar-description { color: #737d88; font-size: 12px; }
.user-chip {
  border: 1px solid #cbd1d8;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8f9fa, #e6e9ed);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 7px rgba(35,42,49,.06);
}
.content {
  max-width: 1720px;
  padding: 30px clamp(20px, 3vw, 44px) 42px;
}
.app-footer {
  padding-right: clamp(20px, 3vw, 44px);
  padding-left: clamp(20px, 3vw, 44px);
  border-top: 1px solid #cbd1d8;
  color: #737d88;
}

/* Cartões com acabamento prata, sem excesso de brilho */
.content-card, .panel, .stat-card {
  border: 1px solid #c9cfd6;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(43,50,58,.055), inset 0 1px 0 rgba(255,255,255,.78);
}
.content-card, .panel {
  padding: 23px;
  background: linear-gradient(145deg, #f5f6f7, #e9ecef);
}
.stat-card {
  padding: 20px;
  background: linear-gradient(145deg, #fafbfc 0%, #e9edf0 100%);
}
.stat-card:hover {
  border-color: #aeb6c0;
  box-shadow: 0 9px 22px rgba(43,50,58,.09), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(-1px);
}
.stat-icon {
  border: 1px solid #cbd1d8;
  border-radius: 11px;
  background: linear-gradient(145deg, #f6f7f8, #dfe3e7);
  color: #59616c;
}
.stat-value { color: #22282f; letter-spacing: -.7px; }
.dashboard-welcome {
  border: 1px solid #c4cbd3;
  background:
    radial-gradient(ellipse at 91% 8%, rgba(255,255,255,.85), transparent 36%),
    linear-gradient(120deg, #f7f8f9 0%, #e2e6ea 100%);
}
.welcome-copy h2 { color: #252b32; }
.financial-overview, .alert-center, .activity-center { border-radius: 14px; }
.financial-summary-item {
  border: 1px solid #cdd3da;
  border-radius: 11px;
  background: linear-gradient(145deg, #f8f9fa, #e9edf0);
}
.activity-count {
  border-color: #cbd1d8;
  background: #e7eaee;
  color: #525b66;
}
.activity-row { border-top-color: #d1d6dc; }
.activity-marker { background: linear-gradient(145deg, #f7f8f9, #dfe3e7); color: #343b44; }
.activity-marker-cliente, .activity-marker-solicitacao { color: #655879; background: #e7e2ee; }
.activity-marker-pagamento { color: #24684f; background: #dcebe4; }
.activity-marker-fatura { color: #3e5e80; background: #dce6ef; }
.activity-marker-ativacao { color: #86622e; background: #f0e6d4; }
.activity-type { background: #e4e8ec; color: #535d68; }
.activity-type-pagamento { color: #24684f; background: #dcebe4; }
.activity-type-cliente { color: #655879; background: #e7e2ee; }
.activity-type-ativacao { color: #86622e; background: #f0e6d4; }

.btn, button.btn { border-radius: 9px; }
.btn-primary, .btn.primary, button[type="submit"].btn {
  border-color: #424951;
  background: linear-gradient(180deg, #4b535d, #2e343b);
  color: #fff;
  box-shadow: 0 3px 9px rgba(35,42,49,.15);
}
.btn-primary:hover, .btn.primary:hover, button[type="submit"].btn:hover {
  background: linear-gradient(180deg, #59616c, #373e46);
}
input, select, textarea {
  border-color: #c3cad2;
  border-radius: 9px;
  background: #f8f9fa;
  color: #252b32;
}
input:focus, select:focus, textarea:focus {
  border-color: #8c829f;
  box-shadow: 0 0 0 3px rgba(140,130,159,.15);
  outline: none;
}
table { border-color: #cbd1d8; }
thead th { background: linear-gradient(180deg, #e8ebee, #dce1e5); color: #59626d; }
tbody tr:hover { background: rgba(255,255,255,.58); }

/* Menu móvel */
.mobile-menu-toggle, .sidebar-backdrop { display: none; }
@media (max-width: 950px) {
  :root { --sidebar-width: 244px; }
  .sidebar { align-items: stretch; width: var(--sidebar-width); padding: 22px 14px 16px; }
  .sidebar > .brand { justify-content: flex-start; width: 100%; padding: 0 7px; }
  .sidebar > .brand .brand-copy, .sidebar > .brand .brand-mark { display: grid; }
  .sidebar-divider { width: auto; margin: 22px 5px 20px; }
  .nav-label { height: auto; overflow: visible; margin: 17px 10px 7px; opacity: 1; }
  .nav-item, .sidebar [data-page], .nav-menu [data-page] { justify-content: flex-start; padding-right: 11px; padding-left: 12px; }
  .nav-item > span:not(.nav-icon), .nav-badge, .sidebar-system, .sidebar-bottom, .sidebar-user-info, .sidebar .logout { display: flex; }
  .sidebar .sidebar-user-info { display: grid; }
  .sidebar .logout { display: flex; }
  .main-area { margin-left: var(--sidebar-width); }
}
@media (max-width: 760px) {
  :root { --sidebar-width: 270px; }
  .sidebar {
    display: flex;
    align-items: stretch;
    width: min(var(--sidebar-width), calc(100vw - 54px));
    transform: translateX(-105%);
    transition: transform .22s ease;
    z-index: 120;
    box-shadow: 18px 0 48px rgba(12,16,21,.28);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop:not([hidden]) {
    position: fixed; z-index: 110; inset: 0; display: block;
    border: 0; border-radius: 0; background: rgba(14,18,23,.55);
    backdrop-filter: blur(2px);
  }
  .main-area { margin-left: 0; }
  .topbar { min-height: 82px; justify-content: flex-start; gap: 13px; padding: 15px 17px; }
  .mobile-menu-toggle {
    display: inline-flex; width: 42px; height: 42px; flex: 0 0 auto;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border: 1px solid #c5ccd3; border-radius: 10px;
    background: linear-gradient(145deg, #fafbfc, #e1e5e9);
    box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgba(35,42,49,.06);
  }
  .mobile-menu-toggle span { display: block; width: 17px; height: 2px; border-radius: 2px; background: #454d57; }
  .topbar-heading { flex: 1; }
  .topbar h1, .topbar-title { font-size: 19px; }
  .topbar-description, .topbar-actions { display: none; }
  .content { padding: 21px 15px 30px; }
  .content-card, .panel { padding: 18px; }
  .stats-grid, .stats-grid-admin { gap: 11px; }
  .dashboard-grid, .dashboard-grid-secondary { gap: 14px; }
  .app-footer { flex-wrap: wrap; padding: 15px; }
}
@media (max-width: 430px) {
  .topbar { padding-right: 12px; padding-left: 12px; }
  .content { padding-right: 11px; padding-left: 11px; }
  .stats-grid, .stats-grid-admin { grid-template-columns: 1fr; }
}


/* =========================================================
   CENTRAL — REFINO DE USABILIDADE DO DASHBOARD
   ========================================================= */
.page-header {
  align-items: center;
  margin-bottom: 22px;
}
.page-header .btn[data-action="refresh-dashboard"] {
  min-height: 39px;
  border-color: #aeb6bf;
  background: linear-gradient(180deg, #f7f8f9 0%, #dfe3e7 100%);
  color: #343b43;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(35,42,49,.07);
}
.page-header .btn[data-action="refresh-dashboard"]:hover {
  border-color: #8f98a3;
  background: linear-gradient(180deg, #fff 0%, #d7dce1 100%);
}
.page-header .btn[data-action="refresh-dashboard"] span {
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  transition: transform .2s ease;
}
.page-header .btn[data-action="refresh-dashboard"]:hover span {
  transform: rotate(35deg);
}
.stats-grid {
  align-items: stretch;
}
.stat-card {
  display: flex;
  flex-direction: column;
  min-height: 152px;
}
.stat-card-top {
  gap: 12px;
}
.stat-description {
  margin-top: auto;
  padding-top: 10px;
  line-height: 1.55;
}
.dashboard-grid,
.dashboard-grid-secondary {
  align-items: stretch;
}
.dashboard-grid > .content-card,
.dashboard-grid-secondary > .content-card {
  min-width: 0;
}
.panel-heading {
  gap: 16px;
}
.panel-heading > div {
  min-width: 0;
}
.financial-summary-item,
.activity-row,
.list-row {
  min-width: 0;
}
.btn:focus-visible,
.nav-item:focus-visible,
.quick-link:focus-visible,
.mobile-menu-toggle:focus-visible {
  outline: 2px solid #8d82ad;
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .page-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
  }
  .page-header > div {
    flex: 1 1 100%;
  }
  .page-header .btn {
    width: 100%;
  }
  .stat-card {
    min-height: 132px;
  }
  .panel-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .financial-overview-heading > .btn {
    width: 100%;
  }
}


/* =========================================================
   VORTEXGRID CENTRAL — REDESIGN VISUAL PREMIUM
   Sobrescritas de apresentação: preserva estrutura e lógica
   ========================================================= */
:root {
  --primary: #6d4aff;
  --primary-hover: #5636df;
  --primary-dark: #4527bf;
  --primary-soft: #f0edff;
  --primary-border: #ddd5ff;
  --background: #f4f5f9;
  --surface: #ffffff;
  --surface-alt: #fafaff;
  --text: #171a2b;
  --text-secondary: #454a60;
  --muted: #777e94;
  --border: #e5e7ef;
  --border-strong: #d7dbe7;
  --sidebar: #10101b;
  --sidebar-raised: #191927;
  --sidebar-hover: #222235;
  --sidebar-active: #2a2348;
  --sidebar-text: #ecebfa;
  --sidebar-muted: #9392ad;
  --sidebar-width: 276px;
  --radius-sm: 11px;
  --radius-md: 15px;
  --radius: 18px;
  --radius-lg: 22px;
  --shadow-xs: 0 2px 5px rgba(20, 20, 45, .035);
  --shadow-sm: 0 5px 18px rgba(20, 20, 45, .045);
  --shadow: 0 12px 32px rgba(20, 20, 45, .055);
  --transition: .2s cubic-bezier(.2,.7,.2,1);
}
body {
  background: #f4f5f9;
  color: #191b2c;
  letter-spacing: -.01em;
}
button, input, select, textarea { font-family: inherit; }
button { transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
button:active:not(:disabled) { transform: translateY(1px); }

/* Login: composição editorial com fundo escuro e painel de acesso limpo */
.login-page {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  padding: 44px 22px;
  background:
    radial-gradient(ellipse at 14% 12%, rgba(109,74,255,.24), transparent 38%),
    radial-gradient(ellipse at 90% 85%, rgba(36,164,190,.12), transparent 32%),
    linear-gradient(135deg, #10101b 0%, #171729 52%, #10141f 100%);
}
.login-page::before,
.login-page::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
.login-page::before {
  inset: 0;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}
.login-page::after {
  width: 520px;
  height: 520px;
  top: -300px;
  right: -120px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(255,255,255,.018), 0 0 0 90px rgba(255,255,255,.014);
}
.login-shell {
  width: min(100%, 480px);
  margin: auto;
}
.login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.login-brand .brand { gap: 13px; }
.brand { gap: 12px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 15px;
  background: linear-gradient(145deg, #8c72ff, #5938e7 70%);
  box-shadow: 0 9px 24px rgba(85,57,226,.34), inset 0 1px 0 rgba(255,255,255,.32);
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 25px;
  font-weight: 800;
}
.brand-mark.small { width: 42px; height: 42px; border-radius: 13px; font-size: 22px; }
.login-brand .brand-copy strong { color: #fff; font-family: Manrope, sans-serif; font-size: 23px; letter-spacing: -.8px; }
.login-brand .brand-copy small { color: #a5a4bd; font-size: 12px; letter-spacing: .02em; }
.login-card {
  padding: 38px 38px 28px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 24px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 28px 90px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.06);
}
.login-heading { margin-bottom: 29px; }
.login-heading .eyebrow {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 7px 10px;
  border: 1px solid #e4dfff;
  border-radius: 999px;
  background: #f6f3ff;
  color: #6145d8;
  font-size: 9px;
  letter-spacing: 1.25px;
}
.login-heading h1 {
  margin: 0 0 10px;
  color: #19182b;
  font-family: Manrope, sans-serif;
  font-size: clamp(28px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -1.35px;
  line-height: 1.16;
}
.login-heading .muted { max-width: 350px; margin: 0; color: #777b90; font-size: 13px; line-height: 1.7; }
#login-form { display: grid; gap: 19px; }
.form-field { display: grid; gap: 8px; }
.form-field label { color: #38394d; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.form-field input {
  width: 100%;
  min-height: 49px;
  padding: 12px 14px;
  border: 1px solid #dfe1eb;
  border-radius: 12px;
  outline: none;
  background: #fbfbfe;
  color: #191a2d;
  box-shadow: inset 0 1px 2px rgba(25,25,50,.025);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-field input::placeholder { color: #a3a6b6; }
.form-field input:hover { border-color: #c8c4e5; }
.form-field input:focus { border-color: #8066f3; background: #fff; box-shadow: 0 0 0 4px rgba(109,74,255,.12); }
.login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 51px;
  margin-top: 5px;
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(105deg, #7253f5, #5839df);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(93,62,225,.24), inset 0 1px 0 rgba(255,255,255,.22);
}
.login-submit:hover { background: linear-gradient(105deg, #8065ff, #6345eb); box-shadow: 0 11px 24px rgba(93,62,225,.3); transform: translateY(-1px); }
.login-submit span { font-size: 19px; line-height: 1; }
.login-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 25px;
  padding-top: 19px;
  border-top: 1px solid #ececf3;
  color: #888ba0;
  font-size: 11px;
}
.login-security span { color: #6e51e7; font-size: 12px; }
.login-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 23px;
  color: #9291aa;
  font-size: 10px;
}
.login-footer span:last-child { text-align: right; }

/* Estrutura do painel */
.app-layout { background: #f4f5f9; }
.sidebar {
  padding: 25px 17px 18px;
  border-right: 1px solid rgba(255,255,255,.045);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(109,74,255,.13), transparent 36%),
    linear-gradient(180deg, #12121f 0%, #10101a 100%);
  box-shadow: 8px 0 30px rgba(17,17,35,.035);
}
.sidebar > .brand { padding: 0 8px; }
.sidebar .brand-copy strong { color: #fff; font-family: Manrope, sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.35px; }
.sidebar .brand-copy small { color: #9291ad; font-size: 10px; letter-spacing: .04em; }
.sidebar-divider { margin: 25px 7px 21px; border-color: rgba(255,255,255,.09); }
.nav-label { margin: 19px 10px 8px; color: #777791; font-size: 9px; font-weight: 800; letter-spacing: 1.45px; }
.nav-item {
  position: relative;
  min-height: 44px;
  gap: 12px;
  margin: 3px 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #b9b8cf;
  font-size: 12px;
  font-weight: 600;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-item:hover { border-color: rgba(255,255,255,.055); background: rgba(255,255,255,.055); color: #fff; }
.nav-item.active {
  border-color: rgba(147,123,255,.2);
  background: linear-gradient(100deg, rgba(109,74,255,.25), rgba(109,74,255,.11));
  color: #fff;
  box-shadow: inset 3px 0 0 #9078ff;
}
.nav-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 7px;
  background: rgba(255,255,255,.055);
  color: #a8a4d2;
  font-size: 15px;
}
.nav-item.active .nav-icon { background: rgba(133,107,255,.22); color: #c6baff; }
.nav-badge { border-radius: 999px; background: #f2a65a; color: #24170d; font-size: 10px; font-weight: 800; }
.sidebar-system {
  gap: 11px;
  margin: 16px 2px;
  padding: 13px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.sidebar-system strong { color: #dedcf0; font-size: 10px; font-weight: 700; }
.sidebar-system small { color: #85849f; font-size: 9px; }
.sidebar-bottom { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-user { gap: 10px; padding: 8px 6px 12px; }
.avatar {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(109,74,255,.18);
  border-radius: 12px;
  background: linear-gradient(145deg, #f1edff, #e4ddff);
  color: #5c40d2;
  font-weight: 800;
}
.sidebar .avatar { border-color: rgba(255,255,255,.12); background: linear-gradient(145deg,#7761e7,#4b38aa); color: #fff; }
.sidebar-user-info strong { color: #f0eff8; font-size: 11px; }
.sidebar-user-info small { color: #85849f; font-size: 9px; }
.sidebar .logout { min-height: 38px; margin-top: 4px; border-radius: 9px; color: #aaa9c1; font-size: 11px; }
.sidebar .logout:hover { background: rgba(255,255,255,.06); color: #fff; }

/* Cabeçalho e área de trabalho */
.main-area { min-width: 0; }
.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: 108px;
  padding: 22px clamp(22px, 3vw, 42px);
  border-bottom: 1px solid rgba(224,226,236,.85);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
}
.topbar-heading .eyebrow { margin-bottom: 5px; color: #8270d8; font-size: 9px; letter-spacing: 1.5px; }
.topbar h1, .topbar-title {
  margin: 0;
  color: #191a2b;
  font-family: Manrope, sans-serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.9px;
  line-height: 1.25;
}
.topbar-description { margin: 5px 0 0; color: #85899d; font-size: 11px; }
.topbar-actions { gap: 12px; }
.user-chip {
  gap: 11px;
  padding: 8px 13px 8px 8px;
  border: 1px solid #e8e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(20,20,45,.035);
}
.user-chip .avatar { width: 36px; height: 36px; }
.user-chip-copy strong { color: #323449; font-size: 11px; font-weight: 800; }
.user-chip-copy small { color: #85899d; font-size: 10px; }
.content { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 30px clamp(22px, 3vw, 42px) 40px; }
.app-footer {
  margin: 0 clamp(22px, 3vw, 42px);
  padding: 17px 0 22px;
  border-top: 1px solid #e3e5ed;
  color: #989caf;
  font-size: 10px;
}
.notice { margin: 18px clamp(22px, 3vw, 42px) 0; border-radius: 12px; }

/* Superfícies, cartões e dados */
.content-card, .panel, .stat-card, .dashboard-card, .card, .modal-card {
  border-color: #e7e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(24,24,48,.035);
}
.content-card, .panel { background: #fff; }
.content-card:hover, .stat-card:hover { box-shadow: 0 10px 28px rgba(24,24,48,.06); }
.stat-card {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  padding: 21px;
  border: 1px solid #e7e8f0;
  background: linear-gradient(145deg,#fff 0%,#fdfdff 100%);
}
.stat-card::after {
  position: absolute;
  top: -28px;
  right: -24px;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(109,74,255,.07);
  border-radius: 50%;
  box-shadow: 0 0 0 15px rgba(109,74,255,.025), 0 0 0 30px rgba(109,74,255,.018);
  content: "";
  pointer-events: none;
}
.stat-card-top { position: relative; z-index: 1; }
.stat-card h3, .stat-value, .stat-number { color: #202136; font-family: Manrope, sans-serif; letter-spacing: -.55px; }
.stat-label { color: #85899e; font-size: 10px; font-weight: 700; letter-spacing: .035em; }
.stat-description { color: #999caf; font-size: 10px; }
.panel-heading h2, .content-card h2, .section-title { color: #25263b; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -.25px; }
.panel-heading p, .content-card p { color: #81859a; }
.page-header h2, .page-header h1 { color: #202136; font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.65px; }
.btn, button.btn, .button {
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.btn-primary, .btn.primary, button.primary {
  border-color: #6848eb;
  background: linear-gradient(105deg,#7658f4,#5d3de0);
  color: #fff;
  box-shadow: 0 4px 11px rgba(98,67,224,.16);
}
.btn-primary:hover, .btn.primary:hover, button.primary:hover { background: linear-gradient(105deg,#8469ff,#6747ec); box-shadow: 0 7px 16px rgba(98,67,224,.23); transform: translateY(-1px); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: #dfe2ec;
  border-radius: 10px;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: #8b76f1;
  box-shadow: 0 0 0 3px rgba(109,74,255,.1);
}
table { border-collapse: separate; border-spacing: 0; }
thead th { background: #f8f8fc; color: #777b91; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
tbody td { border-bottom-color: #ececf3; color: #50536a; font-size: 11px; }
tbody tr:hover td { background: #faf9ff; }
.badge, .status-badge, .pill { border-radius: 999px; font-weight: 700; }
.modal-card { border: 1px solid #e6e7ef; box-shadow: 0 24px 80px rgba(15,15,35,.24); }
hr, .divider { border-color: #ececf3; }
:focus-visible { outline-color: rgba(109,74,255,.5); }

/* Responsividade */
@media (min-width: 761px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); overflow-y: auto; }
  .main-area { margin-left: var(--sidebar-width); }
}
@media (max-width: 760px) {
  .login-page { padding: 26px 16px; }
  .login-card { padding: 29px 23px 23px; border-radius: 20px; }
  .login-brand { margin-bottom: 23px; }
  .login-heading h1 { font-size: 29px; }
  .login-footer { flex-wrap: wrap; justify-content: center; text-align: center; }
  .login-footer span:last-child { text-align: center; }
  .topbar { position: relative; min-height: 80px; padding: 15px 17px; }
  .topbar h1, .topbar-title { font-size: 20px; }
  .content { padding: 22px 16px 30px; }
  .app-footer { margin: 0 16px; }
  .notice { margin-right: 16px; margin-left: 16px; }
}
@media (max-width: 430px) {
  .login-card { padding: 25px 19px 20px; }
  .login-heading h1 { font-size: 27px; }
  .login-security { align-items: flex-start; text-align: center; line-height: 1.5; }
}


/* =========================================================
   VORTEXGRID CENTRAL — REDESIGN VISUAL V2
   Aplicação real do layout: login premium + painel operacional
   ========================================================= */

:root {
  --primary: #6d4aff;
  --primary-hover: #5836e8;
  --primary-dark: #4323c4;
  --primary-soft: #f0edff;
  --primary-border: #ddd5ff;
  --sidebar-width: 272px;
  --background: #f4f5fa;
  --surface: #ffffff;
  --text: #171a2b;
  --text-secondary: #464b61;
  --muted: #7f8499;
  --border: #e5e7f0;
  --shadow-sm: 0 4px 16px rgba(24, 25, 54, .045);
  --shadow: 0 10px 32px rgba(24, 25, 54, .07);
  --shadow-lg: 0 24px 70px rgba(20, 18, 49, .15);
}

body {
  background: #f4f5fa;
  color: #171a2b;
  font-size: 14px;
  letter-spacing: -.01em;
}

button, input, select, textarea { font-family: inherit; }
a { transition: color .18s ease, opacity .18s ease; }

/* Login: composição de produto SaaS, não formulário genérico */
#login-view.login-page {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  padding: 48px 24px;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(113, 76, 255, .23), transparent 34%),
    radial-gradient(ellipse at 85% 90%, rgba(73, 52, 184, .22), transparent 38%),
    linear-gradient(135deg, #10101b 0%, #17152a 52%, #10111d 100%);
}
#login-view.login-page::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
#login-view .login-shell {
  width: min(100%, 440px);
  margin: auto;
}
#login-view .login-brand {
  display: flex;
  justify-content: center;
  margin: 0 0 28px;
}
#login-view .brand { gap: 13px; color: #fff; }
#login-view .brand-mark {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
  background: linear-gradient(145deg, #a18aff 0%, #704cff 48%, #4927c8 100%);
  box-shadow: 0 10px 32px rgba(104,72,255,.38), inset 0 1px 0 rgba(255,255,255,.32);
  font-size: 27px;
}
#login-view .brand-copy strong {
  color: #fff;
  font-size: 21px;
  letter-spacing: -.8px;
}
#login-view .brand-copy small {
  color: #a6a4c0;
  font-size: 11px;
  letter-spacing: .35px;
}
#login-view .login-card {
  padding: 38px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 24px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 28px 90px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.1);
}
#login-view .login-heading { margin-bottom: 29px; }
#login-view .login-heading .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 17px;
  padding: 8px 11px;
  border: 1px solid #e7e1ff;
  border-radius: 999px;
  background: #f5f2ff;
  color: #6345dc;
  font-size: 9px;
  letter-spacing: 1.1px;
}
#login-view .login-heading h1 {
  margin: 0 0 10px;
  color: #19182b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(27px, 5vw, 33px);
  font-weight: 800;
  letter-spacing: -1.3px;
  line-height: 1.16;
}
#login-view .login-heading .muted {
  max-width: 330px;
  margin: 0;
  color: #777b90;
  font-size: 13px;
  line-height: 1.75;
}
#login-view #login-form { display: grid; gap: 19px; }
#login-view .form-field { display: grid; gap: 8px; }
#login-view .form-field label {
  color: #303249;
  font-size: 12px;
  font-weight: 750;
}
#login-view .form-field input {
  width: 100%;
  min-height: 51px;
  padding: 0 15px;
  border: 1px solid #e0e2ec;
  border-radius: 12px;
  background: #fbfbfe;
  color: #202136;
  font-size: 13px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#login-view .form-field input::placeholder { color: #a5a8b8; }
#login-view .form-field input:focus {
  border-color: #8267f6;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(109,74,255,.12);
}
#login-view .login-submit {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 3px;
  padding: 0 18px;
  border: 1px solid #6844ee;
  border-radius: 12px;
  background: linear-gradient(105deg, #7959ff 0%, #5a37e5 100%);
  box-shadow: 0 9px 22px rgba(97,65,229,.25), inset 0 1px 0 rgba(255,255,255,.24);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#login-view .login-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 28px rgba(97,65,229,.32);
  filter: saturate(1.08);
}
#login-view .login-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #eeeef4;
  color: #85889b;
  font-size: 11px;
}
#login-view .login-security span { color: #7050ed; }
#login-view .login-footer {
  margin-top: 25px;
  color: #9c9ab5;
  font-size: 10px;
}
#login-view .login-footer span:last-child { color: #b8b5cc; }

/* Shell do painel */
#app-view.app-layout { min-height: 100vh; background: #f4f5fa; }
#app-view .sidebar {
  z-index: 40;
  padding: 25px 17px 18px;
  border-right: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(ellipse at 8% 0%, rgba(108,76,255,.19), transparent 33%),
    linear-gradient(180deg, #151424 0%, #11111e 60%, #10101a 100%);
  box-shadow: 10px 0 36px rgba(22,19,49,.07);
}
#app-view .sidebar > .brand { padding: 0 8px; }
#app-view .sidebar-divider { margin: 25px 7px 23px; border-color: rgba(255,255,255,.09); }
#app-view .nav-label {
  margin: 22px 11px 9px;
  color: #77758f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.45px;
}
#app-view .nav-item {
  display: flex;
  width: 100%;
  min-height: 45px;
  align-items: center;
  gap: 12px;
  margin: 3px 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #bdbbd1;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  transition: all .18s ease;
}
#app-view .nav-item:hover {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.055);
  color: #fff;
}
#app-view .nav-item.active {
  border-color: rgba(145,121,255,.2);
  background: linear-gradient(100deg, rgba(111,78,255,.28), rgba(111,78,255,.12));
  box-shadow: inset 3px 0 #9b86ff;
  color: #fff;
}
#app-view .nav-icon {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  color: #b5a8ff;
  font-size: 15px;
}
#app-view .nav-item.active .nav-icon { background: rgba(145,121,255,.18); color: #d3caff; }
#app-view .sidebar-system {
  margin: 17px 2px;
  padding: 13px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
#app-view .sidebar-bottom { border-top-color: rgba(255,255,255,.09); }
#app-view .sidebar .logout { width: 100%; padding: 10px 12px; text-align: left; }

/* Barra superior e hierarquia visual */
#app-view .main-area { min-height: 100vh; background: #f4f5fa; }
#app-view .topbar {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 23px clamp(24px, 3.1vw, 46px);
  border-bottom: 1px solid #e8e9f1;
  background: rgba(255,255,255,.94);
  box-shadow: 0 3px 15px rgba(20,22,49,.025);
  backdrop-filter: blur(16px);
}
#app-view .topbar-heading { min-width: 0; }
#app-view .topbar-heading .eyebrow { margin-bottom: 6px; color: #7b63e9; font-size: 9px; letter-spacing: 1.6px; }
#app-view .topbar h1, #app-view .topbar-title {
  margin: 0;
  color: #1b1b2e;
  font-family: "Manrope", sans-serif;
  font-size: clamp(23px, 2vw, 29px);
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 1.2;
}
#app-view .topbar-description { margin: 7px 0 0; color: #85899e; font-size: 12px; }
#app-view .user-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 13px 8px 8px;
  border: 1px solid #e8e9f1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(22,22,48,.035);
}
#app-view .user-chip-copy strong { color: #2b2c41; font-size: 12px; font-weight: 800; }
#app-view .content {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 32px clamp(24px, 3.1vw, 46px) 42px;
}
#app-view .app-footer {
  margin: 0 clamp(24px, 3.1vw, 46px);
  padding: 18px 0 24px;
  border-top: 1px solid #e4e6ef;
  color: #989caf;
  font-size: 11px;
}

/* Dashboard: métricas e blocos com contraste consistente */
#app-view .dashboard-grid { gap: 20px; }
#app-view .dashboard-grid-secondary { margin-top: 20px; }
#app-view .stat-card,
#app-view .content-card,
#app-view .panel,
#app-view .modal-card {
  border: 1px solid #e7e8f0;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(24,24,48,.035);
}
#app-view .stat-card {
  min-height: 156px;
  padding: 23px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#app-view .stat-card:hover {
  transform: translateY(-2px);
  border-color: #dcd4ff;
  box-shadow: 0 13px 30px rgba(40,30,90,.075);
}
#app-view .stat-label { color: #777d94; font-size: 11px; font-weight: 750; letter-spacing: .02em; }
#app-view .stat-value, #app-view .stat-number {
  color: #1d1e32;
  font-family: "Manrope", sans-serif;
  font-size: clamp(25px, 2.1vw, 31px);
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 1.25;
}
#app-view .stat-description { margin-top: 8px; color: #9699aa; font-size: 11px; }
#app-view .stat-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #e7e0ff;
  border-radius: 13px;
  background: #f3f0ff;
  color: #6b4ae8;
}
#app-view .panel-heading { gap: 12px; }
#app-view .panel-heading h2,
#app-view .content-card h2,
#app-view .section-title {
  color: #25263b;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.4px;
}
#app-view .panel-heading p, #app-view .content-card p { color: #85899d; }
#app-view .section-eyebrow { color: #8069e8; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
#app-view .quick-actions { gap: 12px; }
#app-view .quick-link {
  border: 1px solid #e7e8f1;
  border-radius: 12px;
  background: #fff;
  transition: all .18s ease;
}
#app-view .quick-link:hover { transform: translateY(-1px); border-color: #d9d0ff; background: #faf9ff; }
#app-view .quick-link-icon { border-radius: 10px; background: #f1edff; color: #6b4ae8; }
#app-view .activity-row, #app-view .list-row { border-bottom-color: #eff0f5; }
#app-view .activity-row:hover, #app-view .list-row:hover { background: #fafaff; }

/* Tabelas, filtros, formulários e botões */
#app-view .page-header { margin-bottom: 24px; }
#app-view .page-header h1, #app-view .page-header h2 {
  color: #202136;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  letter-spacing: -.7px;
}
#app-view .table-wrapper {
  overflow-x: auto;
  border: 1px solid #e7e8f0;
  border-radius: 14px;
  background: #fff;
}
#app-view table { width: 100%; border-collapse: separate; border-spacing: 0; }
#app-view thead th {
  padding: 14px 16px;
  border-bottom: 1px solid #e9eaf2;
  background: #f8f8fc;
  color: #7d8196;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
#app-view tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #eff0f5;
  color: #4b5065;
  font-size: 12px;
  vertical-align: middle;
}
#app-view tbody tr:last-child td { border-bottom: 0; }
#app-view tbody tr:hover td { background: #fbfaff; }
#app-view input:not([type="checkbox"]):not([type="radio"]),
#app-view select, #app-view textarea {
  min-height: 42px;
  border: 1px solid #dfe2ec;
  border-radius: 10px;
  background: #fff;
  color: #24263b;
  font-size: 12px;
}
#app-view input:focus, #app-view select:focus, #app-view textarea:focus {
  border-color: #8973f4;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(109,74,255,.11);
}
#app-view .btn, #app-view button.btn, #app-view .button {
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 750;
  transition: all .18s ease;
}
#app-view .btn-primary, #app-view .btn.primary, #app-view button.primary {
  border: 1px solid #6947e8;
  background: linear-gradient(110deg, #7858f6, #5c3bdf);
  color: #fff;
  box-shadow: 0 4px 12px rgba(98,67,224,.18);
}
#app-view .btn-primary:hover, #app-view .btn.primary:hover, #app-view button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 17px rgba(98,67,224,.25);
}
#app-view .badge, #app-view .status-badge, #app-view .pill { border-radius: 999px; font-weight: 750; }
#app-view .empty-state, #app-view .error-state {
  border: 1px dashed #dfe1ec;
  border-radius: 14px;
  background: #fafaff;
  color: #85899e;
}
#app-view .notice { padding: 13px 16px; border: 1px solid #e5e0ff; background: #f7f5ff; color: #5140a5; }

/* Modal */
#modal .modal-card {
  border: 1px solid #e4e5ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(16,15,37,.25);
}

/* Mobile */
@media (max-width: 760px) {
  #login-view.login-page { padding: 30px 16px; }
  #login-view .login-card { padding: 29px 23px 25px; border-radius: 20px; }
  #app-view .topbar { align-items: flex-start; gap: 12px; padding: 17px 18px; }
  #app-view .topbar-description { max-width: 260px; }
  #app-view .user-chip { padding: 5px; }
  #app-view .user-chip-copy { display: none; }
  #app-view .content { padding: 22px 16px 30px; }
  #app-view .dashboard-grid { gap: 13px; }
  #app-view .stat-card { min-height: 132px; padding: 17px; }
  #app-view .app-footer { margin: 0 16px; }
}
@media (max-width: 430px) {
  #login-view .login-card { padding: 25px 19px 22px; }
  #login-view .login-heading h1 { font-size: 27px; }
  #app-view .topbar h1 { font-size: 22px; }
}

/* VortexGrid Central — redesign híbrido premium */
:root{--sidebar-width:264px}[hidden]{display:none!important}
#login-view.login-page{display:grid;min-height:100vh;padding:30px;place-items:center;background:radial-gradient(ellipse at 12% 10%,rgba(113,76,255,.2),transparent 32%),radial-gradient(ellipse at 90% 85%,rgba(80,59,183,.17),transparent 36%),#11111d}
#login-view .login-shell{display:grid;width:min(1180px,100%);min-height:min(700px,calc(100vh - 60px));grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr);align-items:stretch;gap:clamp(30px,5vw,68px);padding:clamp(26px,4vw,60px);border:1px solid #ffffff12;border-radius:28px;background:linear-gradient(135deg,#1f1d35b0,#14142166);box-shadow:0 40px 120px #0005}
#login-view .login-story{display:flex;min-width:0;flex-direction:column;justify-content:space-between;padding:8px 0;color:#fff}#login-view .login-story-content{max-width:480px;padding:35px 0}#login-view .login-story-kicker{color:#b7acd9;font-size:9px;font-weight:800;letter-spacing:1.6px}#login-view .login-story-content h2{margin:23px 0 16px;color:#fff;font-family:Manrope,sans-serif;font-size:clamp(36px,4.3vw,56px);font-weight:800;letter-spacing:-2.5px;line-height:1.08}#login-view .login-story-content h2 span{color:#a999ff}#login-view .login-story-content>p{max-width:410px;color:#a7a5bd;font-size:13px;line-height:1.9}#login-view .login-story-features{display:grid;gap:20px;margin-top:34px}#login-view .login-story-features>div{display:flex;align-items:center;gap:13px}#login-view .story-feature-icon{display:grid;width:37px;height:37px;flex:0 0 37px;place-items:center;border:1px solid #aa99ff33;border-radius:11px;background:#876fff1a;color:#b5a5ff;font-size:10px;font-weight:800}#login-view .login-story-features>div>span:last-child{display:grid;gap:4px}#login-view .login-story-features strong{color:#f0eff8;font-size:12px}#login-view .login-story-features small{color:#8d8ba5;font-size:10px}#login-view .login-story-footer{display:flex;justify-content:space-between;gap:10px;padding-top:20px;border-top:1px solid #ffffff17;color:#72718a;font-size:8px;font-weight:800;letter-spacing:1.3px}
#login-view .login-panel{display:flex;min-width:0;flex-direction:column;justify-content:center;align-self:center;padding:clamp(24px,3vw,40px);border:1px solid #ffffffb3;border-radius:22px;background:#fff;box-shadow:0 25px 70px #0003}#login-view .login-brand{margin-bottom:25px}#login-view .login-brand .brand-copy strong{color:#202136}#login-view .login-brand .brand-copy small{color:#85899e}#login-view .login-card{width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}#login-view .login-heading h1{font-size:clamp(26px,2.8vw,33px);letter-spacing:-1.2px}#login-view .login-footer{display:flex;justify-content:space-between;gap:12px;margin-top:22px;color:#9598aa;font-size:9px}#login-view .login-footer span:last-child{color:#9598aa}
#app-view .topbar{gap:18px}#app-view .topbar-actions{display:flex;min-width:0;align-items:center;justify-content:flex-end;gap:11px;margin-left:auto}#app-view .global-search-wrap{position:relative;width:clamp(185px,22vw,310px)}#app-view .global-search{display:flex;min-height:42px;align-items:center;gap:9px;padding:0 10px 0 13px;border:1px solid #e5e6ef;border-radius:12px;background:#f8f8fc;color:#85899e}#app-view .global-search:focus-within{border-color:#b8aaff;background:#fff;box-shadow:0 0 0 4px #6d4aff14}#app-view .global-search input{width:100%;min-width:0;min-height:38px;padding:0;border:0;outline:0;background:transparent;box-shadow:none;font-size:11px}#app-view .global-search input:focus{border:0;box-shadow:none}#app-view .global-search kbd{padding:3px 5px;border:1px solid #e1e2eb;border-radius:5px;background:#fff;color:#989bad;font-size:9px}
#app-view .global-search-results{position:absolute;z-index:100;top:calc(100% + 10px);right:0;width:min(440px,calc(100vw - 32px));max-height:65vh;overflow:auto;padding:8px;border:1px solid #e6e7f0;border-radius:16px;background:#fff;box-shadow:0 24px 65px #1614362e}#app-view .global-search-heading{padding:10px;color:#9396a9;font-size:9px;font-weight:800;letter-spacing:1px}#app-view .global-search-result{display:flex;width:100%;align-items:center;gap:10px;padding:11px;border:1px solid transparent;border-radius:10px;background:transparent;text-align:left;cursor:pointer}#app-view .global-search-result:hover{border-color:#e6e0ff;background:#f8f6ff}#app-view .global-search-result-icon{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border-radius:10px;background:#f0edff;color:#6b4ae8;font-size:12px}#app-view .global-search-result-service{background:#eaf6ff;color:#2670a9}#app-view .global-search-result-invoice{background:#e8f7ef;color:#268151}#app-view .global-search-result-copy{display:grid;min-width:0;flex:1;gap:4px}#app-view .global-search-result-copy strong{overflow:hidden;color:#2a2b40;font-size:11px;text-overflow:ellipsis;white-space:nowrap}#app-view .global-search-result-copy small{overflow:hidden;color:#888ca0;font-size:10px;text-overflow:ellipsis;white-space:nowrap}#app-view .global-search-result-kind{color:#999caf;font-size:9px}#app-view .global-search-message{padding:20px;color:#85899e;font-size:11px;text-align:center}
#app-view .topbar-utility{display:flex;align-items:center;gap:8px}#app-view .topbar-icon-button{position:relative;display:grid;width:41px;height:41px;flex:0 0 41px;place-items:center;border:1px solid #e7e8f0;border-radius:12px;background:#fff;color:#666b82;font-size:19px;cursor:pointer}#app-view .header-alerts-badge{position:absolute;top:-5px;right:-5px;display:grid;min-width:18px;height:18px;place-items:center;padding:0 4px;border:2px solid #fff;border-radius:99px;background:#e34c61;color:#fff;font-size:8px;font-weight:800}#app-view .topbar-shortcut-button{display:flex;min-height:41px;align-items:center;gap:7px;padding:0 11px;border:1px solid #e6e7f0;border-radius:12px;background:#fff;color:#454960;font-size:10px;font-weight:750;white-space:nowrap;cursor:pointer}#app-view .shortcuts-wrap{position:relative}#app-view .shortcuts-menu{position:absolute;z-index:100;top:calc(100% + 10px);right:0;width:240px;padding:8px;border:1px solid #e6e7f0;border-radius:15px;background:#fff;box-shadow:0 22px 55px #16143629}#app-view .shortcuts-menu>button{display:flex;width:100%;align-items:center;gap:10px;padding:11px;border:1px solid transparent;border-radius:10px;background:transparent;text-align:left;cursor:pointer}#app-view .shortcuts-menu>button:hover{background:#f8f6ff}#app-view .shortcuts-menu>button>span:last-child{display:grid;gap:4px}#app-view .shortcuts-menu strong{color:#2d2e43;font-size:11px}#app-view .shortcuts-menu small{color:#8d91a4;font-size:9px}
#app-view .sidebar-collapse-toggle{display:flex;min-height:36px;align-items:center;gap:10px;margin:12px 3px 0;padding:0 11px;border:1px solid #ffffff12;border-radius:9px;background:#ffffff09;color:#aaa5c4;font-size:10px;cursor:pointer}#app-view .sidebar-collapse-toggle>span:first-child{font-size:19px}#app-view .alert-center-highlight{outline:2px solid #b7a7ff;box-shadow:0 0 0 5px #6d4aff19}
@media(min-width:761px){body.sidebar-collapsed{--sidebar-width:84px}body.sidebar-collapsed #app-view .sidebar{padding-right:12px;padding-left:12px}body.sidebar-collapsed #app-view .sidebar>.brand{justify-content:center;padding:0}body.sidebar-collapsed #app-view .sidebar>.brand .brand-copy,body.sidebar-collapsed #app-view .nav-label,body.sidebar-collapsed #app-view .nav-item>span:not(.nav-icon):not(.nav-badge),body.sidebar-collapsed #app-view .sidebar-system>div,body.sidebar-collapsed #app-view .sidebar-user-info,body.sidebar-collapsed #app-view .collapse-toggle-label{display:none!important}body.sidebar-collapsed #app-view .nav-item{justify-content:center;padding:9px 4px}body.sidebar-collapsed #app-view .nav-icon{width:34px;height:34px}body.sidebar-collapsed #app-view .sidebar-system,body.sidebar-collapsed #app-view .sidebar-user,body.sidebar-collapsed #app-view .sidebar-collapse-toggle{justify-content:center}body.sidebar-collapsed #app-view .sidebar .logout{justify-content:center;padding:10px 4px;font-size:0}body.sidebar-collapsed #app-view .sidebar .logout>span{font-size:16px}body.sidebar-collapsed #app-view .sidebar-collapse-toggle{padding:0}}
@media(max-width:1180px){#app-view .topbar{flex-wrap:wrap}#app-view .topbar-actions{width:100%;justify-content:space-between}#app-view .global-search-wrap{flex:1;width:auto}}
@media(max-width:760px){#login-view.login-page{padding:12px}#login-view .login-shell{display:flex;min-height:auto;flex-direction:column;gap:18px;padding:16px;border-radius:22px}#login-view .login-story-content{padding:6px 0}#login-view .login-story-content h2{margin:12px 0 8px;font-size:clamp(28px,7vw,38px);letter-spacing:-1px}#login-view .login-story-content>p{font-size:12px}#login-view .login-story-brand,#login-view .login-story-features,#login-view .login-story-footer{display:none}#login-view .login-panel{width:100%;padding:23px 19px}#app-view .topbar-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}#app-view .global-search-wrap{grid-column:1/-1;grid-row:1}#app-view .topbar-utility{grid-column:1;grid-row:2}#app-view .user-chip{grid-column:2;grid-row:2;justify-self:end}}
@media(max-width:430px){#app-view .global-search kbd{display:none}#app-view .topbar-shortcut-button{padding:0 8px;font-size:9px}}

/* Refinamento de produto — painel operacional híbrido premium */
#app-view.app-layout{background:#f3f4f9;color:#282a3d}
#app-view .main-area{background:linear-gradient(180deg,#f8f8fc 0,#f2f3f8 100%)}
#app-view .content{padding-top:30px}
#app-view .content>.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 25px;padding:0 0 20px;border-bottom:1px solid #e4e5ef}
#app-view .page-header>div{min-width:0}
#app-view .page-header h1{margin:0;color:#202137;font-size:clamp(23px,2.2vw,30px);line-height:1.25;letter-spacing:-1px}
#app-view .page-header p{max-width:740px;margin:8px 0 0;color:#85899d;font-size:12px;line-height:1.7}
#app-view .page-header>.btn,#app-view .page-header>button{flex:0 0 auto}
#app-view .stats-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0 0 22px}
#app-view .stats-grid:not(.stats-grid-admin){grid-template-columns:repeat(4,minmax(0,1fr))}
#app-view .stat-card{position:relative;display:flex;min-height:164px;flex-direction:column;justify-content:space-between;gap:20px;padding:19px;border:1px solid #e6e7f0;border-radius:16px;background:linear-gradient(145deg,#fff 0%,#fdfdff 100%);box-shadow:0 4px 16px #20204406}
#app-view .stat-card:before{position:absolute;top:0;right:18px;left:18px;height:2px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#7c5cf4,#c5b8ff);content:""}
#app-view .stat-card-top{align-items:center}
#app-view .stat-label{max-width:calc(100% - 46px);color:#777b91;font-size:10px;letter-spacing:.015em}
#app-view .stat-icon{width:38px;height:38px;border:1px solid #e8e2ff;border-radius:12px;background:#f4f1ff;color:#7051e9}
#app-view .stat-value,#app-view .stat-number{overflow-wrap:anywhere;color:#22233a;font-size:clamp(21px,1.8vw,28px);letter-spacing:-.8px}
#app-view .stat-description{margin-top:5px;color:#9296a8;font-size:10px;line-height:1.55}
#app-view .alert-center{border-color:#e5e6ef;border-radius:16px;background:#fff}
#app-view .dashboard-alert{border-radius:12px}
#app-view .dashboard-alert-danger{border-color:#f1d8dc;background:#fff8f8}
#app-view .dashboard-alert-warning{border-color:#f1e5ca;background:#fffcf5}
#app-view .dashboard-alert-info{border-color:#dce6fb;background:#f7faff}
#app-view .alert-center-clear{display:flex;align-items:center;gap:14px;border-color:#dbece3;background:linear-gradient(100deg,#f7fcf9,#fff)}
#app-view .alert-center-clear>div{flex:1}
#app-view .alert-center-clear p{margin:4px 0 0;color:#85899d;font-size:11px}
#app-view .alert-clear-icon{display:grid;width:36px;height:36px;flex:0 0 36px;place-items:center;border-radius:12px;background:#e4f5eb;color:#23814e;font-weight:800}
#app-view .financial-overview{background:linear-gradient(120deg,#fff 55%,#faf8ff)}
#app-view .financial-summary-item{border-color:#e8e8f0;border-radius:13px;background:#fff}
#app-view .financial-summary-item>strong{color:#25263b;font-family:Manrope,sans-serif;font-size:clamp(19px,1.8vw,25px);letter-spacing:-.6px}
#app-view .financial-progress{height:10px;overflow:hidden;border-radius:999px;background:#eeedf5}
#app-view .financial-progress-current,#app-view .financial-progress-overdue{height:100%;border-radius:999px}
#app-view .financial-progress-current{background:linear-gradient(90deg,#35b77c,#62d6a0)}
#app-view .financial-progress-overdue{background:linear-gradient(90deg,#e96c7d,#d83d57)}
#app-view .activity-center{margin-top:0;margin-bottom:22px}
#app-view .activity-row{grid-template-columns:40px minmax(0,1fr) auto;gap:13px}
#app-view .activity-main{min-width:0}
#app-view .activity-title-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#app-view .activity-title-line>strong{color:#303148;font-size:12px}
#app-view .activity-main>p{margin:5px 0 0;color:#8b8fa2;font-size:10px;line-height:1.6}
#app-view .activity-side{display:flex;align-items:flex-end;gap:10px}
#app-view .activity-side>strong{color:#303148;font-size:11px}
#app-view .dashboard-grid{gap:18px;margin-bottom:18px}
#app-view .dashboard-grid>.content-card{min-width:0;padding:22px;border-radius:16px}
#app-view .dashboard-grid .panel-heading{align-items:center}
#app-view .bar-chart{min-height:180px}
#app-view .list-row{gap:12px;padding:15px 0}
#app-view .list-row-main{min-width:0}
#app-view .list-row-main>strong{color:#33344a;font-size:11px}
#app-view .list-row-main>small{color:#8b8fa2;font-size:10px;line-height:1.6}
#app-view .list-row-side{flex:0 0 auto}
#app-view .mini-stats>div{border-bottom:1px solid #eff0f5}
#app-view .mini-stats>div>strong{color:#25263b;font-family:Manrope,sans-serif;font-size:22px}
#app-view .mini-stats>div>span{color:#85899d;font-size:10px}
#app-view .sidebar{background:radial-gradient(ellipse at 0 0,rgba(116,88,255,.17),transparent 40%),linear-gradient(180deg,#191827 0%,#14131f 60%,#11111a 100%)}
#app-view .sidebar>.brand .brand-mark{box-shadow:0 5px 17px #795bff35}
#app-view .sidebar-collapse-toggle{margin-top:15px}
#app-view .topbar{min-height:102px;padding:20px clamp(22px,3vw,42px);box-shadow:0 5px 18px #1b1a3805}
#app-view .topbar-heading .eyebrow{color:#8a74ec;font-weight:800}
#app-view .user-chip{max-width:210px}
#app-view .user-chip-copy{min-width:0}
#app-view .user-chip-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app-view .table-wrapper{box-shadow:0 4px 18px #24234305}
#app-view .table-wrapper tbody tr{transition:background .15s ease}
#app-view .btn:focus-visible,#app-view button:focus-visible,#app-view a:focus-visible{outline:3px solid #aa98ff;outline-offset:2px}
@media(max-width:1280px){#app-view .stats-grid.stats-grid-admin{grid-template-columns:repeat(3,minmax(0,1fr))}#app-view .stats-grid:not(.stats-grid-admin){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){#app-view .topbar{align-items:flex-start}#app-view .topbar-heading{flex:1}#app-view .stats-grid.stats-grid-admin{grid-template-columns:repeat(2,minmax(0,1fr))}#app-view .financial-summary-grid{grid-template-columns:1fr}#app-view .dashboard-grid,#app-view .dashboard-grid-secondary{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){#app-view .content{padding-top:21px}#app-view .content>.page-header{align-items:flex-start;flex-direction:column;padding-bottom:17px}#app-view .content>.page-header>.btn,#app-view .content>.page-header>button{width:100%}#app-view .stats-grid.stats-grid-admin,#app-view .stats-grid:not(.stats-grid-admin){grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}#app-view .stat-card{min-height:145px;padding:15px}#app-view .stat-label{font-size:10px}#app-view .stat-value,#app-view .stat-number{font-size:22px}#app-view .alert-center-clear{align-items:flex-start;flex-wrap:wrap}#app-view .alert-center-clear .alert-count{margin-left:50px}#app-view .activity-row{grid-template-columns:35px minmax(0,1fr);gap:10px}#app-view .activity-marker{width:34px;height:34px}#app-view .activity-side{grid-column:2;justify-content:space-between;align-items:center}#app-view .activity-side>button{margin-left:auto}#app-view .dashboard-grid>.content-card{padding:17px}#app-view .financial-summary-grid{gap:9px}}
@media(max-width:420px){#app-view .stats-grid.stats-grid-admin,#app-view .stats-grid:not(.stats-grid-admin){grid-template-columns:minmax(0,1fr)}#app-view .stat-card{min-height:125px}#app-view .topbar-shortcut-button{white-space:normal}#app-view .alert-center .panel-heading{flex-direction:column}}
@media(prefers-reduced-motion:reduce){#app-view *,#login-view *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* =========================================================
   VORTEXGRID CENTRAL — FINAL PRODUCT POLISH
   Consistência visual, acessibilidade e tabelas operacionais
   ========================================================= */
:root {
  --focus-ring: 0 0 0 3px rgba(112, 71, 235, .22);
}
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
#app-view .page-header { align-items: flex-start; gap: 20px; }
#app-view .page-header h1 { letter-spacing: -.035em; }
#app-view .page-header p { max-width: 760px; line-height: 1.65; }
#app-view .content-card,
#app-view .stat-card { min-width: 0; }
#app-view .content-card { overflow-wrap: anywhere; }
#app-view .table-wrapper {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #c9cddd transparent;
}
#app-view table { width: 100%; border-collapse: separate; border-spacing: 0; }
#app-view table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8f8fc;
  color: #687087;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
#app-view table tbody tr { transition: background-color .16s ease; }
#app-view table tbody tr:hover { background: #faf9ff; }
#app-view table td, #app-view table th { vertical-align: middle; }
#app-view table td { line-height: 1.5; }
#app-view .btn { transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
#app-view .btn:active { transform: translateY(1px); }
#app-view .btn-primary { box-shadow: 0 3px 8px rgba(112, 71, 235, .15); }
#app-view .form-group label,
#app-view label { color: #41475a; font-weight: 650; }
#app-view input:not([type="checkbox"]):not([type="radio"]),
#app-view select,
#app-view textarea {
  min-height: 42px;
  border-color: #dfe2ed;
  border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#app-view input:focus,
#app-view select:focus,
#app-view textarea:focus {
  border-color: #9a83f4;
  box-shadow: 0 0 0 3px rgba(112, 71, 235, .12);
  outline: 0;
}
#app-view .empty-state {
  padding: 32px 22px;
  border: 1px dashed #d9dceb;
  border-radius: 14px;
  background: linear-gradient(145deg, #fcfcff, #f8f8fc);
  color: #747c91;
  text-align: center;
  line-height: 1.7;
}
#app-view .modal,
#app-view [role="dialog"] { overscroll-behavior: contain; }
#app-view .activity-row,
#app-view .list-row { min-width: 0; }
#app-view .activity-main,
#app-view .list-row-main { min-width: 0; }
#app-view .activity-main p,
#app-view .list-row small { overflow-wrap: anywhere; }
#app-view .global-search-result[aria-selected="true"],
#app-view .global-search-result:focus-visible {
  background: #f3efff;
  outline: 0;
}
#app-view .alert-center-highlight {
  box-shadow: 0 0 0 4px rgba(112, 71, 235, .12), var(--shadow);
}
#app-view .status-badge,
#app-view .badge { white-space: nowrap; }
#login-view input:focus-visible,
#login-view button:focus-visible { box-shadow: var(--focus-ring); }
@media (max-width: 900px) {
  #app-view .page-header { flex-direction: column; align-items: stretch; }
  #app-view .page-header > button { align-self: flex-start; }
  #app-view .financial-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app-view .table-wrapper { margin-inline: -2px; }
}
@media (max-width: 620px) {
  #app-view .financial-summary-grid { grid-template-columns: minmax(0, 1fr); }
  #app-view .activity-row { grid-template-columns: auto minmax(0, 1fr); }
  #app-view .activity-side { grid-column: 2; justify-content: space-between; flex-direction: row; align-items: center; }
  #app-view .quick-actions { flex-wrap: wrap; }
  #app-view .page-header h1 { font-size: clamp(24px, 7vw, 32px); }
  #app-view .content-card { border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* =========================================================
   VORTEXGRID CENTRAL — PREMIUM HYBRID METALLIC (APPROVED)
   Grafite + aço + prata + violeta discreto.
   Sobrescreve a direção roxa anterior para alinhar ao site.
   ========================================================= */
:root {
  --primary: #77708f;
  --primary-hover: #655d7d;
  --primary-dark: #504965;
  --primary-soft: #eeedf2;
  --primary-border: #d9d6e2;
  --sidebar: #20242A;
  --sidebar-raised: #292E35;
  --sidebar-hover: #30363E;
  --sidebar-active: #373440;
  --sidebar-text: #E4E7EA;
  --sidebar-muted: #A2A8B0;
  --sidebar-border: rgba(255,255,255,.09);
  --background: #DFE3E7;
  --surface: #F2F4F6;
  --surface-alt: #E9EDF0;
  --surface-hover: #E6E9ED;
  --text: #252A30;
  --text-secondary: #4E555E;
  --muted: #737B84;
  --muted-light: #9BA2AA;
  --border: #D7DCE1;
  --border-strong: #C6CDD4;
  --focus-ring: 0 0 0 3px rgba(141,130,173,.24);
}
body.premium-hybrid-metallic { background:#DFE3E7; }
#login-view.login-page {
  padding:clamp(12px,3vw,34px);
  background:
    radial-gradient(ellipse at 8% 6%,rgba(141,130,173,.18),transparent 34%),
    radial-gradient(ellipse at 95% 88%,rgba(167,176,185,.14),transparent 36%),
    linear-gradient(135deg,#171B20 0%,#20242A 58%,#272C33 100%);
}
#login-view .login-shell {
  width:min(1280px,100%);
  min-height:min(730px,calc(100vh - 68px));
  grid-template-columns:minmax(0,1.1fr) minmax(380px,.8fr);
  gap:clamp(32px,5vw,76px);
  padding:clamp(28px,4vw,64px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;
  background:linear-gradient(135deg,rgba(49,55,63,.86),rgba(31,35,41,.9));
  box-shadow:0 35px 100px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.045);
}
#login-view .login-story-content h2 span { color:#C0B8D2; }
#login-view .login-story-kicker { color:#C3BBCF; }
#login-view .story-feature-icon {
  border-color:rgba(180,170,200,.24);
  background:rgba(141,130,173,.14);
  color:#D0C8DE;
}
#login-view .login-panel {
  border-color:rgba(255,255,255,.82);
  border-radius:20px;
  background:linear-gradient(145deg,#F8F9FA,#EDF0F2);
  box-shadow:0 28px 75px rgba(0,0,0,.24);
}
#login-view .login-heading .eyebrow {
  border-color:#DCD8E4;
  background:#ECEAF0;
  color:#686174;
}
#login-view .login-heading h1 { color:#242930; }
#login-view .login-heading p { color:#747B84; }
#login-view .login-submit {
  background:linear-gradient(135deg,#77708F,#625B78);
  box-shadow:0 8px 20px rgba(93,85,115,.2);
}
#login-view .login-submit:hover { background:linear-gradient(135deg,#68617E,#514A66); }
#app-view.app-layout { background:#DFE3E7; color:#252A30; }
#app-view .sidebar {
  border-right:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,#272C32 0%,#20242A 58%,#1B1F24 100%);
  box-shadow:8px 0 28px rgba(24,29,34,.06);
}
#app-view .sidebar .brand-mark { background:linear-gradient(145deg,#AAA3BA,#77708F); color:#fff; }
#app-view .sidebar .nav-item.active,
#app-view .sidebar [data-page].active {
  background:linear-gradient(100deg,rgba(141,130,173,.25),rgba(141,130,173,.08));
  color:#fff;
}
#app-view .sidebar [data-page].active::before { background:#B5ACC8; }
#app-view .sidebar .nav-icon,
#app-view .sidebar .nav-item.active .nav-icon { color:#C3BBD1; }
#app-view .sidebar .sidebar-system { border-color:rgba(255,255,255,.1); }
#app-view .main-area { background:linear-gradient(180deg,#E9ECEF 0%,#DFE3E7 100%); }
#app-view .topbar {
  border-bottom-color:#D3D8DE;
  background:rgba(246,247,248,.94);
  box-shadow:0 5px 20px rgba(36,42,48,.045);
}
#app-view .topbar-heading .eyebrow { color:#827A94; }
#app-view .topbar h1,
#app-view .topbar-title { color:#252A30; }
#app-view .content { max-width:1720px; }
#app-view .content>.page-header { border-bottom-color:#CDD3D9; }
#app-view .page-header h1 { color:#252A30; }
#app-view .page-header p { color:#6F7780; }
#app-view .stat-card,
#app-view .content-card,
#app-view .dashboard-grid>.content-card {
  border:1px solid rgba(255,255,255,.88);
  background:linear-gradient(145deg,#F7F8F9 0%,#EEF1F3 100%);
  box-shadow:0 8px 24px rgba(42,48,55,.045),inset 0 1px 0 rgba(255,255,255,.9);
}
#app-view .stat-card:hover { border-color:#D0CBD9; box-shadow:0 12px 30px rgba(42,48,55,.075); }
#app-view .stat-icon,
#app-view .quick-link-icon {
  background:linear-gradient(145deg,#E8E5ED,#DCD8E5);
  color:#756D89;
}
#app-view .stat-value,
#app-view .stat-number,
#app-view .welcome-copy { color:#252A30; }
#app-view .table-wrapper {
  border:1px solid #D9DEE3;
  border-radius:13px;
  background:#F6F7F8;
  box-shadow:0 4px 16px rgba(40,46,52,.035);
}
#app-view table thead th,
#app-view thead th { background:#E8EBEE; color:#68717A; }
#app-view table tbody tr:hover { background:#E9E7EE; }
#app-view table tbody td { border-bottom-color:#E0E4E8; }
#app-view .btn-primary {
  border-color:#77708F;
  background:linear-gradient(135deg,#817995,#6D667F);
  color:#fff;
  box-shadow:0 4px 12px rgba(95,87,115,.16);
}
#app-view .btn-primary:hover { background:linear-gradient(135deg,#706983,#5F586F); }
#app-view .btn:not(.btn-primary) {
  border-color:#D0D5DA;
  background:#F7F8F9;
  color:#424951;
}
#app-view .btn:not(.btn-primary):hover { border-color:#BEB8CB; background:#ECEAF0; }
#app-view input:focus,
#app-view select:focus,
#app-view textarea:focus,
#login-view input:focus {
  border-color:#9A91AE;
  box-shadow:0 0 0 3px rgba(141,130,173,.17);
}
#app-view .empty-state { border-color:#C9CFD5; background:linear-gradient(145deg,#F7F8F9,#ECEFF2); }
#app-view .app-footer { border-top-color:#CDD3D9; color:#78818A; }
#app-view .global-search-result[aria-selected="true"],
#app-view .global-search-result:focus-visible { background:#E9E6EF; }
#app-view .alert-center-highlight { box-shadow:0 0 0 4px rgba(141,130,173,.16),var(--shadow); }
@media(max-width:760px) {
  #login-view.login-page { padding:12px; }
  #login-view .login-shell { min-height:auto; padding:16px; gap:18px; }
  #login-view .login-panel { background:#F2F4F6; }
  #app-view .topbar { background:rgba(246,247,248,.97); }
}


/* =========================================================
   VORTEXGRID CENTRAL — ACABAMENTO FINAL / QA VISUAL
   Acessibilidade, foco, responsividade e interações previsíveis.
   ========================================================= */
.skip-link{
  position:fixed;z-index:10000;top:12px;left:12px;
  transform:translateY(-160%);padding:11px 16px;
  border:1px solid #c6c0d1;border-radius:10px;
  background:#f7f8f9;color:#252a30;font-weight:800;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.skip-link:focus{transform:translateY(0);outline:3px solid #b9aecb;outline-offset:3px}
#page-content:focus{outline:none}
#app-view :where(button,a,input,select,textarea,[tabindex]):focus-visible,
#login-view :where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid #8d82ad;outline-offset:3px;
}
#app-view .global-search-results{max-height:min(62vh,520px);overflow:auto;overscroll-behavior:contain}
#app-view .global-search-result{width:100%;text-align:left}
#app-view .global-search-result[aria-selected="true"]{background:#e6e2ec;box-shadow:inset 3px 0 #8d82ad}
#app-view .global-search-message{padding:15px 16px;color:#69717a;font-size:12px;line-height:1.65}
#app-view .notice{z-index:1100;max-width:min(560px,calc(100vw - 32px));overflow-wrap:anywhere}
#app-view .btn:disabled,#app-view button:disabled{transform:none;box-shadow:none}
#app-view .table-wrapper:focus-within{outline:2px solid rgba(141,130,173,.22);outline-offset:2px}
#app-view .content-card,#app-view .stat-card,#app-view .table-wrapper{min-width:0}
#app-view .content-card img{height:auto}
#app-view .app-footer{gap:10px;flex-wrap:wrap}
#login-view .login-story,#login-view .login-panel{min-width:0}
#login-view input{max-width:100%}
@media(max-width:760px){
  #app-view .topbar-actions{min-width:0;max-width:100%;flex-wrap:wrap}
  #app-view .global-search-wrap{width:min(100%,420px);min-width:0}
  #app-view .global-search{width:100%}
  #app-view .topbar-utility{max-width:100%;flex-wrap:wrap}
  #app-view .user-chip{max-width:100%}
  #app-view .content{overflow-x:clip}
  #app-view .table-wrapper{max-width:calc(100vw - 28px)}
  #login-view .login-shell{grid-template-columns:minmax(0,1fr);width:min(100%,560px)}
  #login-view .login-story{padding:24px 20px}
  #login-view .login-story-content h2{font-size:clamp(28px,7vw,40px)}
  #login-view .login-story-features{gap:12px}
  #login-view .login-panel{width:100%}
}
@media(max-width:420px){
  #app-view .topbar-actions{gap:10px}
  #app-view .topbar-utility{width:100%;justify-content:space-between}
  #app-view .shortcuts-wrap{max-width:100%}
  #app-view .topbar-shortcut-button{max-width:100%;font-size:11px}
  #app-view .global-search input{min-width:0}
  #app-view .user-chip{display:none}
  #app-view .table-wrapper{font-size:12px}
  #login-view .login-shell{padding:10px;gap:12px}
  #login-view .login-story{padding:20px 16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


/* =========================================================
   VORTEXGRID CENTRAL — DASHBOARD SAAS LAYOUT COMPOSITION
   Mantém os componentes e dados atuais; altera a apresentação.
   ========================================================= */
#app-view #page-content.vg-dashboard-ready{min-width:0}
#app-view .vg-dashboard-layout{display:grid;gap:20px;min-width:0}
#app-view .vg-dashboard-intro{display:grid;gap:17px;min-width:0}
#app-view .vg-dashboard-intro>.page-header{margin:0;padding:0 0 3px;border:0;background:transparent}
#app-view .vg-dashboard-intro>.page-header h1,
#app-view .vg-dashboard-intro>.page-header h2{font-family:Manrope,"DM Sans",sans-serif;font-size:clamp(25px,2.2vw,32px);font-weight:800;letter-spacing:-1px;color:#252a30}
#app-view .vg-dashboard-intro>.page-header p{max-width:680px;color:#707780;font-size:13px;line-height:1.6}
#app-view .vg-dashboard-intro>.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:0}
#app-view .vg-dashboard-intro>.stats-grid.stats-grid-admin{grid-template-columns:repeat(5,minmax(0,1fr))}
#app-view .vg-dashboard-intro .stat-card{display:flex;min-width:0;min-height:140px;flex-direction:column;justify-content:space-between;gap:14px;padding:17px;border:1px solid #d3d8de;border-radius:13px;background:linear-gradient(145deg,#f9fafb,#edf0f3);box-shadow:0 3px 12px rgba(32,36,42,.035)}
#app-view .vg-dashboard-intro .stat-card:before{background:linear-gradient(90deg,#8d82ad,#c2bacf)}
#app-view .vg-dashboard-intro .stat-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#app-view .vg-dashboard-intro .stat-label{color:#707780;font-size:11px;font-weight:700;line-height:1.4}
#app-view .vg-dashboard-intro .stat-value,#app-view .vg-dashboard-intro .stat-number,#app-view .vg-dashboard-intro .stat-card h3{color:#252a30;font-family:Manrope,"DM Sans",sans-serif;font-size:clamp(20px,1.8vw,27px);font-weight:800;letter-spacing:-.8px}
#app-view .vg-dashboard-main{min-width:0}
#app-view .vg-dashboard-main>.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,1fr);gap:17px;margin:0}
#app-view .vg-dashboard-main>.dashboard-grid>.content-card,
#app-view .vg-dashboard-bottom>.content-card{min-width:0;padding:21px;border:1px solid #d2d7dd;border-radius:14px;background:linear-gradient(145deg,#f8f9fa 0%,#f0f2f4 100%);box-shadow:0 4px 15px rgba(32,36,42,.035)}
#app-view .vg-dashboard-layout .panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:13px}
#app-view .vg-dashboard-layout .panel-heading h2{color:#2b3036;font-family:Manrope,"DM Sans",sans-serif;font-size:16px;font-weight:800;letter-spacing:-.3px}
#app-view .vg-dashboard-layout .panel-heading p{color:#7a8189;font-size:11px;line-height:1.5}
#app-view .vg-dashboard-layout .section-eyebrow{color:#81788f;font-size:9px;font-weight:800;letter-spacing:1.1px}
#app-view .vg-dashboard-layout .bar-chart{min-height:190px;margin-top:12px}
#app-view .vg-dashboard-layout .mini-stats{display:grid;gap:0;margin-top:15px}
#app-view .vg-dashboard-layout .mini-stats>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid #dfe3e7}
#app-view .vg-dashboard-layout .mini-stats strong{color:#30363d;font-family:Manrope,sans-serif;font-size:18px;font-weight:800}
#app-view .vg-dashboard-layout .mini-stats span{color:#747b83;font-size:11px}
#app-view .vg-dashboard-layout .alert-center{margin:0;padding:15px 17px;border:1px solid #dfd4c5;border-radius:13px;background:#f8f4ee}
#app-view .vg-dashboard-layout .alert-center .panel-heading{margin-bottom:9px}
#app-view .vg-dashboard-layout .alert-center .panel-heading h2{font-size:14px}
#app-view .vg-dashboard-layout .alert-list{display:grid;gap:7px}
#app-view .vg-dashboard-layout .dashboard-alert{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-radius:9px}
#app-view .vg-dashboard-layout .dashboard-alert-copy strong{font-size:11px}
#app-view .vg-dashboard-layout .dashboard-alert-copy p{font-size:10px;line-height:1.45}
#app-view .vg-dashboard-layout .financial-overview{margin:0;padding:19px 21px;border:1px solid #d2d7dd;border-radius:14px;background:#f5f6f7}
#app-view .vg-dashboard-layout .financial-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
#app-view .vg-dashboard-layout .financial-summary-item{min-width:0;padding:0 15px;border-left:1px solid #dce0e4}
#app-view .vg-dashboard-layout .financial-summary-item:first-child{padding-left:0;border-left:0}
#app-view .vg-dashboard-layout .financial-summary-item strong{color:#2d3339;font-family:Manrope,sans-serif;font-size:19px;font-weight:800;letter-spacing:-.5px}
#app-view .vg-dashboard-layout .financial-summary-item small{color:#858c93;font-size:10px;line-height:1.5}
#app-view .vg-dashboard-layout .financial-composition{margin-top:18px}
#app-view .vg-dashboard-layout .financial-progress{height:7px;border-radius:99px;background:#e0e4e7}
#app-view .vg-dashboard-layout .financial-progress-current{background:#719781}
#app-view .vg-dashboard-layout .financial-progress-overdue{background:#b97c5d}
#app-view .vg-dashboard-bottom{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:17px;min-width:0}
#app-view .vg-dashboard-bottom>.content-card{display:flex;flex-direction:column}
#app-view .vg-dashboard-bottom .panel-heading{min-height:52px}
#app-view .vg-dashboard-bottom .activity-row{grid-template-columns:34px minmax(0,1fr);gap:9px;padding:12px 0}
#app-view .vg-dashboard-bottom .activity-marker{width:32px;height:32px;border-radius:9px}
#app-view .vg-dashboard-bottom .activity-side{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
#app-view .vg-dashboard-bottom .activity-side>strong{font-size:10px}
#app-view .vg-dashboard-bottom .list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:13px 0}
#app-view .vg-dashboard-bottom .list-row-main{min-width:0}
#app-view .vg-dashboard-bottom .list-row-main strong{display:block;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
#app-view .vg-dashboard-bottom .list-row-main small{display:block;overflow:hidden;font-size:9px;line-height:1.5;text-overflow:ellipsis}
#app-view .vg-dashboard-bottom .list-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#app-view .vg-dashboard-bottom .list-row-side>strong{font-size:11px;white-space:nowrap}
#app-view .vg-dashboard-bottom .quick-link-list{display:grid;gap:8px;margin-top:15px}
#app-view .vg-dashboard-bottom .quick-link{border-color:#dfe3e7;background:#f8f9fa}
#app-view .vg-dashboard-layout .empty-state{padding:22px 10px;color:#858c93;font-size:11px;text-align:center}
@media(max-width:1250px){
 #app-view .vg-dashboard-intro>.stats-grid.stats-grid-admin{grid-template-columns:repeat(3,minmax(0,1fr))}
 #app-view .vg-dashboard-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app-view .vg-dashboard-bottom>.activity-center{grid-column:1/-1}
}
@media(max-width:980px){
 #app-view .vg-dashboard-main>.dashboard-grid{grid-template-columns:minmax(0,1fr)}
 #app-view .vg-dashboard-intro>.stats-grid,#app-view .vg-dashboard-intro>.stats-grid.stats-grid-admin{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app-view .vg-dashboard-layout .financial-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
 #app-view .vg-dashboard-layout{gap:15px}
 #app-view .vg-dashboard-intro>.page-header{align-items:flex-start;flex-direction:column}
 #app-view .vg-dashboard-intro>.page-header h1,#app-view .vg-dashboard-intro>.page-header h2{font-size:25px}
 #app-view .vg-dashboard-intro>.stats-grid,#app-view .vg-dashboard-intro>.stats-grid.stats-grid-admin{gap:9px}
 #app-view .vg-dashboard-intro .stat-card{min-height:125px;padding:14px 12px}
 #app-view .vg-dashboard-intro .stat-label{font-size:10px}
 #app-view .vg-dashboard-intro .stat-value,#app-view .vg-dashboard-intro .stat-number,#app-view .vg-dashboard-intro .stat-card h3{font-size:20px}
 #app-view .vg-dashboard-main>.dashboard-grid>.content-card,#app-view .vg-dashboard-bottom>.content-card{padding:15px}
 #app-view .vg-dashboard-layout .financial-summary-grid{grid-template-columns:minmax(0,1fr);gap:13px}
 #app-view .vg-dashboard-layout .financial-summary-item{padding:0;border:0}
 #app-view .vg-dashboard-bottom{grid-template-columns:minmax(0,1fr)}
 #app-view .vg-dashboard-bottom>.activity-center{grid-column:auto}
 #app-view .vg-dashboard-layout .dashboard-alert{grid-template-columns:28px minmax(0,1fr);gap:8px}
 #app-view .vg-dashboard-layout .dashboard-alert .btn{grid-column:2;justify-self:start}
}
@media(max-width:390px){
 #app-view .vg-dashboard-intro>.stats-grid,#app-view .vg-dashboard-intro>.stats-grid.stats-grid-admin{grid-template-columns:minmax(0,1fr)}
 #app-view .vg-dashboard-intro .stat-card{min-height:110px}
}


/* Correção definitiva do menu lateral em dispositivos móveis */
@media (max-width: 760px) {
  #app-view .sidebar {
    display: flex !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(270px, calc(100vw - 54px));
    max-width: calc(100vw - 54px);
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-110%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, visibility .22s ease;
    z-index: 120;
  }

  body.sidebar-open #app-view .sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  #app-view .sidebar-backdrop:not([hidden]) {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 110;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(14, 18, 23, .58);
    cursor: pointer;
  }

  #app-view .mobile-menu-toggle {
    display: inline-flex !important;
    position: relative;
    z-index: 130;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
  }

  #app-view .main-area {
    margin-left: 0 !important;
    min-width: 0;
  }
}

@media (min-width: 761px) {
  #app-view .sidebar {
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}

.btn-whatsapp { background:#16834a !important; border-color:#16834a !important; color:#fff !important; text-decoration:none !important; }
.btn-whatsapp:hover { background:#116c3c !important; }


/* Orçamentos: impedir que a coluna Proposta alargue toda a tabela */
#app-view .quotes-table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
#app-view table.quotes-table {
  width: 100%;
  min-width: 1050px;
  table-layout: fixed;
}
#app-view table.quotes-table th,
#app-view table.quotes-table td {
  overflow-wrap: anywhere;
  vertical-align: top;
}
#app-view table.quotes-table th:nth-child(1),
#app-view table.quotes-table td:nth-child(1) { width: 54px; }
#app-view table.quotes-table th:nth-child(2),
#app-view table.quotes-table td:nth-child(2) { width: 190px; }
#app-view table.quotes-table th:nth-child(3),
#app-view table.quotes-table td:nth-child(3) { width: 145px; }
#app-view table.quotes-table th:nth-child(4),
#app-view table.quotes-table td:nth-child(4) { width: 165px; }
#app-view table.quotes-table th:nth-child(5),
#app-view table.quotes-table td:nth-child(5) { width: 170px; }
#app-view table.quotes-table th:nth-child(6),
#app-view table.quotes-table td:nth-child(6) { width: 105px; }
#app-view table.quotes-table th:nth-child(7),
#app-view table.quotes-table td:nth-child(7) { width: 165px; }
#app-view table.quotes-table th:nth-child(8),
#app-view table.quotes-table td:nth-child(8) { width: 135px; }
#app-view table.quotes-table td:nth-child(5) {
  font-size: 12px;
  line-height: 1.45;
}
#app-view table.quotes-table td:nth-child(5) small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: #747b83;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (max-width: 760px) {
  #app-view .quotes-table-wrapper { max-width: calc(100vw - 28px); }
}


/* Correção mobile: ações do cabeçalho acessíveis e menus acima do conteúdo */
#app-view .topbar,
#app-view .topbar-actions,
#app-view .topbar-utility,
#app-view .shortcuts-wrap { min-width: 0; }
#app-view .shortcuts-menu {
  z-index: 500;
  max-height: min(70vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 950px) {
  #app-view .topbar-actions {
    display: grid !important;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-left: 0;
  }
  #app-view .global-search-wrap {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }
  #app-view .topbar-utility {
    grid-column: 1;
    grid-row: 2;
    display: flex !important;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  #app-view .shortcuts-wrap { position: relative; }
  #app-view .shortcuts-menu {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    width: min(320px, calc(100vw - 24px));
    max-height: min(70vh, 440px);
  }
  #app-view .topbar-icon-button,
  #app-view .topbar-shortcut-button {
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}
@media (max-width: 760px) {
  #app-view .topbar-actions { display: grid !important; }
  #app-view .topbar-utility { display: flex !important; }
  #app-view .shortcuts-wrap { max-width: calc(100vw - 80px); }
  #app-view .topbar-shortcut-button {
    min-height: 44px;
    padding: 0 12px;
    font-size: 12px;
  }
  #app-view .sidebar-backdrop:not([hidden]) { pointer-events: auto; }
  #app-view .mobile-menu-toggle { touch-action: manipulation; }
}


/* Correção de interação: recolher/expandir menu com mouse e toque */
#app-view #sidebar-collapse-toggle {
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
}
@media (min-width: 761px) {
  body.sidebar-collapsed #app-view .sidebar {
    width: 84px !important;
  }
  body.sidebar-collapsed #app-view .main-area {
    margin-left: 84px !important;
  }
}
@media (max-width: 760px) {
  #app-view #sidebar-collapse-toggle {
    display: none !important;
  }
  #app-view .mobile-menu-toggle {
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}