:root {
  --navy: #0b3558;
  --blue: #0b4f6c;
  --cyan: #14b8c4;
  --cyan-soft: #dff8fa;
  --white: #ffffff;
  --bg: #f3f7fa;
  --text: #183041;
  --muted: #6c7e8c;
  --border: #d9e4ea;
  --danger: #b42318;
  --warning: #a15c00;
  --success: #087a55;
  --shadow: 0 14px 35px rgba(22, 62, 86, .10);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 95% 0%, rgba(20,184,196,.12), transparent 24rem),
    var(--bg);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.full { width: 100%; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(11,53,88,.98), rgba(11,79,108,.94)),
    radial-gradient(circle at 20% 20%, rgba(20,184,196,.65), transparent 34rem);
}
.login-card {
  width: min(470px, 100%);
  background: rgba(255,255,255,.98);
  border-radius: 26px;
  padding: 30px;
  box-shadow: 0 28px 80px rgba(0,0,0,.25);
}
.login-card h1 { margin: 30px 0 8px; font-size: clamp(1.7rem, 4vw, 2.25rem); }
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  color: white; font-size: 1.35rem; font-weight: 900;
  background: linear-gradient(145deg, var(--cyan), var(--blue));
  box-shadow: 0 8px 22px rgba(20,184,196,.32);
}
.brand strong { display: block; letter-spacing: .11em; }
.brand span { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.brand-login .brand-mark { width: 52px; height: 52px; font-size: 1.6rem; }
.password-wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.password-wrap input { grid-column: 1 / -1; grid-row: 1; padding-right: 48px; }
.password-wrap button { grid-column: 2; grid-row: 1; margin-right: 6px; }
.connection-status {
  margin-top: 16px; padding: 10px 12px; border-radius: 12px;
  background: #eef5f8; color: var(--muted); font-size: .86rem;
}
.demo-help { margin-top: 16px; color: var(--muted); font-size: .88rem; }
.demo-help summary { cursor: pointer; font-weight: 700; color: var(--blue); }
.demo-grid { display: grid; gap: 8px; margin-top: 10px; }
.demo-grid button { border: 1px solid var(--border); background: white; padding: 10px; border-radius: 10px; text-align: left; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  background: linear-gradient(180deg, var(--navy), #092c49);
  color: white; padding: 24px 18px;
  display: flex; flex-direction: column; gap: 24px;
  box-shadow: 10px 0 28px rgba(11,53,88,.10);
}
.sidebar .brand span { color: rgba(255,255,255,.64); }
.main-nav { display: grid; gap: 7px; }
.nav-button {
  width: 100%; border: 0; border-radius: 13px; padding: 12px 14px;
  display: flex; gap: 11px; align-items: center;
  background: transparent; color: rgba(255,255,255,.78); text-align: left;
  font-weight: 650;
}
.nav-button:hover, .nav-button.active { background: rgba(255,255,255,.12); color: white; }
.nav-button.active { box-shadow: inset 3px 0 0 var(--cyan); }
.nav-icon { width: 22px; text-align: center; }
.sidebar-footer { margin-top: auto; display: grid; gap: 12px; }
.sync-badge { font-size: .78rem; color: rgba(255,255,255,.68); padding: 0 4px; }
.sync-badge.online { color: #77efd2; }
.sync-badge.offline { color: #ffd382; }

.main-area { min-width: 0; }
.topbar {
  min-height: 94px; padding: 20px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: rgba(243,247,250,.88); backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(217,228,234,.8);
}
.topbar h2 { margin: 0 0 4px; font-size: 1.65rem; }
.topbar p { margin: 0; font-size: .9rem; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.user-chip {
  max-width: 230px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 14px;
  background: white; font-size: .82rem; box-shadow: 0 4px 14px rgba(22,62,86,.05);
}
.user-chip strong, .user-chip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip span { color: var(--muted); margin-top: 2px; }
.content { padding: 26px 28px 110px; }

.grid { display: grid; gap: 16px; }
.grid.cards-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.cards-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.card {
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 19px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 14px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-header h3 { margin: 0; }
.metric { position: relative; overflow: hidden; min-height: 132px; }
.metric::after {
  content: ""; position: absolute; width: 96px; height: 96px; border-radius: 50%;
  right: -28px; top: -28px; background: var(--cyan-soft);
}
.metric .label { color: var(--muted); font-size: .86rem; position: relative; z-index: 1; }
.metric .value { font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 850; margin-top: 12px; position: relative; z-index: 1; }
.metric .hint { margin-top: 7px; font-size: .78rem; color: var(--muted); position: relative; z-index: 1; }
.metric.danger .value { color: var(--danger); }
.metric.success .value { color: var(--success); }
.metric.warning .value { color: var(--warning); }

.toolbar {
  display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.search { min-width: min(340px, 70vw); }
label { display: grid; gap: 6px; font-size: .82rem; font-weight: 700; color: #385367; }
input, select, textarea {
  width: 100%; border: 1px solid #cfdde4; border-radius: 11px;
  padding: 11px 12px; background: white; color: var(--text); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(20,184,196,.14); }
textarea { min-height: 96px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-grid.single { grid-template-columns: 1fr; }
.form-grid .span-2 { grid-column: 1 / -1; }

.button {
  border: 0; border-radius: 11px; padding: 10px 14px; font-weight: 750;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.button.primary { color: white; background: linear-gradient(145deg, var(--cyan), var(--blue)); box-shadow: 0 7px 20px rgba(11,79,108,.20); }
.button.secondary { color: var(--blue); background: #eaf5f7; border: 1px solid #cde9ed; }
.button.ghost { color: inherit; background: transparent; border: 1px solid currentColor; opacity: .88; }
.button.danger { color: white; background: var(--danger); }
.button.large { padding: 13px 18px; }
.button:disabled { opacity: .48; cursor: not-allowed; }
.icon-button { border: 0; background: transparent; padding: 8px; border-radius: 9px; }
.icon-button:hover { background: rgba(11,79,108,.08); }

.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 15px; }
table { width: 100%; border-collapse: collapse; min-width: 760px; background: white; }
th, td { padding: 13px 14px; border-bottom: 1px solid #e7eef2; text-align: left; font-size: .86rem; vertical-align: top; }
th { color: #526b7c; background: #f7fafb; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
tr.clickable:hover { background: #f3fbfc; }
.actions { display: flex; gap: 7px; flex-wrap: wrap; }
.small-button { border: 1px solid var(--border); border-radius: 9px; background: white; padding: 7px 9px; font-weight: 700; color: var(--blue); }

.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 9px; font-size: .73rem; font-weight: 800; }
.badge.cleaning { color: #07576a; background: #dff8fa; }
.badge.home { color: #71480b; background: #fff1d6; }
.badge.active, .badge.paid { color: #087a55; background: #dff7ed; }
.badge.inactive, .badge.overdue { color: #a1261d; background: #ffe9e6; }
.badge.partial, .badge.warning { color: #8a5200; background: #fff1d6; }
.badge.info { color: var(--blue); background: #e8f3f8; }

.list { display: grid; gap: 10px; }
.list-item { border: 1px solid var(--border); border-radius: 14px; padding: 13px; display: flex; justify-content: space-between; gap: 14px; background: white; }
.list-item strong { display: block; }
.list-item small { display: block; color: var(--muted); margin-top: 4px; }
.empty { border: 1px dashed #bfd0da; border-radius: 15px; padding: 28px; text-align: center; color: var(--muted); background: rgba(255,255,255,.65); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.section-title h3 { margin: 0; }
.divider { height: 1px; background: var(--border); margin: 18px 0; }

.category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.category-tab { border: 1px solid var(--border); background: white; color: var(--blue); border-radius: 999px; padding: 9px 13px; font-weight: 800; }
.category-tab.active { color: white; border-color: transparent; background: linear-gradient(145deg, var(--cyan), var(--blue)); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 14px; }
.product-card { border: 1px solid var(--border); background: white; border-radius: 16px; padding: 16px; box-shadow: 0 8px 24px rgba(22,62,86,.07); }
.product-card.inactive { opacity: .58; }
.product-card h4 { margin: 12px 0 4px; }
.product-price { font-size: 1.35rem; font-weight: 850; color: var(--blue); margin: 12px 0; }
.product-meta { color: var(--muted); font-size: .78rem; min-height: 35px; }

.balance-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 14px 0; }
.balance-box { border-radius: 14px; padding: 14px; background: #eff9fa; }
.balance-box.home { background: #fff6e8; }
.balance-box span { display: block; color: var(--muted); font-size: .78rem; }
.balance-box strong { display: block; font-size: 1.35rem; margin-top: 6px; }

.modal { width: min(860px, calc(100vw - 26px)); max-height: calc(100vh - 28px); border: 0; padding: 0; border-radius: 21px; box-shadow: 0 35px 100px rgba(0,0,0,.30); }
.modal::backdrop { background: rgba(7,25,38,.60); backdrop-filter: blur(4px); }
.modal-frame { margin: 0; }
.modal-header { display: flex; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: white; z-index: 2; }
.modal-header h3, .modal-header p { margin: 0; }
.modal-header p { margin-top: 4px; }
.modal-body { padding: 22px; max-height: calc(100vh - 120px); overflow: auto; }

.toast {
  position: fixed; z-index: 9999; right: 18px; bottom: 18px; max-width: min(390px, calc(100vw - 36px));
  padding: 13px 16px; border-radius: 13px; color: white; background: #15394f;
  box-shadow: 0 14px 36px rgba(0,0,0,.22); transform: translateY(120px); opacity: 0; transition: .25s;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }
.mobile-nav { display: none; }

@media (max-width: 1100px) {
  .grid.cards-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid.cards-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .topbar { padding: 14px 16px; min-height: 82px; align-items: flex-start; }
  .topbar h2 { font-size: 1.28rem; }
  .topbar-actions .button { display: none; }
  .user-chip { max-width: 138px; padding: 8px 9px; }
  .user-chip span { display: none; }
  .content { padding: 16px 14px 100px; }
  .mobile-nav {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); backdrop-filter: blur(15px); border-top: 1px solid var(--border);
    overflow-x: auto;
  }
  .mobile-nav .nav-button { color: var(--muted); padding: 8px 5px; display: grid; justify-items: center; gap: 2px; font-size: .68rem; border-radius: 10px; }
  .mobile-nav .nav-button.active { color: var(--blue); background: var(--cyan-soft); box-shadow: none; }
  .mobile-nav .nav-icon { font-size: 1.1rem; }
  .form-grid, .grid.two { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .search { min-width: 100%; }
  .toolbar, .toolbar-group { align-items: stretch; }
  .toolbar-group { width: 100%; }
  .toolbar-group > * { flex: 1 1 150px; }
  .modal-body { padding: 16px; }
}

@media (max-width: 540px) {
  .login-card { padding: 22px; border-radius: 20px; }
  .grid.cards-4, .grid.cards-3 { grid-template-columns: 1fr; }
  .metric { min-height: 112px; }
  .balance-strip { grid-template-columns: 1fr; }
  .topbar p { display: none; }
  .user-chip { max-width: 110px; }
  .button { padding: 10px 12px; }
}

@media print {
  .sidebar, .topbar, .mobile-nav, .button, .toolbar { display: none !important; }
  .app-shell { display: block; }
  .content { padding: 0; }
  .card, .table-wrap { box-shadow: none; border-color: #aaa; }
  body { background: white; }
}


/* V2 — catálogo visual e correções para celular */
body { overflow-x: hidden; }
.brand-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 8px 22px rgba(20,184,196,.22);
  flex: 0 0 auto;
}
.sidebar .brand-logo { width: 48px; height: 48px; }
.brand-login .brand-logo { width: 72px; height: 72px; }
.catalog-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: linear-gradient(120deg, #fff, #effbfd);
  box-shadow: 0 8px 24px rgba(22,62,86,.06);
}
.catalog-hero img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 14px;
  background: white;
}
.catalog-hero strong { display: block; font-size: 1.1rem; }
.catalog-hero span { display: block; color: var(--muted); margin-top: 3px; font-size: .86rem; }
.catalog-search { max-width: 620px; margin-bottom: 18px; }
.product-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.product-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.product-image-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #f5f7f8;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.product-image-wrap.placeholder {
  color: var(--muted);
  gap: 5px;
  align-content: center;
}
.product-image-wrap.placeholder span { font-size: 2.4rem; }
.product-card-body { padding: 15px; display: flex; flex-direction: column; flex: 1; }
.product-card h4 { margin: 10px 0 6px; line-height: 1.25; }
.product-meta { min-height: 0; line-height: 1.4; }
.product-variants {
  margin-top: 9px;
  padding: 8px 9px;
  border-radius: 10px;
  background: #f5f8fa;
  color: #526b7c;
  font-size: .75rem;
  line-height: 1.35;
}
.product-price { margin-top: auto; padding-top: 13px; font-size: 1.12rem; line-height: 1.3; }
.mobile-more-grid { display: grid; gap: 10px; }
.mobile-menu-item {
  width: 100%;
  border: 1px solid var(--border);
  background: white;
  border-radius: 14px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: var(--text);
}
.mobile-menu-item span { width: 30px; font-size: 1.3rem; text-align: center; }
.mobile-menu-item.primary-item { border-color: #bfe7eb; background: #effbfc; color: var(--blue); }
.mobile-menu-item.danger-item { border-color: #f3c7c3; color: var(--danger); background: #fff7f6; }

@media (max-width: 820px) {
  .topbar { width: 100%; min-width: 0; }
  .topbar > div:first-child { min-width: 0; }
  .topbar h2, .topbar p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-chip { width: 126px; max-width: 126px; }
  .mobile-nav {
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    width: 100%;
  }
  .mobile-nav .nav-button {
    min-width: 0;
    width: auto;
    padding-inline: 2px;
  }
  .mobile-nav .nav-button span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .product-card-body { padding: 11px; }
  .product-card h4 { font-size: .9rem; }
  .product-meta, .product-variants { font-size: .68rem; }
  .product-price { font-size: .9rem; }
  .product-card .actions { gap: 5px; }
  .product-card .small-button { padding: 6px 7px; font-size: .72rem; }
  .catalog-hero img { width: 58px; height: 58px; }
  .catalog-toolbar { align-items: stretch; }
}
@media (max-width: 390px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-image-wrap { aspect-ratio: 3 / 4; }
}

.form-hint { display:block; margin-top:6px; color:var(--muted); font-size:.84rem; line-height:1.35; }
.quick-client-box { padding:14px; border:1px dashed #9bcbd2; border-radius:18px; background:#f2fbfc; }
.quick-client-title { display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.quick-client-title span { color:var(--muted); font-size:.88rem; }
.sale-summary { display:flex; flex-direction:column; gap:5px; }
.sale-summary .muted { font-size:.9rem; }
input[readonly] { background:#f3f6f7; color:#44545c; }

/* V2.0.3 — painel do Zildo, funcionários e ficha completa da cliente */
.metric-button {
  width: 100%; text-align: left; color: inherit; font: inherit;
  border: 1px solid var(--border); cursor: pointer;
}
.metric-button:hover, .shortcut-card:hover, .employee-card:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(22,62,86,.15); }
.metric-button:active, .shortcut-card:active { transform: translateY(0); }
.metric-icon { position: relative; z-index: 1; display: block; font-size: 1.45rem; margin-bottom: 10px; }
.dashboard-daily .metric { min-height: 160px; }

.shortcut-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px;
}
.shortcut-card {
  min-height: 126px; padding: 16px 10px; border: 1px solid var(--border); border-radius: 16px;
  background: white; color: var(--text); box-shadow: 0 8px 24px rgba(22,62,86,.07);
  display: grid; place-items: center; align-content: center; gap: 5px; text-align: center;
  transition: .18s ease;
}
.shortcut-card > span { font-size: 1.7rem; }
.shortcut-card strong { font-size: .9rem; }
.shortcut-card small { color: var(--muted); font-size: .7rem; line-height: 1.25; }

.list-item-button { width: 100%; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.list-item-button:hover { border-color: #a9dce2; background: #f4fcfd; }

.employee-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.employee-card { transition: .18s ease; }
.employee-heading { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.employee-heading h3 { margin: 0 0 3px; }
.employee-heading p { margin: 0; color: var(--muted); font-size: .8rem; }
.employee-avatar {
  width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  color: white; font-size: 1.35rem; font-weight: 900; background: linear-gradient(145deg, var(--cyan), var(--blue));
}
.employee-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 17px 0; }
.employee-metrics > div { padding: 10px; border-radius: 12px; background: #f3f8fa; }
.employee-metrics span { display: block; color: var(--muted); font-size: .68rem; }
.employee-metrics strong { display: block; margin-top: 5px; font-size: .98rem; }
.employee-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 13px; border-top: 1px solid var(--border); }
.compact-metrics .metric { min-height: 105px; padding: 14px; }
.compact-metrics .metric .value { font-size: 1.35rem; }

.client-profile-card { border: 1px solid var(--border); background: #f9fcfd; border-radius: 17px; padding: 18px; }
.client-profile-title { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.client-profile-title h3 { margin: 3px 0 0; font-size: 1.35rem; }
.eyebrow { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.client-info-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.client-info-grid > div { padding: 12px; border-radius: 12px; background: white; border: 1px solid #e2ebef; }
.client-info-grid span { display: block; color: var(--muted); font-size: .69rem; margin-bottom: 5px; }
.client-info-grid strong { display: block; font-size: .84rem; overflow-wrap: anywhere; }
.summary-total-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.summary-total-grid > div { border-radius: 14px; padding: 14px; background: #eef8fa; }
.summary-total-grid > div:nth-child(2) { background: #edf9f2; }
.summary-total-grid > div:nth-child(3) { background: #fff2e6; }
.summary-total-grid span { display: block; color: var(--muted); font-size: .72rem; }
.summary-total-grid strong { display: block; font-size: 1.35rem; margin-top: 6px; }
.purchase-list { display: grid; gap: 13px; }
.purchase-card { border: 1px solid var(--border); border-radius: 16px; background: white; overflow: hidden; }
.purchase-card-head { display: flex; justify-content: space-between; gap: 15px; padding: 15px; }
.purchase-card-head h4 { margin: 8px 0 0; }
.purchase-card-head small { display: block; color: var(--muted); margin-top: 5px; }
.purchase-meta { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 11px 15px; background: #f7fafb; border-top: 1px solid #e6eef2; border-bottom: 1px solid #e6eef2; }
.purchase-meta span { font-size: .72rem; color: #506979; }
.installment-list { display: grid; }
.installment-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 15px; border-bottom: 1px solid #edf2f4; font-size: .78rem; }
.installment-row:last-child { border-bottom: 0; }
.installment-row > span:last-child { display: flex; align-items: center; justify-content: end; gap: 7px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .shortcut-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .employee-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .client-info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .purchase-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .dashboard-daily { grid-template-columns: 1fr !important; }
  .dashboard-daily .metric { min-height: 125px; }
  .shortcut-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .shortcut-card { min-height: 105px; padding: 12px 6px; }
  .shortcut-card > span { font-size: 1.4rem; }
  .shortcut-card small { font-size: .62rem; }
  .employee-grid { grid-template-columns: 1fr; }
  .employee-heading { grid-template-columns: auto 1fr; }
  .employee-heading .badge { grid-column: 1 / -1; justify-self: start; }
  .client-info-grid, .summary-total-grid, .purchase-meta { grid-template-columns: 1fr; }
  .purchase-card-head, .installment-row { align-items: flex-start; flex-direction: column; }
  .installment-row > span:last-child { justify-content: flex-start; }
  .section-title { align-items: flex-start; }
  .section-title > .muted { font-size: .7rem; text-align: right; }
}

/* V2.0.4 — parcelas por categoria, WhatsApp/Maps e cobranças compartilhadas */
.badge.transferred { background: #e9e2ff; color: #5a3fa6; }
.category-payment-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.category-payment-card { padding: 15px; border-radius: 15px; border: 1px solid #cfe8ec; background: #effafb; }
.category-payment-card.home { background: #fff5e9; border-color: #f1d9bc; }
.category-payment-card span, .category-payment-card small { display: block; color: var(--muted); }
.category-payment-card span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.category-payment-card strong { display: block; margin: 6px 0 4px; font-size: 1.35rem; }
.category-payment-card small { font-size: .72rem; line-height: 1.35; }

.transfer-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.transfer-intro h3 { margin: 5px 0 7px; }
.transfer-intro p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.55; }
.metric-inline { min-width: 130px; border-radius: 16px; padding: 16px; text-align: center; background: #edf9fa; }
.metric-inline strong { display: block; font-size: 2rem; }
.metric-inline span { color: var(--muted); font-size: .72rem; }
.transfer-form { padding: 0; overflow: hidden; }
.transfer-form .card-header { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.transfer-list { display: grid; }
.transfer-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid #edf2f4; cursor: pointer; }
.transfer-row:hover { background: #f7fcfd; }
.transfer-row input { width: 20px; height: 20px; accent-color: var(--cyan); }
.transfer-main strong, .transfer-main small, .transfer-values strong, .transfer-values small { display: block; }
.transfer-main small, .transfer-values small { color: var(--muted); margin-top: 4px; font-size: .72rem; }
.transfer-values { text-align: right; }
.sticky-actions { position: sticky; bottom: 0; padding: 14px 18px; background: rgba(255,255,255,.96); border-top: 1px solid var(--border); backdrop-filter: blur(8px); }
.transfer-cards { display: grid; gap: 14px; }
.transfer-client-card p { color: var(--muted); }

@media (max-width: 820px) {
  .category-payment-grid { grid-template-columns: 1fr; }
  .transfer-intro { align-items: stretch; flex-direction: column; }
  .metric-inline { min-width: 0; }
  .transfer-row { grid-template-columns: auto minmax(0,1fr); }
  .transfer-values { grid-column: 2; text-align: left; }
}

/* Compra com múltiplos produtos — v2.0.5 */
.sale-checkout-form { gap: 16px; }
.sale-wizard-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.sale-wizard-tab {
  border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px;
  background: white; color: var(--blue); font-weight: 850;
}
.sale-wizard-tab.active { color: white; border-color: transparent; background: linear-gradient(145deg,var(--cyan),var(--blue)); }
.sale-grand-summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px; background: #eaf8fa; color: var(--blue);
}
.sale-grand-summary span { font-weight: 750; }
.sale-grand-summary strong { font-size: 1.35rem; }
.sale-category-panel { display: grid; gap: 13px; }
.sale-category-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.sale-category-head h3 { margin: 3px 0 0; }
.sale-selected-count { color: var(--muted); font-size: .78rem; font-weight: 750; }
.sale-category-search { position: sticky; top: 0; z-index: 1; }
.sale-product-picker {
  display: grid; gap: 8px; max-height: 410px; overflow: auto;
  padding: 2px 3px 2px 0;
}
.sale-pick-row {
  display: grid; grid-template-columns: auto 48px minmax(150px,1fr) 74px 105px 90px;
  gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--border);
  border-radius: 13px; background: white; transition: .18s;
}
.sale-pick-row.selected { border-color: var(--cyan); background: #f2fcfd; box-shadow: 0 0 0 2px rgba(20,184,196,.10); }
.sale-item-check { width: 20px; height: 20px; accent-color: var(--cyan); }
.sale-item-thumb { width: 48px; height: 48px; border-radius: 9px; overflow: hidden; background: #eef5f8; display: grid; place-items: center; }
.sale-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sale-item-placeholder { font-size: 1.25rem; }
.sale-item-info { min-width: 0; }
.sale-item-info strong, .sale-item-info small { display: block; }
.sale-item-info strong { line-height: 1.2; }
.sale-item-info small { color: var(--muted); margin-top: 3px; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sale-pick-row label { font-size: .66rem; gap: 3px; }
.sale-pick-row input[type="number"] { padding: 8px 7px; border-radius: 9px; }
.sale-item-subtotal { font-weight: 850; color: var(--blue); text-align: right; font-size: .86rem; }
.sale-payment-box { display: grid; gap: 13px; padding: 15px; border: 1px solid var(--border); border-radius: 15px; background: #f8fbfc; }
.sale-payment-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sale-payment-total span { color: var(--muted); font-weight: 750; }
.sale-payment-total strong { font-size: 1.35rem; color: var(--blue); }
.sale-plan-preview { padding: 11px 12px; border-radius: 11px; background: white; border: 1px dashed #b9cdd7; color: #486478; font-weight: 700; }
.sale-step-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.purchase-item-lines { display: grid; gap: 6px; margin: 11px 0; padding: 10px 12px; background: #f7fafb; border-radius: 11px; }
.purchase-item-lines > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; }
.purchase-item-lines small { grid-column: 1 / -1; color: var(--muted); }

@media (max-width: 820px) {
  .sale-wizard-tabs { grid-template-columns: 1fr; }
  .sale-category-head { align-items: start; flex-direction: column; }
  .sale-product-picker { max-height: 46vh; }
  .sale-pick-row { grid-template-columns: auto 42px minmax(0,1fr) 62px; }
  .sale-item-thumb { width: 42px; height: 42px; }
  .sale-pick-row label:nth-of-type(2) { grid-column: 3 / 4; }
  .sale-item-subtotal { grid-column: 4; grid-row: 2; }
  .sale-step-actions .button { flex: 1 1 100%; }
}

/* Vendas efetuadas e exclusão de cliente — v2.0.6 */
.small-button.danger { color: var(--danger); border-color: #efb7b2; background: #fff7f6; }
.small-button.danger:hover { background: #ffecea; border-color: var(--danger); }
.sales-list { margin-top: 0; }
.sales-card-actions { display: flex; justify-content: flex-end; padding: 0 15px 15px; }
.sales-description { padding: 0 15px 15px; color: var(--text); }
@media (max-width: 680px) {
  .sales-card-actions { justify-content: stretch; }
  .sales-card-actions .small-button { width: 100%; }
}

/* V2.0.7 — identidade visual profissional Limpus */
:root {
  --navy: #073a5d;
  --blue: #075f83;
  --blue-deep: #063452;
  --cyan: #18b9c7;
  --cyan-bright: #49d7df;
  --cyan-soft: #e7f9fa;
  --pearl: #fbfdfe;
  --bg: #edf4f7;
  --text: #14344a;
  --muted: #6d8290;
  --border: rgba(25, 89, 118, .13);
  --shadow: 0 16px 42px rgba(5, 52, 82, .10);
  --shadow-hover: 0 22px 55px rgba(5, 52, 82, .16);
  --radius: 22px;
}

body {
  background:
    radial-gradient(circle at 88% 4%, rgba(73,215,223,.17), transparent 18rem),
    radial-gradient(circle at 10% 80%, rgba(7,95,131,.07), transparent 24rem),
    linear-gradient(180deg, #f7fbfc 0%, var(--bg) 100%);
  color: var(--text);
}

.app-icon, .nav-svg, .metric-svg, .shortcut-svg, .menu-svg, .register-svg {
  width: 1em;
  height: 1em;
  display: block;
}

/* Decoração sutil inspirada em bolhas, sem perder a aparência executiva */
.app-shell::before,
.app-shell::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  border: 1px solid rgba(24,185,199,.12);
  box-shadow:
    58px 42px 0 9px rgba(255,255,255,.14),
    104px -16px 0 -9px rgba(24,185,199,.09),
    -36px 78px 0 -14px rgba(7,95,131,.08);
}
.app-shell::before { width: 150px; height: 150px; right: -70px; top: 145px; }
.app-shell::after { width: 105px; height: 105px; left: 245px; bottom: 90px; opacity: .65; }
.main-area, .sidebar, .mobile-nav { position: relative; z-index: 1; }

.login-screen {
  background:
    radial-gradient(circle at 18% 18%, rgba(73,215,223,.26), transparent 25rem),
    radial-gradient(circle at 88% 84%, rgba(255,255,255,.09), transparent 20rem),
    linear-gradient(145deg, #052d49 0%, #075f83 58%, #0b7e97 100%);
  overflow: hidden;
}
.login-screen::before,
.login-screen::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 72px 38px 0 -9px rgba(255,255,255,.08), -36px 66px 0 -18px rgba(255,255,255,.12);
}
.login-screen::before { width: 180px; height: 180px; top: -65px; right: -55px; }
.login-screen::after { width: 125px; height: 125px; bottom: 30px; left: -45px; }
.login-card {
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.96);
  box-shadow: 0 34px 90px rgba(0, 29, 47, .36);
  backdrop-filter: blur(22px);
  padding: 34px;
}
.login-card h1 { letter-spacing: -.035em; }
.brand-login { padding-bottom: 20px; border-bottom: 1px solid rgba(7,95,131,.10); }
.brand-logo {
  border: 1px solid rgba(24,185,199,.16);
  box-shadow: 0 12px 30px rgba(7,95,131,.15);
}
.connection-status { border: 1px solid rgba(7,95,131,.08); background: linear-gradient(135deg, #f4fafb, #eaf7f9); }
.demo-grid button { transition: .18s ease; }
.demo-grid button:hover { border-color: rgba(24,185,199,.55); background: var(--cyan-soft); }

.sidebar {
  background:
    radial-gradient(circle at 105% 10%, rgba(73,215,223,.17), transparent 13rem),
    linear-gradient(180deg, #063b5e 0%, #052d49 100%);
  padding: 25px 17px;
  box-shadow: 16px 0 40px rgba(5,52,82,.14);
}
.sidebar::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -55px;
  bottom: 90px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: -45px -46px 0 -20px rgba(73,215,223,.07), 22px 55px 0 -34px rgba(255,255,255,.12);
  pointer-events: none;
}
.sidebar .brand { padding: 3px 7px 21px; border-bottom: 1px solid rgba(255,255,255,.10); }
.sidebar .brand strong { font-size: 1.05rem; }
.main-nav { gap: 5px; }
.nav-button {
  border-radius: 14px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-button:hover { transform: translateX(2px); }
.nav-button.active {
  background: linear-gradient(90deg, rgba(73,215,223,.20), rgba(255,255,255,.08));
  box-shadow: inset 3px 0 0 var(--cyan-bright), 0 8px 24px rgba(0,0,0,.08);
}
.nav-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.87);
}
.nav-button.active .nav-icon { color: #fff; background: rgba(73,215,223,.22); }
.nav-svg { width: 18px; height: 18px; }

.topbar {
  min-height: 96px;
  background: rgba(248,252,253,.84);
  backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(7,95,131,.09);
  box-shadow: 0 5px 28px rgba(5,52,82,.045);
}
.topbar h2 { color: var(--blue-deep); letter-spacing: -.035em; font-weight: 780; }
.user-chip {
  border-color: rgba(7,95,131,.10);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(5,52,82,.07);
  background: rgba(255,255,255,.92);
}
.content { position: relative; }

.card,
.product-card,
.shortcut-card,
.employee-card,
.list-item,
.client-profile-card,
.purchase-card {
  border-color: rgba(7,95,131,.11);
  box-shadow: var(--shadow);
}
.card {
  background: linear-gradient(155deg, rgba(255,255,255,.99), rgba(249,252,253,.97));
}
.card:hover { border-color: rgba(24,185,199,.25); }

.dashboard-daily { gap: 18px; }
.metric {
  min-height: 172px;
  padding: 22px;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.metric::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(231,249,250,.38));
  z-index: -2;
}
.metric::after {
  width: 132px;
  height: 132px;
  right: -52px;
  top: -48px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.72), rgba(73,215,223,.22) 45%, rgba(24,185,199,.08));
  border: 1px solid rgba(24,185,199,.14);
  box-shadow: -56px 88px 0 -42px rgba(24,185,199,.10);
  z-index: -1;
}
.metric-button:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.metric-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: white;
  background: linear-gradient(145deg, var(--cyan-bright), var(--blue));
  box-shadow: 0 12px 26px rgba(7,95,131,.20);
}
.metric-svg { width: 23px; height: 23px; }
.metric .label { font-size: .86rem; font-weight: 670; color: #5c7484; }
.metric .value { color: var(--blue-deep); font-weight: 840; letter-spacing: -.04em; }
.metric .hint { font-size: .75rem; }

.section-title { margin-top: 30px; }
.section-title h3 { color: var(--blue-deep); letter-spacing: -.025em; }
.shortcut-grid { gap: 14px; }
.shortcut-card {
  min-height: 138px;
  border-radius: 20px;
  background: linear-gradient(155deg, #ffffff 0%, #f7fcfd 100%);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.shortcut-card:hover { border-color: rgba(24,185,199,.38); box-shadow: var(--shadow-hover); }
.shortcut-card > span.shortcut-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--blue);
  background: linear-gradient(145deg, #eafafb, #d9f4f6);
  box-shadow: inset 0 0 0 1px rgba(24,185,199,.13);
}
.shortcut-svg { width: 23px; height: 23px; }
.shortcut-card strong { color: var(--blue-deep); font-weight: 760; }

.button {
  border-radius: 13px;
  min-height: 42px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary {
  background: linear-gradient(135deg, #20c6cf 0%, #07809d 52%, #075f83 100%);
  box-shadow: 0 10px 25px rgba(7,95,131,.23);
}
.button.primary:hover { filter: brightness(1.03); box-shadow: 0 14px 32px rgba(7,95,131,.28); }
.button.secondary { background: linear-gradient(145deg, #effafb, #e5f5f7); border-color: rgba(24,185,199,.22); }
.small-button { border-radius: 11px; background: #f8fcfd; }

input, select, textarea {
  min-height: 46px;
  border-radius: 13px;
  border-color: rgba(7,95,131,.17);
  box-shadow: inset 0 1px 2px rgba(5,52,82,.025);
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(24,185,199,.85);
  box-shadow: 0 0 0 4px rgba(24,185,199,.13), 0 8px 24px rgba(5,52,82,.05);
}

.list-item { border-radius: 16px; transition: .18s ease; }
.list-item-button:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(5,52,82,.10); }
.badge { border: 1px solid rgba(255,255,255,.72); }
.table-wrap { box-shadow: 0 12px 34px rgba(5,52,82,.07); }
th { background: #f2f8fa; color: #426578; }

.modal {
  border-radius: 26px;
  box-shadow: 0 40px 120px rgba(0, 25, 42, .36);
  border: 1px solid rgba(255,255,255,.65);
}
.modal-header {
  padding: 22px 24px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
}
.modal-header h3 { color: var(--blue-deep); letter-spacing: -.025em; }
.icon-button { color: var(--blue-deep); }

.product-card { border-radius: 20px; transition: .18s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.product-image-wrap { background: linear-gradient(145deg, #f5fafb, #edf5f7); }
.product-price { color: var(--blue-deep); }
.category-tab { border-radius: 13px; }
.category-tab.active { box-shadow: 0 8px 20px rgba(7,95,131,.18); }

.register-card-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: white !important;
  background: linear-gradient(145deg, var(--cyan-bright), var(--blue));
  box-shadow: 0 12px 28px rgba(7,95,131,.20);
}
.register-svg { width: 24px; height: 24px; }

.mobile-menu-item { border-radius: 17px; box-shadow: 0 8px 24px rgba(5,52,82,.06); }
.menu-svg { width: 20px; height: 20px; }

@media (max-width: 820px) {
  body { background: linear-gradient(180deg, #f6fafb 0%, #edf4f7 100%); }
  .app-shell::before { width: 115px; height: 115px; top: 120px; right: -60px; opacity: .7; }
  .app-shell::after { display: none; }
  .topbar {
    min-height: 92px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(238,249,250,.91));
  }
  .topbar h2 { font-size: 1.42rem; }
  .content { padding: 18px 16px 118px; }
  .dashboard-daily { gap: 14px; }
  .dashboard-daily .metric { min-height: 150px; padding: 20px; }
  .metric-icon { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 13px; }
  .metric .value { font-size: 2rem; }
  .shortcut-grid { gap: 10px; }
  .shortcut-card { min-height: 122px; border-radius: 18px; }
  .shortcut-card > span.shortcut-icon { width: 43px; height: 43px; border-radius: 14px; }
  .mobile-nav {
    left: 10px;
    right: 10px;
    bottom: 9px;
    width: auto;
    border: 1px solid rgba(7,95,131,.10);
    border-radius: 22px;
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 48px rgba(5,52,82,.20);
  }
  .mobile-nav .nav-button { border-radius: 15px; min-height: 58px; }
  .mobile-nav .nav-button:hover { transform: none; }
  .mobile-nav .nav-button.active {
    color: var(--blue-deep);
    background: linear-gradient(145deg, #e7f9fa, #d9f2f5);
    box-shadow: inset 0 0 0 1px rgba(24,185,199,.12);
  }
  .mobile-nav .nav-icon { width: 28px; height: 28px; background: transparent; }
  .mobile-nav .nav-button.active .nav-icon { background: transparent; color: var(--blue); }
  .mobile-nav .nav-svg { width: 20px; height: 20px; }
  .user-chip { border-radius: 18px; background: rgba(255,255,255,.92); }
  .modal { border-radius: 25px 25px 0 0; width: 100%; max-height: 94vh; margin: auto 0 0; }
  .modal::backdrop { background: rgba(3,28,45,.55); }
}

@media (max-width: 540px) {
  .login-card { padding: 26px 22px; }
  .topbar { min-height: 86px; }
  .dashboard-daily .metric { min-height: 145px; }
  .metric .value { font-size: clamp(1.7rem, 9vw, 2.2rem); }
  .shortcut-card strong { font-size: .82rem; }
  .shortcut-card small { font-size: .61rem; }
}

/* V2.0.8 — Cabeçalho oficial Limpus */
.topbar-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}
.topbar-brand-logo {
  display: block;
  width: auto;
  max-width: min(100%, 360px);
  height: 74px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 4px 10px rgba(5, 52, 82, .07));
}
.page-context-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.user-chip {
  display: none !important;
}

@media (max-width: 820px) {
  .topbar {
    min-height: 112px;
    padding: 13px 18px;
    align-items: center;
  }
  .topbar-brand-logo {
    width: auto;
    max-width: min(82vw, 330px);
    height: 86px;
  }
  .topbar-actions {
    margin-left: auto;
    flex: 0 0 auto;
  }
}

@media (max-width: 420px) {
  .topbar {
    min-height: 102px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .topbar-brand-logo {
    width: auto;
    max-width: min(84vw, 300px);
    height: 78px;
  }
}


/* V2.0.9 — Painel financeiro com cinco indicadores */
.dashboard-financial { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-financial .metric:nth-child(4),
.dashboard-financial .metric:nth-child(5) { min-height: 150px; }
@media (max-width: 1100px) {
  .dashboard-financial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .dashboard-financial { grid-template-columns: 1fr; }
  .dashboard-financial .metric { min-height: 138px; }
}


/* V2.1.0 — tema premium azul luminoso inspirado na nova marca */
:root {
  --navy: #041f39;
  --blue: #0b5f95;
  --blue-deep: #03172b;
  --cyan: #18c6f3;
  --cyan-bright: #54ddff;
  --cyan-soft: #ebfbff;
  --pearl: #fbfeff;
  --bg: #edf5fb;
  --text: #123149;
  --muted: #688092;
  --border: rgba(8, 83, 128, .14);
  --shadow: 0 18px 46px rgba(4, 31, 57, .10);
  --shadow-hover: 0 24px 58px rgba(4, 31, 57, .16);
}
body {
  background:
    radial-gradient(circle at 88% 6%, rgba(84,221,255,.18), transparent 18rem),
    radial-gradient(circle at 10% 88%, rgba(11,95,149,.08), transparent 24rem),
    linear-gradient(180deg, #f7fbfe 0%, var(--bg) 100%);
}
.sidebar {
  background:
    radial-gradient(circle at 110% 6%, rgba(84,221,255,.22), transparent 13rem),
    linear-gradient(180deg, #062746 0%, #041f39 55%, #03172b 100%);
  box-shadow: 16px 0 42px rgba(4,31,57,.18);
}
.topbar {
  background:
    linear-gradient(180deg, rgba(247,252,255,.95), rgba(239,249,253,.90));
  border-bottom: 1px solid rgba(8,83,128,.10);
}
.topbar-brand {
  padding: 6px 0;
}
.topbar-brand-logo {
  filter: drop-shadow(0 8px 18px rgba(24,198,243,.12)) drop-shadow(0 4px 12px rgba(4,31,57,.10));
}
.card,
.product-card,
.shortcut-card,
.employee-card,
.list-item,
.client-profile-card,
.purchase-card,
.table-wrap,
.modal {
  border-color: rgba(8,83,128,.12);
}
.metric::before {
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(235,251,255,.52));
}
.metric::after {
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.82), rgba(84,221,255,.28) 45%, rgba(24,198,243,.12));
  border-color: rgba(24,198,243,.16);
}
.metric .value,
.shortcut-card strong,
.section-title h3,
.topbar h2,
.product-price,
.modal-header h3,
.icon-button,
.button.secondary,
.small-button,
.small-button.danger,
.category-tab,
.mobile-menu-item.primary-item {
  color: var(--blue-deep);
}
.metric-icon,
.register-card-icon,
.button.primary,
.sale-wizard-tab.active,
.category-tab.active {
  background: linear-gradient(135deg, #3fe0ff 0%, #1699d3 50%, #0b5f95 100%);
}
.button.primary {
  box-shadow: 0 12px 28px rgba(11,95,149,.24);
}
.button.secondary {
  background: linear-gradient(145deg, #f4fcff, #e6f7fc);
  border-color: rgba(24,198,243,.22);
}
.shortcut-card,
.product-card,
.metric,
.employee-card,
.list-item,
.purchase-card,
.client-profile-card {
  background: linear-gradient(155deg, rgba(255,255,255,.99), rgba(246,252,255,.98));
}
.mobile-nav {
  border-color: rgba(8,83,128,.10);
  box-shadow: 0 20px 50px rgba(4,31,57,.18);
}
.mobile-nav .nav-button.active {
  background: linear-gradient(145deg, #eefcff, #dcf6fb);
}
.user-chip {
  box-shadow: 0 10px 24px rgba(4,31,57,.06);
}
.brand-logo,
.catalog-hero img {
  border-color: rgba(24,198,243,.18);
  background: #fff;
}
.catalog-hero {
  background: linear-gradient(120deg, #ffffff, #effaff);
}
@media (max-width: 820px) {
  .topbar-brand-logo { height: 88px; max-width: min(83vw, 340px); }
}

/* V2.1.1 — ajuste premium solicitado: cor da marca em todo o app, cabeçalho sem retângulo destacado e logomarca maior */
:root {
  --navy: #041d36;
  --blue: #0a5e95;
  --blue-deep: #03162a;
  --cyan: #25d2ff;
  --cyan-bright: #68e6ff;
  --cyan-soft: rgba(120, 233, 255, .16);
  --pearl: #f7fcff;
  --bg: #dff0fa;
  --text: #0c2942;
  --muted: #547286;
  --border: rgba(7, 79, 124, .14);
  --shadow: 0 18px 44px rgba(4, 29, 54, .12);
  --shadow-hover: 0 24px 60px rgba(4, 29, 54, .18);
}
html {
  background:
    radial-gradient(circle at 100% 0%, rgba(37,210,255,.26), transparent 26rem),
    linear-gradient(180deg, #e9f8ff 0%, #dff0fa 100%);
}
body {
  background:
    radial-gradient(circle at 92% 6%, rgba(104,230,255,.28), transparent 19rem),
    radial-gradient(circle at 8% 88%, rgba(10,94,149,.12), transparent 25rem),
    linear-gradient(180deg, #eefaff 0%, #dff0fa 100%);
}
.main-area {
  background:
    radial-gradient(circle at right top, rgba(104,230,255,.12), transparent 22rem),
    linear-gradient(180deg, rgba(242,251,255,.96) 0%, rgba(223,240,250,.98) 100%);
}
.sidebar {
  background:
    radial-gradient(circle at 125% 5%, rgba(104,230,255,.24), transparent 14rem),
    linear-gradient(180deg, #052443 0%, #041d36 52%, #031322 100%);
  box-shadow: 16px 0 42px rgba(4, 29, 54, .22);
}
.topbar {
  min-height: 126px;
  padding: 12px 24px 10px;
  background:
    radial-gradient(circle at 90% 10%, rgba(104,230,255,.18), transparent 12rem),
    linear-gradient(135deg, #052443 0%, #0b4f82 58%, #08345a 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 32px rgba(4,29,54,.24);
}
.topbar-brand {
  padding: 0;
  align-items: center;
}
.topbar-brand-logo {
  display: block;
  width: auto;
  max-width: min(96vw, 520px);
  height: 110px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.18));
}
.topbar-actions {
  align-items: center;
}
.topbar .button.secondary,
.topbar .button.ghost,
.topbar .button.primary {
  color: #f4fbff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
}
.topbar .button.secondary:hover,
.topbar .button.ghost:hover,
.topbar .button.primary:hover {
  background: rgba(255,255,255,.16);
}
.content {
  padding-top: 20px;
}
.card,
.metric,
.shortcut-card,
.product-card,
.employee-card,
.list-item,
.purchase-card,
.client-profile-card,
.table-wrap,
.modal {
  background: linear-gradient(155deg, rgba(255,255,255,.985), rgba(243,251,255,.975));
  border-color: rgba(8, 95, 149, .12);
  box-shadow: 0 16px 38px rgba(4,29,54,.10);
}
.metric {
  min-height: 160px;
}
.metric::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.26), transparent 50%);
  pointer-events: none;
}
.metric::after {
  width: 128px;
  height: 128px;
  right: -26px;
  top: -26px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.85), rgba(104,230,255,.34) 44%, rgba(37,210,255,.16) 72%);
  border: 1px solid rgba(37,210,255,.18);
  box-shadow: inset 0 0 24px rgba(255,255,255,.28);
}
.metric .label,
.metric .hint,
.list-item small,
.product-meta,
.topbar p,
.muted,
label {
  color: var(--muted);
}
.metric .value,
.section-title h3,
.shortcut-card strong,
.product-price,
.modal-header h3,
.card h3,
.card-header h3,
.small-button,
.button.secondary,
.category-tab,
.topbar h2 {
  color: var(--blue-deep);
}
.metric-icon,
.register-card-icon,
.button.primary,
.sale-wizard-tab.active,
.category-tab.active,
.mobile-nav .nav-button.active .nav-icon {
  background: linear-gradient(135deg, #58e4ff 0%, #1ab4e5 50%, #0a5e95 100%);
}
.button.primary {
  color: white;
  box-shadow: 0 12px 28px rgba(10, 94, 149, .24);
}
.button.secondary {
  background: linear-gradient(145deg, #f4fcff, #e7f8fd);
  border-color: rgba(37,210,255,.22);
}
.balance-box {
  background: linear-gradient(145deg, #e9fbff, #ddf4fb);
}
.balance-box.home {
  background: linear-gradient(145deg, #eefbff, #e3f7fd);
}
.table-wrap table,
.table-wrap th,
.table-wrap td,
.product-card,
input,
select,
textarea {
  background-color: rgba(255,255,255,.96);
}
th {
  background: #f2fbff;
}
.mobile-nav {
  background: rgba(251,254,255,.96);
  border-color: rgba(8,95,149,.10);
  box-shadow: 0 20px 48px rgba(4,29,54,.14);
}
.mobile-nav .nav-button.active {
  background: linear-gradient(145deg, #eefcff, #dbf4fb);
}
.mobile-nav .nav-button.active .nav-label,
.mobile-nav .nav-button.active {
  color: var(--blue-deep);
}
.shortcut-card,
.list-item,
.employee-card,
.purchase-card,
.client-profile-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.shortcut-card:hover,
.list-item:hover,
.employee-card:hover,
.purchase-card:hover,
.client-profile-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(4,29,54,.14);
}
.user-chip {
  display: none !important;
}
@media (max-width: 820px) {
  .topbar {
    min-height: 124px;
    padding: 10px 16px 8px;
  }
  .topbar-brand-logo {
    max-width: min(96vw, 460px);
    height: 104px;
  }
  .topbar-actions {
    gap: 8px;
  }
}
@media (max-width: 540px) {
  .topbar {
    min-height: 118px;
    padding: 10px 12px 8px;
  }
  .topbar-brand-logo {
    max-width: 94vw;
    height: 98px;
  }
  .content {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
  }
  .metric {
    min-height: 148px;
  }
}

/* V2.1.2 — tema integral escuro da logomarca + cabeçalho maior */
:root {
  --navy: #021326;
  --blue-deep: #062847;
  --blue: #0a4f83;
  --cyan: #1fd4ff;
  --cyan-bright: #80eeff;
  --bg: #031a31;
  --surface: #072846;
  --surface-2: #0a3357;
  --surface-3: #0d3e67;
  --text: #edfaff;
  --muted: #a9cfe1;
  --border: rgba(120, 238, 255, .12);
  --shadow: 0 18px 44px rgba(0, 0, 0, .32);
  --shadow-hover: 0 24px 64px rgba(0, 0, 0, .42);
  --card-bg: linear-gradient(160deg, rgba(9,43,73,.98), rgba(5,28,50,.98));
}
html,
body {
  background:
    radial-gradient(circle at 12% 10%, rgba(31,212,255,.12), transparent 24rem),
    radial-gradient(circle at 88% 4%, rgba(31,212,255,.16), transparent 20rem),
    radial-gradient(circle at 50% 100%, rgba(10,79,131,.25), transparent 30rem),
    linear-gradient(180deg, #03172c 0%, #041a31 38%, #06213d 100%) !important;
  color: var(--text);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 15%, rgba(128,238,255,.10), transparent 12rem),
    radial-gradient(circle at 15% 80%, rgba(31,212,255,.07), transparent 16rem);
  z-index: 0;
}
.app-shell,
.layout,
.main-area,
.content,
.page,
.page.active {
  background: transparent !important;
}
.main-area {
  background:
    radial-gradient(circle at 90% 8%, rgba(31,212,255,.08), transparent 18rem),
    linear-gradient(180deg, rgba(3,23,44,.92), rgba(6,33,61,.92)) !important;
}
.content {
  padding-top: 18px;
}
.topbar {
  min-height: 154px !important;
  padding: 14px 24px 12px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(128,238,255,.14), transparent 16rem),
    radial-gradient(circle at 96% 18%, rgba(31,212,255,.18), transparent 17rem),
    linear-gradient(135deg, #031426 0%, #08345a 42%, #0d578d 100%) !important;
  border-bottom: 1px solid rgba(128,238,255,.12) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.30) !important;
}
.topbar-brand {
  align-items: center;
  padding: 0 !important;
}
.topbar-brand-logo {
  width: auto !important;
  max-width: min(96vw, 620px) !important;
  height: 132px !important;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.36));
}
.topbar-actions,
.topbar .button.secondary,
.topbar .button.ghost,
.topbar .button.primary,
.topbar h2,
.topbar p,
.user-chip {
  display: none !important;
}
.sidebar {
  background:
    radial-gradient(circle at 50% -10%, rgba(128,238,255,.12), transparent 14rem),
    linear-gradient(180deg, #021222 0%, #041a31 45%, #061e38 100%) !important;
  border-right: 1px solid rgba(128,238,255,.10);
  box-shadow: 12px 0 36px rgba(0,0,0,.30);
}
.sidebar .logo,
.sidebar h1,
.sidebar strong,
.sidebar a,
.sidebar button,
.sidebar .nav-label,
.mobile-nav .nav-label,
.mobile-nav .nav-button,
.mobile-nav .nav-icon,
.card,
.card h3,
.card h4,
.card strong,
.metric .label,
.metric .value,
.metric .hint,
.shortcut-card,
.shortcut-card strong,
.shortcut-card small,
.list-item,
.list-item strong,
.list-item small,
.product-card,
.product-card strong,
.product-meta,
.employee-card,
.employee-card strong,
.employee-card span,
.table-wrap,
.table-wrap table,
.table-wrap th,
.table-wrap td,
.modal,
.modal-header h3,
.modal-header p,
label,
.page-title,
.section-title h3,
.section-title p,
.empty-state,
.empty-state h3,
.empty-state p,
.client-profile-card,
.purchase-card,
.balance-box,
.balance-box strong,
.balance-box span,
.balance-box .muted,
.toolbar label,
.metric-inline,
.metric-inline span,
.metric-inline strong,
.sheet,
.accordion-item,
.category-tab,
.sale-wizard-tab {
  color: var(--text) !important;
}
.card,
.metric,
.shortcut-card,
.list-item,
.product-card,
.employee-card,
.purchase-card,
.client-profile-card,
.table-wrap,
.balance-box,
.metric-inline,
.sheet,
.accordion-item,
.modal-content,
.register-card,
.toolbar,
.modal,
.modal-body,
.client-summary,
.empty-state,
.search-wrap,
.stat-card {
  background: var(--card-bg) !important;
  border: 1px solid rgba(128,238,255,.12) !important;
  box-shadow: var(--shadow) !important;
}
.metric,
.shortcut-card,
.register-card,
.product-card,
.employee-card,
.list-item,
.balance-box,
.client-profile-card,
.purchase-card,
.table-wrap,
.modal {
  border-radius: 24px !important;
}
.metric::before {
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%) !important;
}
.metric::after {
  width: 144px !important;
  height: 144px !important;
  top: -22px !important;
  right: -22px !important;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.14), rgba(31,212,255,.20) 45%, rgba(31,212,255,.06) 70%) !important;
  border: 1px solid rgba(128,238,255,.12) !important;
  box-shadow: inset 0 0 28px rgba(255,255,255,.06) !important;
}
.metric .label,
.metric .hint,
.shortcut-card small,
.list-item small,
.product-meta,
.section-title p,
label,
.helper,
.muted,
.balance-box span,
.table-wrap th {
  color: var(--muted) !important;
}
.metric .value,
.card h3,
.section-title h3,
.shortcut-card strong,
.list-item strong,
.product-price,
.modal-header h3,
.balance-box strong,
.metric-inline strong,
.table-wrap td strong {
  color: #ffffff !important;
}
.metric-icon,
.register-card-icon,
.shortcut-icon,
.sale-wizard-tab.active,
.category-tab.active,
.button.primary,
.mobile-nav .nav-button.active,
.mobile-nav .nav-button.active .nav-icon,
.sidebar .nav-item.active {
  background: linear-gradient(135deg, #20dbff 0%, #0cb3e0 45%, #0a5385 100%) !important;
  color: white !important;
}
.metric-icon,
.register-card-icon,
.shortcut-icon {
  box-shadow: 0 12px 28px rgba(2,18,34,.34);
}
.button,
button,
.category-tab,
.sale-wizard-tab,
input,
select,
textarea {
  border-radius: 16px !important;
}
.button.primary,
button.primary {
  border: 1px solid rgba(128,238,255,.18) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.26) !important;
}
.button.secondary,
.button.ghost,
button.secondary,
button.ghost,
.category-tab,
.sale-wizard-tab,
.toolbar .button {
  color: #eaf8ff !important;
  background: linear-gradient(160deg, rgba(11,60,98,.95), rgba(6,33,61,.95)) !important;
  border: 1px solid rgba(128,238,255,.12) !important;
}
.button.secondary:hover,
.button.ghost:hover,
.category-tab:hover,
.sale-wizard-tab:hover,
.shortcut-card:hover,
.list-item:hover,
.employee-card:hover,
.product-card:hover,
.purchase-card:hover,
.client-profile-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover) !important;
}
input,
select,
textarea {
  color: #f5fcff !important;
  background: linear-gradient(160deg, rgba(10,41,70,.98), rgba(5,28,50,.98)) !important;
  border: 1px solid rgba(128,238,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
input::placeholder,
textarea::placeholder {
  color: #86b7cb !important;
}
.table-wrap table,
.table-wrap td {
  background: transparent !important;
}
.table-wrap thead,
.table-wrap th {
  background: rgba(255,255,255,.03) !important;
}
.table-wrap tr {
  border-color: rgba(128,238,255,.10) !important;
}
.table-wrap tbody tr:hover {
  background: rgba(128,238,255,.05) !important;
}
.balance-box {
  background: linear-gradient(160deg, rgba(11,60,98,.90), rgba(5,28,50,.95)) !important;
}
.mobile-nav {
  background: linear-gradient(180deg, rgba(3,23,44,.98), rgba(5,28,50,.98)) !important;
  border-top: 1px solid rgba(128,238,255,.10) !important;
  box-shadow: 0 -14px 30px rgba(0,0,0,.28) !important;
}
.mobile-nav .nav-button.active {
  background: linear-gradient(160deg, rgba(10,83,133,.95), rgba(7,49,82,.95)) !important;
}
.mobile-nav .nav-button.active .nav-label,
.mobile-nav .nav-button.active .nav-icon {
  color: white !important;
}
.shortcut-card,
.metric-button,
.list-item,
.employee-card,
.product-card,
.client-profile-card,
.purchase-card { 
  transition: transform .18s ease, box-shadow .18s ease;
}
hr,
.divider {
  border-color: rgba(128,238,255,.08) !important;
  background: rgba(128,238,255,.08) !important;
}
@media (max-width: 820px) {
  .topbar {
    min-height: 142px !important;
    padding: 12px 14px 10px !important;
  }
  .topbar-brand-logo {
    max-width: 95vw !important;
    height: 120px !important;
  }
}
@media (max-width: 540px) {
  .topbar {
    min-height: 136px !important;
    padding: 10px 12px 10px !important;
  }
  .topbar-brand-logo {
    max-width: 96vw !important;
    height: 112px !important;
  }
  .content {
    padding-top: 14px;
  }
}

/* V2.1.3 — cabeçalho ainda maior e centralizado */
.topbar {
  min-height: 188px !important;
  padding: 18px 18px 14px !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.topbar-brand {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.topbar-brand-logo {
  display: block !important;
  margin: 0 auto !important;
  max-width: min(97vw, 760px) !important;
  width: auto !important;
  height: 156px !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.content {
  padding-top: 22px !important;
}
@media (max-width: 820px) {
  .topbar {
    min-height: 174px !important;
    padding: 16px 14px 12px !important;
  }
  .topbar-brand-logo {
    max-width: 96vw !important;
    height: 144px !important;
  }
}
@media (max-width: 540px) {
  .topbar {
    min-height: 164px !important;
    padding: 14px 10px 12px !important;
  }
  .topbar-brand-logo {
    max-width: 97vw !important;
    height: 136px !important;
  }
  .content {
    padding-top: 18px !important;
  }
}

/* V2.1.4 — cabeçalho mais compacto, imagem maior e centralizada */
.topbar {
  min-height: auto !important;
  height: auto !important;
  padding: 6px 8px 4px !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.topbar-brand {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.topbar-brand-logo {
  display: block !important;
  margin: 0 auto !important;
  width: min(99vw, 900px) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 118px !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.content {
  padding-top: 10px !important;
}
@media (max-width: 820px) {
  .topbar {
    padding: 4px 6px 3px !important;
  }
  .topbar-brand-logo {
    width: min(99vw, 760px) !important;
    max-height: 104px !important;
  }
}
@media (max-width: 540px) {
  .topbar {
    padding: 2px 6px 2px !important;
  }
  .topbar-brand-logo {
    width: 98vw !important;
    max-width: 98vw !important;
    max-height: 96px !important;
  }
  .content {
    padding-top: 8px !important;
  }
}

/* V2.1.5 — correção definitiva do cabeçalho: banner ocupa todo o topo */
.topbar {
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: #03182d !important;
}
.topbar-brand {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}
.topbar-brand-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
}
.content { padding-top: 8px !important; }
@media (max-width: 820px) {
  .topbar {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    padding: 0 !important;
  }
}
@media (max-width: 540px) {
  .topbar {
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    padding: 0 !important;
  }
  .content { padding-top: 6px !important; }
}

/* V2.1.6 — novo ícone premium e menu “Mais opções” com leitura corrigida */
.modal {
  background: linear-gradient(180deg, #0a3655 0%, #052945 100%) !important;
  border: 1px solid rgba(118, 225, 255, .24) !important;
  box-shadow: 0 34px 90px rgba(0, 8, 20, .58) !important;
  overflow: hidden !important;
}
.modal-frame {
  background: transparent !important;
}
.modal-header {
  background: linear-gradient(180deg, #0d4265 0%, #083451 100%) !important;
  border-bottom: 1px solid rgba(127, 226, 255, .20) !important;
  padding: 20px 22px !important;
}
.modal-header h3,
.modal-header #modalTitle {
  color: #ffffff !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22) !important;
}
.modal-header p,
.modal-header #modalSubtitle {
  color: #b9d7e6 !important;
  opacity: 1 !important;
}
.modal-header .icon-button,
.modal-header [data-close-modal] {
  color: #eaf9ff !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(151, 231, 255, .18) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 1.25rem !important;
}
.modal-body {
  background: linear-gradient(180deg, #07304f 0%, #04243d 100%) !important;
}
.mobile-more-grid {
  display: grid !important;
  gap: 14px !important;
}
.mobile-menu-item,
.mobile-menu-item.primary-item {
  min-height: 76px !important;
  padding: 14px 18px !important;
  color: #102f49 !important;
  background: linear-gradient(180deg, #fbfdff 0%, #eef8fb 100%) !important;
  border: 1px solid rgba(121, 219, 239, .72) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 26px rgba(0, 12, 27, .20), inset 0 1px 0 rgba(255,255,255,.96) !important;
  opacity: 1 !important;
}
.mobile-menu-item:hover,
.mobile-menu-item:focus-visible {
  transform: translateY(-1px) !important;
  border-color: #4fd8f0 !important;
  box-shadow: 0 15px 30px rgba(0, 12, 27, .28), 0 0 0 3px rgba(40, 213, 242, .13) !important;
}
.mobile-menu-item strong,
.mobile-menu-item.primary-item strong {
  color: #102f49 !important;
  font-size: 1.02rem !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
}
.mobile-menu-item > span:first-child,
.mobile-menu-item.primary-item > span:first-child {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 15px !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, #29e1fa 0%, #0fb7df 48%, #09618f 100%) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  box-shadow: 0 9px 20px rgba(4, 104, 150, .28) !important;
  font-size: 1.45rem !important;
  opacity: 1 !important;
}
.mobile-menu-item > span:first-child svg,
.mobile-menu-item > span:first-child .menu-svg,
.mobile-menu-item > span:first-child .shortcut-svg {
  width: 25px !important;
  height: 25px !important;
  color: #ffffff !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
}
.mobile-menu-item.danger-item {
  color: #a72c2c !important;
  background: linear-gradient(180deg, #fffafa 0%, #fff0ef 100%) !important;
  border-color: rgba(224, 112, 104, .52) !important;
}
.mobile-menu-item.danger-item strong {
  color: #a72c2c !important;
}
.mobile-menu-item.danger-item > span:first-child {
  color: #ffffff !important;
  background: linear-gradient(145deg, #e45d57 0%, #b52f2f 100%) !important;
  border-color: rgba(255,255,255,.34) !important;
  box-shadow: 0 9px 20px rgba(142, 32, 32, .24) !important;
}
@media (max-width: 540px) {
  .modal-header {
    padding: 18px 18px !important;
  }
  .modal-body {
    padding: 16px 14px 20px !important;
  }
  .mobile-menu-item,
  .mobile-menu-item.primary-item {
    min-height: 70px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }
  .mobile-menu-item > span:first-child,
  .mobile-menu-item.primary-item > span:first-child {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }
  .mobile-menu-item strong,
  .mobile-menu-item.primary-item strong {
    font-size: .98rem !important;
  }
}

/* V2.1.7 — menu premium aprovado, atalhos delicados e cabeçalho compacto */

/* Mantém os formulários comuns claros e fáceis de ler. */
.modal:not(.more-options-modal) {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 28px 85px rgba(0, 10, 25, .34) !important;
  color: #17364d !important;
}
.modal:not(.more-options-modal) .modal-frame,
.modal:not(.more-options-modal) .modal-body {
  background: #ffffff !important;
}
.modal:not(.more-options-modal) .modal-header {
  background: #ffffff !important;
  border-bottom: 1px solid #d8e5ec !important;
}
.modal:not(.more-options-modal) .modal-header h3,
.modal:not(.more-options-modal) .modal-header #modalTitle {
  color: #123650 !important;
  text-shadow: none !important;
}
.modal:not(.more-options-modal) .modal-header p,
.modal:not(.more-options-modal) .modal-header #modalSubtitle {
  color: #6c7e8c !important;
}
.modal:not(.more-options-modal) .modal-header .icon-button,
.modal:not(.more-options-modal) .modal-header [data-close-modal] {
  color: #123650 !important;
  background: #eef7fa !important;
  border: 1px solid #d3e8ef !important;
}

/* Cabeçalho: menor, centralizado e sem espaço desperdiçado. */
.topbar {
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
  padding: 0 !important;
  background: #03182d !important;
}
.topbar-brand,
.topbar-brand-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.topbar-brand-logo {
  object-fit: cover !important;
  object-position: center center !important;
}
.content { padding-top: 10px !important; }

/* Atalhos menores e mais delicados. */
.shortcut-grid {
  gap: 10px !important;
}
.shortcut-card {
  min-height: 104px !important;
  padding: 12px 9px !important;
  border-radius: 17px !important;
  gap: 6px !important;
  box-shadow: 0 9px 22px rgba(0, 14, 31, .15) !important;
}
.shortcut-card > span.shortcut-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
}
.shortcut-card .shortcut-svg {
  width: 20px !important;
  height: 20px !important;
}
.shortcut-card strong {
  font-size: .80rem !important;
  line-height: 1.15 !important;
}
.shortcut-card small {
  font-size: .61rem !important;
  line-height: 1.2 !important;
}

/* Menu Mais opções igual ao visual premium aprovado. */
.more-options-modal {
  width: min(610px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 28px) !important;
  margin: auto !important;
  border-radius: 32px !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 14% 8%, rgba(38, 217, 255, .13), transparent 20rem),
    linear-gradient(155deg, rgba(9, 61, 95, .98), rgba(2, 31, 55, .99)) !important;
  border: 1px solid rgba(112, 221, 255, .35) !important;
  box-shadow: 0 36px 110px rgba(0, 8, 23, .70), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: hidden !important;
}
.more-options-modal::backdrop {
  background: rgba(0, 22, 43, .64) !important;
  backdrop-filter: blur(9px) !important;
}
.more-options-modal .modal-frame {
  background: transparent !important;
}
.more-options-modal .modal-header {
  min-height: 105px !important;
  padding: 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  background: linear-gradient(180deg, rgba(11, 66, 101, .92), rgba(7, 48, 78, .90)) !important;
  border-bottom: 1px solid rgba(64, 208, 241, .27) !important;
}
.more-options-modal .modal-header::before {
  content: "";
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: url('/icons/limpus-premium-192-v217.png') center/cover no-repeat !important;
  border: 2px solid rgba(135, 239, 255, .80) !important;
  box-shadow: 0 0 0 4px rgba(24, 199, 235, .10), 0 10px 25px rgba(0, 12, 30, .38) !important;
}
.more-options-modal .modal-header > div {
  min-width: 0 !important;
  flex: 1 !important;
}
.more-options-modal .modal-header h3,
.more-options-modal .modal-header #modalTitle {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(1.55rem, 5vw, 2.15rem) !important;
  font-weight: 820 !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 2px 7px rgba(0,0,0,.28) !important;
}
.more-options-modal .modal-header p,
.more-options-modal .modal-header #modalSubtitle {
  display: none !important;
}
.more-options-modal .modal-header .icon-button,
.more-options-modal .modal-header [data-close-modal] {
  margin-left: auto !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 50px !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, rgba(17, 88, 128, .92), rgba(5, 45, 75, .94)) !important;
  border: 1px solid rgba(64, 207, 241, .42) !important;
  box-shadow: 0 9px 20px rgba(0, 10, 29, .30) !important;
}
.more-options-modal .modal-body {
  padding: 22px 24px 26px !important;
  background:
    linear-gradient(180deg, rgba(3, 40, 68, .98), rgba(2, 28, 50, .99)) !important;
  max-height: calc(100vh - 145px) !important;
}
.more-options-modal .mobile-more-grid {
  display: grid !important;
  gap: 12px !important;
}
.more-options-modal .mobile-menu-item,
.more-options-modal .mobile-menu-item.primary-item {
  position: relative !important;
  width: 100% !important;
  min-height: 72px !important;
  padding: 11px 52px 11px 14px !important;
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
  color: #f4fbff !important;
  background: linear-gradient(145deg, rgba(14, 72, 109, .78), rgba(5, 43, 72, .88)) !important;
  border: 1px solid rgba(113, 194, 224, .25) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px rgba(0, 13, 31, .16) !important;
}
.more-options-modal .mobile-menu-item.primary-item {
  border-color: #4bdaf5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(70, 217, 247, .12), 0 10px 24px rgba(0, 18, 37, .25) !important;
}
.more-options-modal .mobile-menu-item::after {
  content: "›" !important;
  position: absolute !important;
  right: 19px !important;
  top: 50% !important;
  transform: translateY(-53%) !important;
  color: #d7f4ff !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  font-weight: 300 !important;
}
.more-options-modal .mobile-menu-item > span:first-child,
.more-options-modal .mobile-menu-item.primary-item > span:first-child {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, #19d5f3 0%, #087fc5 55%, #0751a4 100%) !important;
  border: 1px solid rgba(123, 235, 255, .55) !important;
  box-shadow: 0 8px 18px rgba(0, 64, 126, .38), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.more-options-modal .mobile-menu-item svg {
  width: 24px !important;
  height: 24px !important;
  stroke: currentColor !important;
}
.more-options-modal .mobile-menu-item strong,
.more-options-modal .mobile-menu-item.primary-item strong {
  color: #f5fbff !important;
  font-size: 1rem !important;
  font-weight: 680 !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
}
.more-options-modal .mobile-menu-item.danger-item {
  border-color: rgba(244, 75, 105, .78) !important;
  background: linear-gradient(145deg, rgba(37, 59, 82, .88), rgba(18, 39, 63, .92)) !important;
}
.more-options-modal .mobile-menu-item.danger-item strong,
.more-options-modal .mobile-menu-item.danger-item::after {
  color: #ff8f9d !important;
}
.more-options-modal .mobile-menu-item.danger-item > span:first-child {
  background: linear-gradient(145deg, #ef5266, #a91438) !important;
  border-color: rgba(255, 151, 167, .58) !important;
  box-shadow: 0 8px 18px rgba(132, 9, 41, .35), inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.more-options-modal .mobile-menu-item:hover,
.more-options-modal .mobile-menu-item:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(73, 219, 246, .78) !important;
  box-shadow: 0 12px 28px rgba(0, 14, 34, .32), 0 0 0 3px rgba(37, 206, 239, .09) !important;
}

@media (max-width: 820px) {
  .topbar {
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
  }
  .shortcut-card {
    min-height: 94px !important;
    padding: 10px 7px !important;
  }
  .shortcut-card > span.shortcut-icon {
    width: 38px !important;
    height: 38px !important;
  }
}

@media (max-width: 540px) {
  .topbar {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
  }
  .content { padding-top: 8px !important; }
  .shortcut-grid { gap: 8px !important; }
  .shortcut-card {
    min-height: 88px !important;
    padding: 9px 5px !important;
    border-radius: 15px !important;
  }
  .shortcut-card > span.shortcut-icon {
    width: 35px !important;
    height: 35px !important;
    border-radius: 11px !important;
  }
  .shortcut-card .shortcut-svg {
    width: 18px !important;
    height: 18px !important;
  }
  .shortcut-card strong { font-size: .73rem !important; }
  .shortcut-card small { font-size: .54rem !important; }

  .more-options-modal {
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 14px) !important;
    margin: auto 8px 7px !important;
    border-radius: 28px !important;
  }
  .more-options-modal .modal-header {
    min-height: 88px !important;
    padding: 15px 16px !important;
    gap: 12px !important;
  }
  .more-options-modal .modal-header::before {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
  }
  .more-options-modal .modal-header h3,
  .more-options-modal .modal-header #modalTitle {
    font-size: 1.55rem !important;
  }
  .more-options-modal .modal-header .icon-button,
  .more-options-modal .modal-header [data-close-modal] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }
  .more-options-modal .modal-body {
    padding: 15px 14px 18px !important;
    max-height: calc(100vh - 110px) !important;
  }
  .more-options-modal .mobile-more-grid { gap: 9px !important; }
  .more-options-modal .mobile-menu-item,
  .more-options-modal .mobile-menu-item.primary-item {
    min-height: 64px !important;
    padding: 9px 42px 9px 11px !important;
    grid-template-columns: 43px minmax(0, 1fr) !important;
    gap: 11px !important;
    border-radius: 17px !important;
  }
  .more-options-modal .mobile-menu-item > span:first-child,
  .more-options-modal .mobile-menu-item.primary-item > span:first-child {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
  }
  .more-options-modal .mobile-menu-item svg {
    width: 21px !important;
    height: 21px !important;
  }
  .more-options-modal .mobile-menu-item strong,
  .more-options-modal .mobile-menu-item.primary-item strong {
    font-size: .91rem !important;
  }
  .more-options-modal .mobile-menu-item::after {
    right: 14px !important;
    font-size: 1.7rem !important;
  }
}


/* V2.1.8 — visual mais delicado e compacto */
.topbar {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  padding: 4px 10px !important;
  background: #03182d !important;
}
.topbar-brand {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.topbar-brand-logo {
  width: auto !important;
  max-width: min(92vw, 520px) !important;
  height: 82px !important;
  max-height: 82px !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.content {
  padding-top: 8px !important;
}
.dashboard-daily {
  gap: 12px !important;
}
.metric-button,
.dashboard-daily .metric {
  min-height: 104px !important;
  border-radius: 24px !important;
  padding: 14px 16px !important;
  box-shadow: 0 10px 24px rgba(0, 12, 28, .16) !important;
}
.metric::after {
  width: 82px !important;
  height: 82px !important;
  right: -24px !important;
  top: -24px !important;
  opacity: .75 !important;
}
.metric-icon {
  font-size: 1.2rem !important;
  margin-bottom: 8px !important;
}
.metric .label {
  font-size: .78rem !important;
  line-height: 1.2 !important;
}
.metric .value {
  font-size: clamp(1.35rem, 5.6vw, 2rem) !important;
  margin-top: 8px !important;
  line-height: 1.05 !important;
}
.metric .hint {
  margin-top: 5px !important;
  font-size: .70rem !important;
  line-height: 1.25 !important;
}
.shortcut-grid {
  gap: 8px !important;
}
.shortcut-card {
  min-height: 82px !important;
  padding: 9px 6px !important;
  border-radius: 14px !important;
  gap: 4px !important;
  box-shadow: 0 8px 18px rgba(0, 14, 31, .12) !important;
}
.shortcut-card > span.shortcut-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}
.shortcut-card .shortcut-svg {
  width: 17px !important;
  height: 17px !important;
}
.shortcut-card strong {
  font-size: .72rem !important;
  line-height: 1.1 !important;
}
.shortcut-card small {
  font-size: .52rem !important;
  line-height: 1.15 !important;
}
@media (max-width: 820px) {
  .topbar {
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    padding: 4px 8px !important;
  }
  .topbar-brand-logo {
    max-width: min(90vw, 430px) !important;
    height: 72px !important;
    max-height: 72px !important;
  }
  .content {
    padding: 10px 12px 100px !important;
  }
  .dashboard-daily .metric,
  .metric-button {
    min-height: 96px !important;
    padding: 13px 14px !important;
    border-radius: 22px !important;
  }
  .metric::after {
    width: 74px !important;
    height: 74px !important;
    right: -22px !important;
    top: -22px !important;
  }
  .metric .label {
    font-size: .75rem !important;
  }
  .metric .value {
    font-size: clamp(1.25rem, 8vw, 1.9rem) !important;
  }
  .metric .hint {
    font-size: .67rem !important;
  }
  .shortcut-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .shortcut-card {
    min-height: 76px !important;
    padding: 8px 5px !important;
  }
  .shortcut-card > span.shortcut-icon {
    width: 31px !important;
    height: 31px !important;
    border-radius: 9px !important;
  }
  .shortcut-card .shortcut-svg {
    width: 16px !important;
    height: 16px !important;
  }
  .shortcut-card strong {
    font-size: .68rem !important;
  }
  .shortcut-card small {
    font-size: .49rem !important;
  }
}
@media (max-width: 540px) {
  .topbar {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    padding: 2px 6px !important;
  }
  .topbar-brand-logo {
    max-width: 88vw !important;
    height: 64px !important;
    max-height: 64px !important;
  }
  .content {
    padding: 8px 10px 96px !important;
  }
  .dashboard-daily,
  .grid.cards-4,
  .grid.cards-3 {
    gap: 10px !important;
  }
  .dashboard-daily .metric,
  .metric-button {
    min-height: 90px !important;
    padding: 12px 12px 11px !important;
    border-radius: 20px !important;
  }
  .metric::after {
    width: 68px !important;
    height: 68px !important;
    right: -20px !important;
    top: -20px !important;
  }
  .metric-icon {
    font-size: 1.05rem !important;
    margin-bottom: 6px !important;
  }
  .metric .label {
    font-size: .72rem !important;
  }
  .metric .value {
    font-size: clamp(1.18rem, 10vw, 1.72rem) !important;
    margin-top: 6px !important;
  }
  .metric .hint {
    font-size: .63rem !important;
    margin-top: 4px !important;
  }
  .shortcut-grid {
    gap: 6px !important;
  }
  .shortcut-card {
    min-height: 70px !important;
    padding: 7px 4px !important;
    border-radius: 13px !important;
    gap: 3px !important;
  }
  .shortcut-card > span.shortcut-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }
  .shortcut-card .shortcut-svg {
    width: 14px !important;
    height: 14px !important;
  }
  .shortcut-card strong {
    font-size: .64rem !important;
  }
  .shortcut-card small {
    font-size: .46rem !important;
  }
}


/* V2.1.9 — tela de login profissional e totalmente legível */
.login-screen {
  color: #17364d !important;
  padding: 18px !important;
}
.login-card {
  width: min(460px, 100%) !important;
  padding: 28px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.985) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 30px 85px rgba(0, 18, 36, .42) !important;
  color: #17364d !important;
}
.brand-login {
  display: grid !important;
  grid-template-columns: 72px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 15px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid #dceaf0 !important;
}
.brand-login .brand-logo {
  width: 72px !important;
  height: 72px !important;
  padding: 0 !important;
  border-radius: 20px !important;
  object-fit: cover !important;
  background: #062b4a !important;
  border: 1px solid rgba(13, 151, 205, .34) !important;
  box-shadow: 0 12px 26px rgba(5, 70, 110, .24) !important;
}
.brand-login strong {
  display: block !important;
  color: #073452 !important;
  font-size: 1.22rem !important;
  line-height: 1.1 !important;
  letter-spacing: .16em !important;
  opacity: 1 !important;
}
.brand-login span {
  display: block !important;
  margin-top: 7px !important;
  color: #617887 !important;
  font-size: .84rem !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
}
.login-card h1 {
  margin: 24px 0 8px !important;
  color: #0b3558 !important;
  font-size: clamp(1.72rem, 6vw, 2.08rem) !important;
  line-height: 1.12 !important;
  font-weight: 820 !important;
  letter-spacing: -.035em !important;
  opacity: 1 !important;
}
.login-card > .muted,
.login-card p.muted {
  color: #647987 !important;
  font-size: .94rem !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
}
.login-card label {
  color: #29495e !important;
  font-size: .82rem !important;
  font-weight: 760 !important;
  opacity: 1 !important;
}
.login-card input {
  min-height: 52px !important;
  color: #f7fdff !important;
  background: linear-gradient(155deg, #0b3558 0%, #061f3d 100%) !important;
  border: 1px solid rgba(72, 210, 240, .22) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 20px rgba(4, 31, 57, .10) !important;
}
.login-card input::placeholder {
  color: #d7edf6 !important;
  opacity: .92 !important;
}
.login-card input:focus {
  border-color: #27cbea !important;
  box-shadow: 0 0 0 4px rgba(39, 203, 234, .14), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.login-card .password-wrap .icon-button {
  color: #ffffff !important;
  opacity: .92 !important;
}
.login-card .button.primary.large {
  min-height: 54px !important;
  margin-top: 3px !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  background: linear-gradient(135deg, #25d5ec 0%, #0ba8d5 48%, #08608f 100%) !important;
  box-shadow: 0 13px 28px rgba(5, 104, 150, .28) !important;
}
.connection-status {
  margin-top: 16px !important;
  padding: 12px 13px !important;
  color: #456577 !important;
  background: linear-gradient(145deg, #f1f8fa, #e7f3f7) !important;
  border: 1px solid #d5e7ed !important;
  border-radius: 14px !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
}
.demo-help {
  margin-top: 14px !important;
  color: #526f80 !important;
  opacity: 1 !important;
}
.demo-help summary {
  color: #0b5276 !important;
  font-size: .84rem !important;
  font-weight: 780 !important;
  opacity: 1 !important;
}
.demo-grid button {
  color: #17364d !important;
  background: #f6fbfc !important;
  border: 1px solid #d7e7ed !important;
  opacity: 1 !important;
}
@media (max-width: 540px) {
  .login-screen { padding: 12px !important; }
  .login-card {
    padding: 22px 19px !important;
    border-radius: 24px !important;
  }
  .brand-login {
    grid-template-columns: 62px minmax(0,1fr) !important;
    gap: 12px !important;
    padding-bottom: 15px !important;
  }
  .brand-login .brand-logo {
    width: 62px !important;
    height: 62px !important;
    border-radius: 17px !important;
  }
  .brand-login strong { font-size: 1.06rem !important; }
  .brand-login span { font-size: .75rem !important; }
  .login-card h1 { margin-top: 20px !important; }
  .login-card input { min-height: 50px !important; }
}


/* V2.2.0 — estado de autenticação estável: nunca exibe login e painel juntos */
body.is-logged-out #loginScreen {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.is-logged-out #appShell {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.is-authenticated #loginScreen {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.is-authenticated #appShell {
  visibility: visible !important;
  opacity: 1 !important;
}
@media (min-width: 821px) {
  body.is-authenticated #appShell { display: grid !important; }
}
@media (max-width: 820px) {
  body.is-authenticated #appShell { display: block !important; }
}

/* V2.2.1 — layout premium e estável da tela de login */
.login-screen {
  min-height: 100dvh !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px 14px 24px !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(98,227,255,.22), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(64,184,255,.18), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(0,196,255,.12), transparent 28%),
    linear-gradient(180deg, #062543 0%, #04182f 48%, #041423 100%) !important;
}
.login-card {
  width: min(440px, 100%) !important;
  padding: 26px 22px 22px !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.995) 0%, rgba(247,251,253,.985) 100%) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: 0 28px 72px rgba(0, 15, 32, .46) !important;
  color: #17364d !important;
  position: relative !important;
  overflow: hidden !important;
}
.login-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(53,205,243,.16), transparent 30%),
    radial-gradient(circle at bottom left, rgba(12,126,192,.10), transparent 24%);
  pointer-events: none;
}
.login-card > * { position: relative; z-index: 1; }
.brand-login {
  display: grid !important;
  grid-template-columns: 76px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding-bottom: 16px !important;
  margin-bottom: 2px !important;
  border-bottom: 1px solid rgba(7,95,131,.10) !important;
}
.brand-login .brand-logo {
  width: 76px !important;
  height: 76px !important;
  padding: 0 !important;
  border-radius: 22px !important;
  object-fit: cover !important;
  background: #062b4a !important;
  border: 1px solid rgba(13,151,205,.32) !important;
  box-shadow: 0 14px 32px rgba(6,60,95,.20) !important;
}
.brand-login strong {
  display: block !important;
  color: #073452 !important;
  font-size: 1.18rem !important;
  line-height: 1.08 !important;
  letter-spacing: .16em !important;
}
.brand-login span {
  display: block !important;
  margin-top: 7px !important;
  color: #69808e !important;
  font-size: .82rem !important;
  line-height: 1.32 !important;
}
.login-card h1 {
  margin: 22px 0 8px !important;
  color: #0b3558 !important;
  font-size: clamp(1.7rem, 6vw, 2rem) !important;
  line-height: 1.12 !important;
  font-weight: 820 !important;
  letter-spacing: -.035em !important;
}
.login-card > .muted,
.login-card p.muted {
  color: #667c89 !important;
  font-size: .94rem !important;
  line-height: 1.45 !important;
  margin-bottom: 18px !important;
}
.login-card .form-grid.single {
  display: grid !important;
  gap: 14px !important;
}
.login-card label {
  display: grid !important;
  gap: 8px !important;
  color: #29495e !important;
  font-size: .82rem !important;
  font-weight: 760 !important;
}
.login-card input {
  width: 100% !important;
  min-height: 53px !important;
  padding: 0 18px !important;
  color: #f7fdff !important;
  font-size: .98rem !important;
  font-weight: 650 !important;
  background: linear-gradient(155deg, #0b3558 0%, #062442 100%) !important;
  border: 1px solid rgba(72,210,240,.22) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(4,31,57,.10) !important;
}
.login-card input::placeholder {
  color: #d7edf6 !important;
  opacity: .92 !important;
}
.password-wrap {
  position: relative !important;
}
.password-wrap input {
  padding-right: 52px !important;
}
.login-card .password-wrap .icon-button {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
}
.login-card .button.primary.large {
  min-height: 54px !important;
  margin-top: 2px !important;
  border-radius: 17px !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #25d5ec 0%, #0ba8d5 48%, #08608f 100%) !important;
  box-shadow: 0 14px 28px rgba(5,104,150,.28) !important;
}
.connection-status {
  margin-top: 16px !important;
  padding: 12px 13px !important;
  color: #456577 !important;
  background: linear-gradient(145deg, #f1f8fa, #e7f3f7) !important;
  border: 1px solid #d5e7ed !important;
  border-radius: 14px !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
}
.demo-help {
  margin-top: 14px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(245,250,252,.92) !important;
  border: 1px solid #deedf2 !important;
  color: #526f80 !important;
}
.demo-help summary {
  color: #0b5276 !important;
  font-size: .84rem !important;
  font-weight: 780 !important;
  cursor: pointer !important;
}
.demo-grid {
  display: grid !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.demo-grid button {
  min-height: 44px !important;
  border-radius: 14px !important;
  color: #17364d !important;
  font-weight: 700 !important;
  background: #f6fbfc !important;
  border: 1px solid #d7e7ed !important;
}
@media (max-width: 540px) {
  .login-screen {
    padding: 12px !important;
    align-items: start !important;
  }
  .login-card {
    margin-top: 10px !important;
    width: 100% !important;
    padding: 22px 18px 18px !important;
    border-radius: 24px !important;
  }
  .brand-login {
    grid-template-columns: 62px minmax(0,1fr) !important;
    gap: 12px !important;
    padding-bottom: 14px !important;
  }
  .brand-login .brand-logo {
    width: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
  }
  .brand-login strong { font-size: 1.02rem !important; }
  .brand-login span { font-size: .73rem !important; }
  .login-card h1 {
    margin-top: 20px !important;
    font-size: 1.72rem !important;
  }
  .login-card > .muted,
  .login-card p.muted { font-size: .9rem !important; }
  .login-card input { min-height: 50px !important; }
}


/* V2.2.2 — correção de leitura dos formulários e finalização de vendas */
.modal:not(.more-options-modal),
.modal:not(.more-options-modal) .modal-frame,
.modal:not(.more-options-modal) .modal-body {
  color: #17364d !important;
  background: #ffffff !important;
}
.modal:not(.more-options-modal) .modal-body {
  border-top: 0 !important;
}
.modal:not(.more-options-modal) h3,
.modal:not(.more-options-modal) h4,
.modal:not(.more-options-modal) strong,
.modal:not(.more-options-modal) label,
.modal:not(.more-options-modal) .sale-item-info strong,
.modal:not(.more-options-modal) .sale-item-subtotal,
.modal:not(.more-options-modal) .sale-payment-total strong,
.modal:not(.more-options-modal) .sale-grand-summary strong {
  color: #123650 !important;
}
.modal:not(.more-options-modal) .muted,
.modal:not(.more-options-modal) small,
.modal:not(.more-options-modal) .form-hint,
.modal:not(.more-options-modal) .sale-selected-count,
.modal:not(.more-options-modal) .sale-item-info small,
.modal:not(.more-options-modal) .sale-payment-total span {
  color: #667c89 !important;
}
.modal:not(.more-options-modal) input,
.modal:not(.more-options-modal) select,
.modal:not(.more-options-modal) textarea {
  color: #17364d !important;
  background: #ffffff !important;
  border: 1px solid #cbdde5 !important;
  box-shadow: none !important;
}
.modal:not(.more-options-modal) input::placeholder,
.modal:not(.more-options-modal) textarea::placeholder {
  color: #8aa0ad !important;
}
.modal:not(.more-options-modal) input:focus,
.modal:not(.more-options-modal) select:focus,
.modal:not(.more-options-modal) textarea:focus {
  border-color: #19bcd4 !important;
  box-shadow: 0 0 0 3px rgba(25,188,212,.13) !important;
}
.modal:not(.more-options-modal) select option {
  color: #17364d !important;
  background: #ffffff !important;
}
.modal:not(.more-options-modal) .quick-client-box,
.modal:not(.more-options-modal) .sale-payment-box,
.modal:not(.more-options-modal) .sale-plan-preview,
.modal:not(.more-options-modal) .sale-grand-summary {
  color: #17364d !important;
  background: #f3f9fb !important;
  border-color: #d3e5ec !important;
}
.modal:not(.more-options-modal) .sale-category-panel {
  color: #17364d !important;
  background: transparent !important;
}
.modal:not(.more-options-modal) .sale-wizard-tab,
.modal:not(.more-options-modal) .category-tab,
.modal:not(.more-options-modal) .button.secondary,
.modal:not(.more-options-modal) .small-button {
  color: #0d4f70 !important;
  background: linear-gradient(180deg, #f7fcfd 0%, #e9f5f8 100%) !important;
  border: 1px solid #cde4eb !important;
  box-shadow: none !important;
}
.modal:not(.more-options-modal) .sale-wizard-tab.active,
.modal:not(.more-options-modal) .category-tab.active,
.modal:not(.more-options-modal) .button.primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #20d7eb 0%, #0a9fce 48%, #08628f 100%) !important;
  border-color: transparent !important;
}
.modal:not(.more-options-modal) .sale-pick-row {
  color: #17364d !important;
  background: #ffffff !important;
  border-color: #d5e4ea !important;
}
.modal:not(.more-options-modal) .sale-pick-row.selected {
  background: #edfafd !important;
  border-color: #17bdd4 !important;
  box-shadow: 0 0 0 2px rgba(23,189,212,.10) !important;
}
.modal:not(.more-options-modal) .sale-item-thumb {
  background: #edf4f7 !important;
}
.modal:not(.more-options-modal) .sale-product-picker {
  scrollbar-color: #a7cbd8 #eef5f7;
}
.sale-form-message {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border-radius: 13px;
  font-size: .84rem;
  line-height: 1.4;
  font-weight: 750;
}
.sale-form-message.error {
  color: #8d2222 !important;
  background: #fff1f0 !important;
  border: 1px solid #efc0bc !important;
}
.sale-form-message.success {
  color: #17613e !important;
  background: #edf9f3 !important;
  border: 1px solid #bfe3cf !important;
}
.sale-form-message.hidden { display: none !important; }
@media (max-width: 540px) {
  .modal:not(.more-options-modal) .modal-header { padding: 16px !important; }
  .modal:not(.more-options-modal) .modal-body { padding: 14px !important; }
  .modal:not(.more-options-modal) .sale-wizard-tab { padding: 10px 11px !important; }
  .sale-form-message { font-size: .79rem; padding: 10px 12px; }
}