:root {
  --palette-primary: #256f68;
  --palette-primary-hover: #174d49;
  --palette-primary-active: #123f3b;
  --palette-secondary: #1687aa;
  --palette-soft: #eef7f6;
  --palette-focus-ring: rgba(47, 207, 150, 0.16);
  --bg: #f5f7f8;
  --panel: #ffffff;
  --text: #172026;
  --muted: #66747f;
  --line: #dbe2e6;
  --primary: #256f68;
  --primary-dark: #174d49;
  --danger: #a83f3f;
  --income: #1f7a4d;
  --expense: #b4532a;
  --shadow: 0 16px 40px rgba(23, 32, 38, 0.08);
  --surface-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 248, 247, 0.95) 58%, rgba(246, 250, 252, 0.98));
  --control-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(230, 244, 242, 0.95));
  --input-gradient: linear-gradient(135deg, #ffffff, #f7fbfb);
  --action-gradient: linear-gradient(135deg, var(--palette-primary), var(--palette-secondary));
  --menu-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(234, 247, 245, 0.94), rgba(242, 248, 251, 0.96));
  --accent-border: color-mix(in srgb, var(--primary) 22%, var(--line));
  --module-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 249, 246, 0.96) 52%, rgba(241, 247, 252, 0.98));
  --table-header-gradient: linear-gradient(135deg, rgba(237, 248, 246, 0.98), rgba(228, 241, 247, 0.96));
  --field-focus-shadow: 0 0 0 3px rgba(47, 207, 150, 0.16), 0 10px 24px rgba(23, 50, 60, 0.07);
}


.patient-continuity-panel,
.patient-timeline-panel,
.therapeutic-plan-panel,
.prontuario-vivo-panel { margin: 14px 0; padding: 16px; border: 1px solid var(--border-color, #d9e1ea); border-radius: 14px; background: var(--surface, #fff); min-width: 0; }
.patient-continuity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.patient-continuity-card { padding: 10px; border-radius: 10px; background: var(--surface-muted, #f5f7fa); min-width: 0; }
.patient-continuity-card span, .patient-continuity-card small { display: block; color: var(--text-muted, #64748b); font-size: .75rem; }
.patient-continuity-card strong, .patient-continuity-card p { display: block; margin: 4px 0 0; overflow-wrap: anywhere; }
.patient-timeline-filters { align-items: end; margin: 12px 0; }
.patient-timeline-list { display: grid; gap: 8px; min-width: 0; }
.patient-timeline-item { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px; border: 1px solid var(--border-color, #d9e1ea); border-radius: 10px; min-width: 0; }
.patient-timeline-item time { color: var(--text-muted, #64748b); font-size: .78rem; }
.patient-timeline-item h4, .patient-timeline-item p { margin: 0; overflow-wrap: anywhere; }
.patient-timeline-item p { margin-top: 4px; color: var(--text-muted, #64748b); }
.therapeutic-plan-summary { display: grid; gap: 10px; }
.therapeutic-plan-card, .therapeutic-objective-card, .therapeutic-goal-card { padding: 12px; border: 1px solid var(--border-color, #d9e1ea); border-radius: 10px; min-width: 0; background: var(--surface-muted, #f8fafc); }
.therapeutic-plan-card h4, .therapeutic-objective-card h4, .therapeutic-goal-card h5 { margin: 0 0 5px; overflow-wrap: anywhere; }
.therapeutic-plan-card p, .therapeutic-objective-card p, .therapeutic-goal-card p { margin: 4px 0; overflow-wrap: anywhere; }
.therapeutic-plan-meta, .therapeutic-plan-indicators { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.therapeutic-plan-indicator { padding: 9px; border-radius: 9px; background: var(--surface-muted, #f5f7fa); min-width: 0; }
.therapeutic-plan-indicator span, .therapeutic-plan-indicator small { display: block; color: var(--text-muted, #64748b); font-size: .76rem; }
.therapeutic-plan-indicator strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.therapeutic-plan-objectives { display: grid; gap: 9px; margin-top: 12px; }
.therapeutic-objective-card > .therapeutic-goals { display: grid; gap: 7px; margin-top: 8px; }
.therapeutic-plan-form { margin-top: 12px; padding: 12px; border: 1px dashed var(--border-color, #cbd5e1); border-radius: 10px; }
.therapeutic-plan-form .full-width { grid-column: 1 / -1; }
.prontuario-vivo-panel { border-left: 4px solid var(--primary); background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--primary) 4%, var(--panel))); }
.prontuario-vivo-heading { align-items: flex-start; }
.prontuario-vivo-summary, .prontuario-vivo-grid, .prontuario-vivo-indicators { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 9px; min-width: 0; }
.prontuario-vivo-summary { margin-bottom: 10px; }
.prontuario-vivo-summary article, .prontuario-vivo-grid article, .prontuario-vivo-indicators article { display: grid; gap: 4px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 88%, var(--primary) 12%); }
.prontuario-vivo-summary span, .prontuario-vivo-grid span, .prontuario-vivo-indicators span, .prontuario-vivo-summary small, .prontuario-vivo-grid small, .prontuario-vivo-indicators small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.prontuario-vivo-summary strong, .prontuario-vivo-grid strong, .prontuario-vivo-indicators strong { overflow-wrap: anywhere; }
.prontuario-vivo-patient { border-left: 3px solid var(--accent); }
.prontuario-vivo-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.prontuario-vivo-columns > section { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 94%, var(--primary) 6%); }
.prontuario-vivo-list { display: grid; gap: 7px; min-width: 0; }
.prontuario-vivo-list article, .prontuario-vivo-list p { margin: 0; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); overflow-wrap: anywhere; }
.prontuario-vivo-list article:last-child, .prontuario-vivo-list p:last-child { border-bottom: 0; }
.prontuario-vivo-list article { display: grid; gap: 3px; }
.prontuario-vivo-list article span, .prontuario-vivo-list article small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.prontuario-vivo-list article strong { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .patient-timeline-item { grid-template-columns: 1fr; gap: 5px; }
  .patient-timeline-filters { grid-template-columns: 1fr; }
  .therapeutic-plan-panel { padding: 12px; }
  .therapeutic-plan-meta, .therapeutic-plan-indicators { grid-template-columns: 1fr; }
  .prontuario-vivo-panel { padding: 12px; }
  .prontuario-vivo-columns { grid-template-columns: 1fr; }
}

/* Commercial UX Foundation: a tab is an operation target, never a second global menu. */
#commerceView > .commerce-tabbar { display: none !important; }
#commerceView:not(.commerce-operation-active) > .commerce-tabbar { display: none; }
#commerceView.vasi-root-form.commerce-sale-active {
  grid-template-rows: 22px 38px minmax(0, 1fr) !important;
}

/* Products: keep identity and actions visible while the table owns horizontal scroll. */
.commerce-product-list-card .table-wrap {
  max-height: min(64vh, 680px);
  overflow: auto;
  overscroll-behavior: contain;
}
.commerce-products-table th:nth-child(1),
.commerce-products-table td:nth-child(1),
.commerce-products-table th:nth-child(2),
.commerce-products-table td:nth-child(2),
.commerce-products-table th:last-child,
.commerce-products-table td:last-child {
  position: sticky;
  z-index: 2;
}
.commerce-products-table th:nth-child(1),
.commerce-products-table td:nth-child(1) { left: 0; }
.commerce-products-table th:nth-child(2),
.commerce-products-table td:nth-child(2) { left: 76px; }
.commerce-products-table th:last-child,
.commerce-products-table td:last-child { right: 0; box-shadow: -8px 0 12px rgba(7, 59, 120, .08); }
.commerce-products-table thead th:nth-child(1),
.commerce-products-table thead th:nth-child(2),
.commerce-products-table thead th:last-child { z-index: 4; }
.commerce-products-table tbody tr:nth-child(odd) td:nth-child(1),
.commerce-products-table tbody tr:nth-child(odd) td:nth-child(2),
.commerce-products-table tbody tr:nth-child(odd) td:last-child { background: #ffffff; }
.commerce-products-table tbody tr:nth-child(even) td:nth-child(1),
.commerce-products-table tbody tr:nth-child(even) td:nth-child(2),
.commerce-products-table tbody tr:nth-child(even) td:last-child { background: #f0f8f7; }
@media (max-width: 760px) {
  .commerce-product-list-card .table-wrap { max-height: 58vh; }
  .commerce-products-table th:nth-child(2),
  .commerce-products-table td:nth-child(2) { left: 76px; max-width: 220px; }
}
@media (max-width: 1400px) and (min-width: 981px) {
  .commerce-products-workspace { grid-template-columns: 1fr; }
  .commerce-product-main-grid,
  .commerce-product-price-grid,
  .commerce-product-fiscal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .commerce-product-form,
  .commerce-product-main-grid,
  .commerce-product-price-grid,
  .commerce-product-fiscal-grid,
  .commerce-product-options-grid { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .commerce-module-action { transition: none; }
}

/* VASI Internal Shell — foundation used first by PEP Settings. */
:root {
  --vasi-shell-content-max: 1480px;
  --vasi-shell-space-1: 6px;
  --vasi-shell-space-2: 10px;
  --vasi-shell-space-3: 14px;
  --vasi-shell-space-4: 18px;
  --vasi-shell-space-5: 24px;
  --vasi-shell-space-6: 32px;
  --vasi-shell-header-height: 52px;
  --vasi-shell-radius: 14px;
  --vasi-shell-shadow: 0 10px 30px rgba(14, 74, 87, .07);
  --vasi-shell-divider: color-mix(in srgb, var(--line) 82%, transparent);
  --vasi-shell-filter-min: 180px;
  --vasi-shell-overlay-z: 1000;
}

.vasi-internal-shell {
  box-sizing: border-box;
  width: min(100%, var(--vasi-shell-content-max));
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  align-content: start;
  gap: var(--vasi-shell-space-4);
}

.vasi-context-bar {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: var(--vasi-shell-space-2);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.vasi-context-bar__area { color: var(--accent); }
.vasi-context-bar__separator { color: var(--vasi-shell-divider); }

.vasi-page-header {
  min-width: 0;
  min-height: var(--vasi-shell-header-height);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vasi-shell-space-4);
  padding-bottom: var(--vasi-shell-space-3);
  border-bottom: 1px solid var(--vasi-shell-divider);
}

.vasi-page-header > div { min-width: 0; }
.vasi-page-header h1 { margin: 2px 0 4px; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.15; }
.vasi-page-header .panel-copy { max-width: 72ch; margin: 0; }

.vasi-module-tabs {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.vasi-data-region {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: var(--vasi-shell-space-5);
  padding: var(--vasi-shell-space-5);
  border: 1px solid var(--vasi-shell-divider);
  border-radius: var(--vasi-shell-radius);
  box-shadow: var(--vasi-shell-shadow);
}

.vasi-data-region .settings-panel {
  min-width: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.vasi-data-region .settings-heading { padding: 0 0 var(--vasi-shell-space-3); border-bottom: 1px solid var(--vasi-shell-divider); }
.vasi-data-region .settings-heading h2 { margin-bottom: 4px; }
.vasi-data-region .permissions-panel,
.vasi-data-region .pep-calendar-settings { min-width: 0; }
.vasi-data-region .form-grid > *,
.vasi-data-region .permissions-panel > * { min-width: 0; }

@media (max-width: 900px) {
  .vasi-internal-shell { gap: var(--vasi-shell-space-3); }
  .vasi-page-header { flex-direction: column; }
  .vasi-data-region { padding: var(--vasi-shell-space-4); }
}

@media (max-width: 640px) {
  .vasi-context-bar { font-size: .72rem; }
  .vasi-page-header h1 { font-size: 1.35rem; }
  .vasi-data-region { padding: var(--vasi-shell-space-3); border-radius: 12px; }
}

/* VASI Pulse notifications drawer and integrated login composition. */
.vasi-notification-drawer{position:fixed;inset:0;z-index:1200}.vasi-notification-drawer[hidden]{display:none}.vasi-notification-backdrop{position:absolute;inset:0;width:100%;border:0;background:rgba(7,45,99,.22);backdrop-filter:blur(3px);cursor:pointer}.vasi-notification-panel{position:absolute;top:0;right:0;width:min(420px,calc(100vw - 22px));height:100%;padding:24px 20px;background:#f7fcfd;border-left:1px solid #cfe5ed;box-shadow:-18px 0 44px rgba(7,59,120,.18);animation:vasiDrawerIn .18s ease-out}.vasi-notification-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid #dcebf1}.vasi-notification-panel h2{margin:4px 0 0;color:#073b78;font-size:22px}.vasi-notification-panel>header button{width:34px;height:34px;border:1px solid #cfe5ed;border-radius:10px;background:#fff;color:#073b78;font-size:22px;line-height:1;cursor:pointer}.vasi-notification-list{display:grid;gap:10px;padding-top:18px}.vasi-notification-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:11px;width:100%;padding:13px;border:1px solid #dcebf1;border-radius:14px;background:#fff;color:#17324a;text-align:left;cursor:pointer;transition:.16s}.vasi-notification-item:hover,.vasi-notification-item:focus-visible{border-color:#09a8d8;box-shadow:0 8px 20px rgba(7,59,120,.12);transform:translateY(-1px);outline:0}.vasi-notification-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#0876d8,#11b8a5);color:#fff;font-weight:900}.vasi-notification-item.warning .vasi-notification-icon{background:linear-gradient(135deg,#f29b16,#f6c453)}.vasi-notification-item strong,.vasi-notification-item small{display:block}.vasi-notification-item strong{font-size:13px}.vasi-notification-item small{margin-top:3px;color:#60748a;font-size:11px;line-height:1.4}.vasi-notification-item>b{color:#0876d8}.vasi-notification-empty{padding:24px 12px;border:1px dashed #bcd9e4;border-radius:14px;color:#60748a;text-align:center;font-size:13px}@keyframes vasiDrawerIn{from{transform:translateX(18px);opacity:.7}to{transform:none;opacity:1}}
.auth-backdrop-brand{position:relative;isolation:isolate;width:min(100%,760px);min-height:clamp(360px,58vh,650px);padding:clamp(18px,3vw,42px);border-radius:32px;background:linear-gradient(145deg,rgba(7,59,120,.97),rgba(8,118,216,.88) 54%,rgba(17,184,165,.88));box-shadow:0 28px 80px rgba(7,59,120,.22);overflow:hidden}.auth-backdrop-brand::before{content:"";position:absolute;inset:auto -12% -30% -10%;height:70%;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(17,209,155,.85),transparent 45%),linear-gradient(145deg,transparent,rgba(9,168,216,.4));opacity:.9;z-index:-1}.auth-backdrop-brand::after{content:"";position:absolute;inset:0;background:url('/assets/brand/vasi-hero-illustration-system.svg') center/cover no-repeat;opacity:.5;mix-blend-mode:screen;z-index:-1}.auth-backdrop-brand img{width:min(100%,560px);margin:auto;filter:drop-shadow(0 16px 24px rgba(0,25,65,.2))}.auth-card{background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}
@media (max-width:900px){.auth-backdrop-brand{min-height:0;width:min(100%,560px);padding:14px 20px;border-radius:24px}.auth-backdrop-brand img{width:min(100%,360px)}}
/* Login institutional composition: individual Pulse assets, no rectangular hero image. */
.auth-backdrop-brand::after{content:"";position:absolute;inset:auto -8% -12% 20%;height:42%;background:linear-gradient(145deg,transparent,rgba(9,168,216,.28));border-radius:50%;opacity:.9;z-index:-1}.auth-backdrop-brand>img{display:none}.auth-brand-lockup{display:flex;align-items:center;gap:18px;position:relative;z-index:1}.auth-brand-symbol{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,25,65,.22))}.auth-brand-wordmark{display:grid;gap:3px;color:#fff}.auth-brand-wordmark img{display:block;width:min(280px,34vw);height:auto;filter:brightness(0) invert(1)}.auth-brand-wordmark span{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:#8feee0}.auth-brand-wordmark small{font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.72);text-transform:uppercase}.auth-brand-copy{position:relative;z-index:1;max-width:440px;margin-top:clamp(42px,7vh,88px);color:#fff}.auth-brand-copy p{margin:0 0 12px;color:#8feee0;font-size:11px;font-weight:900;letter-spacing:.22em}.auth-brand-copy h2{margin:0;font-size:clamp(32px,4vw,58px);line-height:1.04;letter-spacing:-.05em}.auth-brand-copy h2 strong{color:#9af4d6}.auth-brand-copy>span{display:block;max-width:34ch;margin-top:18px;color:rgba(255,255,255,.78);font-size:15px;line-height:1.55}.auth-pulse-orbit{position:absolute;top:12%;right:8%;width:180px;height:180px;border:1px solid rgba(143,238,224,.35);border-radius:50%;box-shadow:0 0 0 18px rgba(143,238,224,.05),0 0 0 38px rgba(143,238,224,.035)}.auth-pulse-lines{position:absolute;right:4%;bottom:12%;display:flex;align-items:end;gap:10px;transform:skewY(-10deg);opacity:.76}.auth-pulse-lines i{display:block;width:16px;border-radius:6px 6px 2px 2px;background:linear-gradient(#09a8d8,#11d19b);box-shadow:0 8px 18px rgba(17,209,155,.22)}.auth-pulse-lines i:nth-child(1){height:30px}.auth-pulse-lines i:nth-child(2){height:54px}.auth-pulse-lines i:nth-child(3){height:42px}.auth-pulse-lines i:nth-child(4){height:78px}.auth-pulse-lines i:nth-child(5){height:62px}.auth-card{background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}
@media (max-width:900px){.auth-backdrop-brand{min-height:0;width:min(100%,560px);padding:24px 20px;border-radius:24px}.auth-brand-symbol{width:64px;height:64px}.auth-brand-wordmark img{width:min(240px,42vw)}.auth-brand-copy{margin-top:28px}.auth-brand-copy h2{font-size:clamp(28px,6vw,42px)}}
@media (max-width:560px){.auth-backdrop-brand{display:block;min-height:0;padding:8px 14px;background:transparent;box-shadow:none}.auth-backdrop-brand::before,.auth-backdrop-brand::after,.auth-pulse-orbit,.auth-pulse-lines{display:none}.auth-brand-lockup{justify-content:center;gap:10px}.auth-brand-symbol{width:48px;height:48px}.auth-brand-wordmark img{width:160px}.auth-brand-wordmark span{font-size:9px;letter-spacing:.18em}.auth-brand-wordmark small{font-size:8px}.auth-brand-copy{display:none}.vasi-notification-panel{padding:18px 14px}}

/* Home V2 / shell visual base: reuses the existing VASI tokens, themes and permissions. */
.nav-collapse-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
}
.nav-collapse-button:hover,
.nav-collapse-button:focus-visible { border-color: var(--palette-primary); color: var(--palette-primary); }
.nav-collapsed .module-nav { width: 86px; }
.nav-collapsed .module-nav {
  position: fixed;
  left: 0;
  top: 88px;
  bottom: 0;
  height: auto;
  overflow-y: auto;
  display: block;
  z-index: 20;
}
.nav-collapsed .module-nav .nav-primary-group { display: flex; flex-direction: column; gap: 6px; }
.nav-collapsed .module-nav .nav-menu,
.nav-collapsed .module-nav .mobile-nav-footer { display: none !important; }
.nav-collapsed #appShell > main { margin-left: 86px; }
.nav-collapsed .module-nav .nav-title,
.nav-collapsed .module-nav .nav-menu summary,
.nav-collapsed .module-nav .tab-button:not(.active) { font-size: 0; }
.nav-collapsed .module-nav .tab-button { justify-content: center; padding-inline: 8px; min-height: 42px; }
.nav-collapsed .module-nav .tab-button::first-letter { font-size: 15px; }
.nav-collapsed .module-nav .mobile-nav-header strong,
.nav-collapsed .module-nav .mobile-nav-header > div > span { font-size: 0; }
.nav-collapsed .module-nav .mobile-nav-header > div > span::after { content: "V"; font-size: 18px; font-weight: 900; }
.nav-collapsed .portal-layout { max-width: calc(100% - 86px); }
.portal-layout { max-width: 1480px; margin-inline: auto; padding: clamp(20px, 3vw, 42px); }
.portal-hero { border: 1px solid color-mix(in srgb, var(--palette-primary) 18%, var(--line)); box-shadow: 0 22px 60px color-mix(in srgb, var(--palette-primary) 10%, transparent); }
.portal-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, color-mix(in srgb, var(--palette-primary) 12%, transparent), transparent 48%, color-mix(in srgb, var(--palette-secondary) 10%, transparent)); }
.portal-company-copy h2 { max-width: 13ch; font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing: -.05em; }
.portal-hero-actions .secondary-button,
.portal-command-trigger,
.portal-quick-button,
.portal-favorite-button { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.portal-hero-actions .secondary-button:hover,
.portal-command-trigger:hover,
.portal-quick-button:hover,
.portal-favorite-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px color-mix(in srgb, var(--palette-primary) 14%, transparent); }
.portal-insights { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.portal-insight-card { min-height: 118px; border-radius: 18px; }
.portal-insight-card strong { overflow-wrap: anywhere; }
.portal-section-heading h3 { letter-spacing: -.02em; }
.portal-favorite-button { position: relative; min-height: 122px; display: grid; align-content: center; gap: 6px; text-align: left; cursor: pointer; }
.portal-favorite-button small { color: var(--muted); font-size: 12px; }
.portal-favorite-code { color: var(--palette-primary); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.portal-favorite-order { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; }
.portal-favorite-order button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; }
.portal-favorite-order button:hover, .portal-favorite-order button:focus-visible { color: var(--palette-primary); border-color: var(--palette-primary); }
.portal-work-grid { gap: 18px; }
@media (max-width: 1100px) {
  .portal-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-collapsed .portal-layout { max-width: 100%; }
}
@media (max-width: 700px) {
  .portal-layout { padding: 16px; max-width: 100%; }
  .portal-insights { grid-template-columns: 1fr; }
  .portal-company-copy h2 { font-size: 2.15rem; }
  .portal-hero-actions { flex-wrap: wrap; }
  .portal-hero-actions .secondary-button { min-width: 0; flex: 1 1 180px; }
  .nav-collapse-button { display: none; }
  .nav-collapsed .module-nav { position: fixed; top: 0; bottom: 0; width: min(86vw, 320px); }
  .nav-collapsed #appShell > main { margin-left: 0; }
}
@media (min-width: 701px) and (max-width: 1320px) {
  .topbar-brand { min-width: 0; }
  .topbar-brand-copy { min-width: 0; }
  .topbar-brand-copy h1 { max-width: 190px; font-size: clamp(1rem, 1.6vw, 1.35rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-brand-copy .eyebrow { font-size: 10px; white-space: nowrap; }
}

/* Portal shell refinement: brand, navigation and visual density follow the approved VASI reference. */
.module-nav {
  padding: 0 12px 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(41, 184, 196, .16), transparent 30%),
    linear-gradient(180deg, #f7fbfc 0%, #edf7f6 56%, #f7fbfc 100%);
  border-right: 1px solid rgba(25, 108, 126, .16);
}
.portal-sidebar-brand {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 10px;
  border-bottom: 1px solid rgba(25, 108, 126, .14);
  margin-bottom: 10px;
}
.portal-sidebar-logo { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
.portal-sidebar-brand-copy { display: grid; gap: 1px; min-width: 0; }
.portal-sidebar-brand-copy strong { color: #13506b; font-size: 18px; letter-spacing: .12em; line-height: 1; }
.portal-sidebar-brand-copy span { color: #4b7782; font-size: 10px; white-space: nowrap; }
.portal-sidebar-brand .nav-collapse-button { position: static; margin-left: auto; flex: 0 0 auto; }
.portal-area-nav { padding: 0 2px 10px !important; margin-top: 0 !important; gap: 5px; }
.portal-area-nav .nav-title { padding: 0 10px 5px; color: #2c6875; font-size: 10px; letter-spacing: .12em; }
.portal-area-nav .tab-button { min-height: 40px; border-radius: 12px; }
.portal-area-nav .tab-button.active { background: linear-gradient(135deg, #0e6aa2, #20b99a); color: #fff; box-shadow: 0 8px 18px rgba(14, 106, 162, .18); }
.portal-area-nav .tab-button:hover { background: rgba(34, 172, 168, .12); }
.portal-area-nav .tab-button.active:hover { background: linear-gradient(135deg, #0e6aa2, #20b99a); }
.topbar { padding: 12px 20px; gap: 16px; min-height: 76px; background: linear-gradient(110deg, #ffffff 0%, #f0fbfa 58%, #e8f4fb 100%); }
.topbar-brand { gap: 12px; }
.system-top-logo { width: 42px; max-height: 42px; }
.topbar-brand-copy .eyebrow { color: #4b7782; letter-spacing: .08em; }
.topbar-brand-copy h1 { color: #123d58; }
.topbar-actions { flex-wrap: nowrap; gap: 7px; }
.topbar-clock { min-width: 0; padding: 8px 10px; font-size: 12px; }
.topbar-icon-button, .topbar-account-button, .topbar-refresh-button, #logoutButton { min-height: 36px; }
.topbar-icon-button { border-color: rgba(24, 102, 128, .18); background: rgba(255,255,255,.72); }
.portal-layout { padding: 14px clamp(18px, 2.4vw, 34px) 28px; background: radial-gradient(circle at 82% 4%, rgba(36, 185, 179, .11), transparent 26%), linear-gradient(180deg, #f5fbfc 0%, #ffffff 42%); }
.portal-hero { background: linear-gradient(120deg, rgba(227, 247, 248, .96), rgba(255,255,255,.98) 55%, rgba(235,245,252,.96)); border-radius: 22px; }
.portal-hero::after { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -78px; border-radius: 50%; background: linear-gradient(135deg, rgba(19, 118, 174, .18), rgba(36, 195, 155, .08)); pointer-events: none; }
.portal-company-copy h2 { font-size: clamp(1.45rem, 2.2vw, 2.25rem); color: #123d58; }
.portal-company-copy > p:not(.eyebrow) { color: #416874; }
.portal-command-center { margin-top: 14px; }
.portal-area-grid { gap: 14px; }
.portal-area-card { border-color: rgba(28, 127, 145, .16); box-shadow: 0 12px 28px rgba(28, 89, 108, .09); }
.portal-area-card .portal-area-card-action { color: #0f6e96; font-weight: 800; }
@media (max-width: 1320px) and (min-width: 761px) {
  .topbar-actions { gap: 5px; }
  .topbar-clock { display: none; }
  .topbar-account-button, .topbar-refresh-button { padding-inline: 9px; min-width: 0; }
  .portal-layout { padding-top: 13px; }
}

/* Comercial em notebook: compacta apenas o shell superior; nenhum campo operacional some. */
@media (max-width: 1320px) and (min-width: 981px) {
  #appShell > .topbar {
    min-height: 64px;
    padding: 8px 12px;
    gap: 10px;
  }

  #appShell > .topbar .topbar-brand {
    gap: 8px;
  }

  #appShell > .topbar .system-top-logo {
    width: 36px;
    max-height: 36px;
  }

  #appShell > .topbar .topbar-brand-copy .eyebrow {
    font-size: 9px;
    line-height: 1.05;
  }

  #appShell > .topbar .topbar-brand-copy h1 {
    font-size: clamp(.98rem, 1.45vw, 1.18rem);
    line-height: 1.1;
  }

  #appShell > .topbar .company-context {
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
  }

  #appShell > .topbar .topbar-actions {
    align-items: center;
    gap: 4px;
  }
}
@media (max-width: 760px) {
  .portal-sidebar-brand { min-height: 64px; }
  .portal-sidebar-brand-copy span { display: none; }
  .topbar { min-height: 64px; padding: 10px 14px; }
  .topbar-actions { gap: 4px; }
  .topbar-clock, .topbar-refresh-button { display: none; }
  .topbar-account-button { display: none; }
}

/* Nova Venda: o shell usa a viewport primeiro; o conteudo operacional rola dentro dela. */
.commerce-module-home { display: grid; gap: 22px; align-content: start; min-width: 0; }
.commerce-food-identity{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid rgba(17,184,165,.22);border-left:4px solid var(--vasi-teal,#11b8a5);border-radius:14px;background:linear-gradient(135deg,#f8fffd,#fff);box-shadow:0 6px 18px rgba(7,59,120,.06)}
.commerce-food-identity__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,var(--vasi-blue,#0876d8),var(--vasi-teal,#11b8a5));font-size:1.35rem}
.commerce-food-identity strong,.commerce-food-identity span{display:block}.commerce-food-identity strong{color:var(--vasi-navy,#073b78);font-size:1.02rem}.commerce-food-identity span{margin-top:3px;color:#5b7084;font-size:.78rem}
.commerce-food-kitchen-summary{margin-bottom:12px}.commerce-food-order-form{border:1px solid rgba(8,118,216,.16)}
[data-commerce-panel="food"] > .records-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;min-width:0}
[data-commerce-panel="food"] > .records-header > div{flex:1;min-width:0}
[data-commerce-panel="food"] > .records-header h2{font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.15;max-width:100%}
[data-commerce-panel="food"] > .records-header .secondary-button{flex:none;white-space:nowrap}
[data-commerce-panel="food"] > .crm-summary-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
[data-commerce-panel="food"] > .crm-summary-cards article{min-width:0;width:auto}
@media (max-width:760px){.commerce-food-identity{align-items:flex-start}.commerce-food-identity__icon{flex:none}.commerce-food-kitchen-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){[data-commerce-panel="food"] > .crm-summary-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.commerce-module-home__intro { padding: 8px 2px 0; }
.commerce-module-home__intro h2 { margin: 4px 0 6px; color: var(--vasi-navy, #073b78); }
.commerce-module-home__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.commerce-module-action { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 12px; min-height: 92px; padding: 16px; text-align: left; color: var(--vasi-ink, #17324a); background: linear-gradient(145deg, #fff, var(--vasi-ice, #f3fafd)); border: 1px solid rgba(8,118,216,.18); border-radius: 14px; box-shadow: 0 8px 22px rgba(7,59,120,.08); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.commerce-module-action:hover, .commerce-module-action:focus-visible { border-color: var(--vasi-cyan, #09a8d8); box-shadow: 0 12px 26px rgba(8,118,216,.16); transform: translateY(-1px); outline: none; }
.commerce-module-action > span { grid-row: 1 / -1; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: linear-gradient(145deg, var(--vasi-blue, #0876d8), var(--vasi-teal, #11b8a5)); border-radius: 11px; font-size: 1.2rem; }
.commerce-module-action strong { font-size: .98rem; color: var(--vasi-navy, #073b78); }
.commerce-module-action small { color: #5b7084; line-height: 1.3; }
@media (max-width: 1180px) { .commerce-module-home__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .commerce-module-home { gap: 14px; } .commerce-module-home__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .commerce-module-action { min-height: 82px; padding: 12px; } }
@media (max-width: 480px) { .commerce-module-home__actions { grid-template-columns: 1fr; } }
#commerceView.commerce-operation-active > .commerce-module-home { display: none; }
#commerceView > .commerce-tabbar { display: none !important; }
#commerceView.commerce-operation-active > .vasi-page-header { align-items: center; }
@media (min-width: 981px) {
  #commerceView.vasi-root-form.commerce-sale-active {
    height: calc(100dvh - 64px);
    min-height: 0;
    grid-template-rows: 22px 38px 42px minmax(0, 1fr);
    gap: 6px;
    padding: 4px 8px 8px;
    overflow: hidden;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-context-bar {
    min-height: 0;
    height: 22px;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header {
    min-height: 0;
    height: 38px;
    padding: 0 0 4px;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header h1 { margin: 0; font-size: 1.35rem; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header .panel-copy { display: none; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-tabbar { min-height: 0; height: 42px; padding: 4px; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench { min-height: 0; height: 100%; overflow: auto; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-header { margin: 0 0 4px; padding-bottom: 4px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-header .panel-copy { display: none; }
}

/* Tarefa 02: proporções finais do protótipo oficial, sem alterar a navegação funcional. */
@media (min-width: 761px) {
  #moduleNav { width: 188px; background: linear-gradient(180deg, #063f67 0%, #075d79 56%, #04708a 100%); border-right: 0; box-shadow: 8px 0 28px rgba(7, 54, 85, .16); }
  #appShell > .topbar, #appShell > .portal-layout, #appShell > main:not(.portal-layout) { margin-left: 188px; }
  body.nav-collapsed #moduleNav { width: 68px; }
  body.nav-collapsed #appShell > .topbar, body.nav-collapsed #appShell > .portal-layout, body.nav-collapsed #appShell > main:not(.portal-layout) { margin-left: 68px; }
  .portal-sidebar-brand { border-bottom-color: rgba(255,255,255,.16); }
  .portal-sidebar-brand-copy strong, .portal-sidebar-brand-copy span { color: #fff; }
  .portal-area-nav .nav-title { color: rgba(255,255,255,.68); }
  .portal-area-nav .tab-button { color: rgba(255,255,255,.88); }
  .portal-area-nav .tab-button:hover, .portal-area-nav .tab-button:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
  .portal-area-nav .tab-button.active { background: linear-gradient(135deg, #1687bd, #19b99c); color: #fff; }
  .portal-area-nav-divider { background: rgba(255,255,255,.22); }
  .portal-area-nav .tab-button small { color: #a7f1db; }
  .portal-area-icon { width: 42px; height: 42px; border-radius: 13px; }
  .portal-area-card { grid-template-columns: 42px minmax(0, 1fr); min-height: 128px; padding: 16px; gap: 11px; border-radius: 16px; }
  .portal-area-copy strong { font-size: 16px; margin-top: 2px; }
  .portal-area-copy p { font-size: 12px; line-height: 1.32; }
  .portal-area-foot { font-size: 10px; }
  #appShell:has(#portalView:not([hidden])) .topbar { min-height: 64px; padding: 8px 18px; }
  #appShell:has(#portalView:not([hidden])) .topbar-clock,
  #appShell:has(#portalView:not([hidden])) #tabletNavOpen,
  #appShell:has(#portalView:not([hidden])) #refreshButton { display: none; }
  #appShell:has(#portalView:not([hidden])) .topbar-actions { gap: 8px; }
  #appShell:has(#portalView:not([hidden])) .topbar-icon-button { min-width: 34px; height: 34px; padding: 0 9px; }
  #appShell:has(#portalView:not([hidden])) .portal-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 88px; padding: 14px 18px; background: linear-gradient(110deg, #e8f9f8 0%, #f8fcff 58%, #e7f5fc 100%); }
  #appShell:has(#portalView:not([hidden])) .portal-company-brand { gap: 12px; }
  #appShell:has(#portalView:not([hidden])) .portal-company-logo-frame { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(135deg, #1476d0, #21be9b); }
  #appShell:has(#portalView:not([hidden])) .portal-company-logo { width: 34px; filter: brightness(0) invert(1); }
  #appShell:has(#portalView:not([hidden])) .portal-company-copy h2 { font-size: clamp(1.35rem, 2vw, 2rem); }
  #appShell:has(#portalView:not([hidden])) .portal-company-copy > p:not(.eyebrow) { font-size: 12px; }
  #appShell:has(#portalView:not([hidden])) .portal-command-center { margin-top: 10px; }
}

/* Comercial final: reorganizacao estrutural no desktop minimo e tabs VASI Pulse. */
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-workbench,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form,
#commerceView.vasi-root-form.commerce-sale-active .commerce-workbench-panel,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart {
  min-width: 0;
  max-width: 100%;
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout {
  height: auto;
  overflow: visible;
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
  height: auto;
  overflow: visible;
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form input,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form select,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form textarea,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form button {
  min-width: 0;
  max-width: 100%;
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table {
  max-width: 100%;
  overflow-x: auto;
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table table { min-width: 720px; }
#commerceView.vasi-root-form > .commerce-tabbar {
  border-color: color-mix(in srgb, var(--vasi-blue) 42%, var(--line));
  background: linear-gradient(110deg, var(--vasi-navy-2), var(--vasi-navy) 56%, color-mix(in srgb, var(--vasi-cyan) 44%, var(--vasi-navy)));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--vasi-navy) 16%, transparent);
}
#commerceView.vasi-root-form > .commerce-tabbar::after { background: linear-gradient(90deg, var(--vasi-blue), var(--vasi-cyan), var(--vasi-green)); }
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab {
  border-color: color-mix(in srgb, white 28%, transparent);
  background: color-mix(in srgb, white 10%, transparent);
  color: white;
}
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab:hover,
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab:focus-visible {
  border-color: var(--vasi-cyan);
  background: color-mix(in srgb, var(--vasi-cyan) 26%, transparent);
  color: white;
}
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab.active {
  border-color: white;
  background: linear-gradient(135deg, var(--vasi-blue), var(--vasi-cyan));
  color: white;
}
@media (max-width: 1240px) {
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-workbench-panel {
    height: auto;
    overflow: visible;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-product-gallery { max-height: 360px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    gap: var(--vasi-shell-space-4);
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form > * { grid-area: auto; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  }
}
@media (max-width: 760px) {
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid { grid-template-columns: minmax(0, 1fr); }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-product-gallery { max-height: none; }
}

/* P0 final: Nova Venda uses one bounded operational workspace.  The rules
   below are intentionally last so legacy Commerce breakpoints cannot turn the
   form into a clipped strip or move the checkout outside the viewport. */
@media (min-width: 1181px) {
  html:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) {
    height: 100%;
    overflow: hidden;
  }
  body:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) {
    height: 100dvh;
    overflow: hidden;
  }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    gap: 4px !important;
    padding: 4px 8px 8px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-context-bar,
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-tabbar {
    display: none !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header {
    display: flex !important;
    flex: 0 0 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 0 2px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 8px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout {
    display: grid !important;
    flex: 1 1 auto !important;
    grid-template-columns: minmax(240px, .38fr) minmax(0, 1.62fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 8px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-product-gallery {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart {
    padding: 8px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px 58px minmax(44px, 1fr) 40px 104px 118px auto !important;
    grid-template-areas: "context" "fiscal" "cart" "total" "payment" "checkout" "message" !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    gap: 4px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid { grid-area: context !important; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr) !important; gap: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid { grid-area: fiscal !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; padding: 4px 6px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table { grid-area: cart !important; min-height: 0 !important; max-height: none !important; overflow: auto !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total { grid-area: total !important; min-height: 0 !important; padding: 4px 10px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel { grid-area: payment !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid { grid-area: delivery !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
    display: grid !important;
    grid-area: checkout !important;
    grid-template-columns: minmax(110px, .68fr) minmax(0, 1.32fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-review,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-review { overflow: auto !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(84px, .82fr) minmax(110px, 1.18fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "details summary actions" !important;
    gap: 4px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    min-width: 0 !important;
    gap: 3px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-adjustment-grid { display: contents !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details > label { min-width: 0 !important; gap: 2px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details textarea { min-width: 0 !important; width: 100% !important; height: 32px !important; min-height: 32px !important; padding: 4px 5px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details textarea { resize: none !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-summary { grid-area: summary !important; min-width: 0 !important; overflow: hidden !important; padding: 6px 7px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details { grid-area: details !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions { grid-area: actions !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 4px !important; overflow: hidden !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions button { width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 46px !important; height: 46px !important; padding: 3px 6px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form > * { min-width: 0 !important; max-width: 100% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form textarea,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form button { min-width: 0 !important; max-width: 100% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid label { min-width: 0 !important; gap: 2px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid button { min-width: 0 !important; width: 100% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table table { width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: fixed !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td { min-width: 0 !important; padding: 4px !important; overflow-wrap: anywhere !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table button { min-width: 0 !important; width: 100% !important; padding-inline: 3px !important; }
}

@media (min-width: 761px) and (max-height: 620px) {
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar {
    min-height: 0 !important;
    padding: 5px 8px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-brand { flex: 0 1 44% !important; min-width: 0 !important; gap: 4px !important; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .system-top-logo { width: 34px !important; height: 34px !important; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-brand-copy { min-width: 0 !important; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-brand-copy .eyebrow { margin: 0 !important; font-size: 8px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .brand-line h1 { font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .company-context { margin: 0 !important; font-size: 9px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-actions { flex: 1 1 56% !important; min-width: 0 !important; flex-wrap: nowrap !important; gap: 3px !important; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-actions > * { min-width: 0 !important; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-actions button { min-height: 28px !important; height: 28px !important; padding: 3px 6px !important; font-size: 11px !important; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header { flex-basis: 26px !important; height: 26px !important; min-height: 26px !important; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench { padding: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout { gap: 4px !important; grid-template-columns: minmax(210px, .36fr) minmax(0, 1.64fr) !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart { padding: 5px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar { gap: 3px !important; padding: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar button { height: 28px !important; min-height: 28px !important; padding-block: 2px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form { grid-template-rows: 38px 42px minmax(42px, 1fr) 28px 62px 82px auto !important; gap: 3px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid { gap: 3px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid { gap: 3px !important; padding: 2px 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form label { gap: 1px !important; font-size: .62rem !important; line-height: 1 !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form select { height: 24px !important; min-height: 24px !important; padding: 2px 4px !important; font-size: .68rem !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form textarea { height: 24px !important; min-height: 24px !important; padding: 2px 4px !important; font-size: .68rem !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total { padding: 2px 6px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-heading { min-height: 20px !important; height: 20px !important; padding: 2px 4px !important; font-size: .68rem !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid { gap: 3px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout { grid-template-columns: minmax(90px, .62fr) minmax(0, 1.38fr) !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { grid-template-columns: minmax(0, 1.25fr) minmax(68px, .8fr) minmax(92px, 1.2fr) !important; gap: 3px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details { gap: 2px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details textarea { height: 24px !important; min-height: 24px !important; padding: 2px 3px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions { padding: 2px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions button { height: 40px !important; min-height: 40px !important; padding: 2px 4px !important; font-size: 10px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions button strong { font-size: 13px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td { padding: 2px 3px !important; font-size: .64rem !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table button { height: 22px !important; min-height: 22px !important; padding: 1px 2px !important; font-size: .62rem !important; }
}

/* At the smallest supported desktop viewport the fixed checkout canvas is
   intentionally relaxed into a single readable flow. This keeps delivery,
   payment and finalization reachable without squeezing or clipping controls
   behind the VASI rail. */
@media (min-width: 981px) and (max-width: 1180px) {
  html body #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) #commerceView.vasi-root-form.commerce-sale-active,
  html body #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench {
    height: auto !important;
    min-height: calc(100dvh - 64px) !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-workbench,
  html body #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout,
  html body #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  html body #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html body #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  html body #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form > * {
    grid-area: auto !important;
  }
  html body #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  html body #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }
}

/* Final responsive contract for the available workspace after the VASI rail. */
@media (max-width: 1400px) and (min-width: 981px) {
  #commerceView.vasi-root-form .commerce-products-workspace { grid-template-columns: 1fr; }
  #commerceView.vasi-root-form .commerce-product-main-grid,
  #commerceView.vasi-root-form .commerce-product-price-grid,
  #commerceView.vasi-root-form .commerce-product-fiscal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
  #commerceView.vasi-root-form .commerce-product-form { min-width: 0; }
}

/* P0 payment row: keep the payment controls inside the reserved panel before
   the closing block starts. The fiscal option uses the third row for its
   existing status message; the first three controls simply leave it empty. */
@media (min-width: 761px) {
  #commerceView.commerce-sale-active .commerce-sale-payment-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 31px minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-heading,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel > .commerce-payment-grid {
    grid-column: 1 !important;
  }
  #commerceView.commerce-sale-active .commerce-payment-grid {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-items: stretch !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }
  #commerceView.commerce-sale-active .commerce-payment-grid > label {
    display: grid !important;
    grid-template-rows: 14px 32px minmax(0, 1fr) !important;
    align-content: stretch !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > button {
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding-block: 4px !important;
  }
  #commerceView.commerce-sale-active .commerce-payment-grid > label > .commerce-sale-fiscal-status {
    min-width: 0 !important;
    max-height: 18px !important;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
}

/* P0 payment row: keep the payment controls inside the reserved panel before
   the closing block starts.  The fiscal option uses the third row for its
   existing status message; the first three controls simply leave it empty. */
@media (min-width: 761px) {
  #commerceView.commerce-sale-active .commerce-sale-payment-panel {
    display: grid !important;
    grid-template-rows: 31px minmax(0, 1fr) !important;
  }

  #commerceView.commerce-sale-active .commerce-payment-grid {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-items: stretch !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label {
    display: grid !important;
    grid-template-rows: 14px 32px minmax(0, 1fr) !important;
    align-content: stretch !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > button {
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding-block: 4px !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > .commerce-sale-fiscal-status {
    min-width: 0 !important;
    max-height: 18px !important;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
}

/* P0 low-height convergence: keep the three closing fields in two compact
   rows so they remain readable instead of collapsing into a zero-width column. */
@media (min-width: 761px) and (max-height: 620px) {
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; grid-template-rows: none !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active > .vasi-context-bar,
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active > .commerce-tabbar { display: none !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header { display: flex !important; flex: 0 0 26px !important; height: 26px !important; min-height: 26px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; padding: 4px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout { display: grid !important; flex: 1 1 auto !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; grid-template-columns: minmax(210px, .36fr) minmax(0, 1.64fr) !important; gap: 4px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart { height: 100% !important; min-height: 0 !important; overflow: hidden !important; padding: 5px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products { display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-product-gallery { min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form { display: grid !important; height: 100% !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 38px 42px minmax(42px, 1fr) 28px 62px 82px auto !important; grid-template-areas: "context" "fiscal" "cart" "total" "payment" "checkout" "message" !important; gap: 3px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid { grid-area: context !important; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr) !important; height: 38px !important; min-height: 0 !important; gap: 3px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid { grid-area: fiscal !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; overflow: hidden !important; gap: 3px !important; padding: 2px 4px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table { grid-area: cart !important; min-height: 0 !important; overflow: auto !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total { grid-area: total !important; height: 28px !important; min-height: 28px !important; padding: 2px 6px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel { grid-area: payment !important; height: 62px !important; min-height: 62px !important; max-height: 62px !important; overflow: hidden !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-heading { height: 20px !important; min-height: 20px !important; padding: 2px 4px !important; font-size: .68rem !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid { height: 40px !important; min-height: 40px !important; max-height: 40px !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 40px !important; gap: 3px !important; padding: 0 !important; overflow: visible !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label { display: grid !important; grid-template-rows: 10px 24px 6px !important; align-content: start !important; min-height: 40px !important; height: 40px !important; gap: 0 !important; overflow: visible !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > input,
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > select,
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > button { align-self: start !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout { display: grid !important; grid-area: checkout !important; height: 82px !important; min-height: 82px !important; max-height: 82px !important; overflow: hidden !important; grid-template-columns: minmax(100px, .42fr) minmax(0, 1.58fr) !important; grid-template-rows: 82px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-review,
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { display: grid !important; grid-template-columns: minmax(0, 1.8fr) minmax(68px, .72fr) minmax(96px, 1.1fr) !important; grid-template-rows: 82px !important; grid-template-areas: "details summary actions" !important; gap: 3px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details { display: grid !important; grid-area: details !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 2px !important; min-width: 0 !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-adjustment-grid { display: contents !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-observation-field { grid-column: 1 / -1 !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form label { gap: 1px !important; font-size: .62rem !important; line-height: 1 !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form input,
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form select { height: 24px !important; min-height: 24px !important; padding: 2px 4px !important; font-size: .68rem !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form textarea { height: 24px !important; min-height: 24px !important; padding: 2px 4px !important; font-size: .68rem !important; resize: none !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details input,
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details textarea { width: 100% !important; height: 24px !important; min-height: 24px !important; padding: 2px 3px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-summary { grid-area: summary !important; min-width: 0 !important; padding: 3px 4px !important; font-size: .65rem !important; line-height: 1.05 !important; overflow: hidden !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions { grid-area: actions !important; min-width: 0 !important; height: 82px !important; min-height: 82px !important; padding: 2px !important; overflow: hidden !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions button { width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 2px 4px !important; font-size: 10px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions button strong { font-size: 13px !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-status { display: block !important; max-height: 8px !important; overflow: hidden !important; white-space: nowrap !important; font-size: 7px !important; line-height: 1 !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table table { width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: fixed !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th,
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td { min-width: 0 !important; padding: 2px 3px !important; font-size: .64rem !important; overflow-wrap: anywhere !important; }
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table input,
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table select,
  html body #appShell #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table button { width: 100% !important; min-width: 0 !important; height: 22px !important; min-height: 22px !important; padding: 1px 2px !important; font-size: .62rem !important; }
  html body #appShell > .topbar { min-height: 0 !important; padding: 5px 8px !important; gap: 4px !important; flex-wrap: nowrap !important; }
  html body #appShell > .topbar .topbar-brand { flex: 0 1 44% !important; min-width: 0 !important; gap: 4px !important; }
  html body #appShell > .topbar .system-top-logo { width: 34px !important; height: 34px !important; }
  html body #appShell > .topbar .topbar-brand-copy { min-width: 0 !important; }
  html body #appShell > .topbar .topbar-brand-copy .eyebrow { margin: 0 !important; font-size: 8px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body #appShell > .topbar .brand-line h1 { font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body #appShell > .topbar .company-context { margin: 0 !important; font-size: 9px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body #appShell > .topbar .topbar-actions { flex: 1 1 56% !important; min-width: 0 !important; flex-wrap: nowrap !important; gap: 3px !important; }
  html body #appShell > .topbar .topbar-actions > * { min-width: 0 !important; }
  html body #appShell > .topbar .topbar-actions button { min-height: 28px !important; height: 28px !important; padding: 3px 6px !important; font-size: 11px !important; }
}
@media (min-width: 761px) and (max-height: 620px) {
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid label { min-width: 0 !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel { height: 62px !important; min-height: 62px !important; max-height: 62px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-heading { height: 20px !important; min-height: 20px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid { height: 40px !important; min-height: 40px !important; max-height: 40px !important; grid-template-rows: 40px !important; overflow: visible !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid label { min-width: 0 !important; font-size: .6rem !important; line-height: 1 !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid button { height: 24px !important; min-height: 24px !important; padding: 2px 3px !important; font-size: .66rem !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-status { display: block !important; max-height: 8px !important; overflow: hidden !important; white-space: nowrap !important; font-size: 7px !important; line-height: 1 !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout { grid-template-columns: minmax(100px, .42fr) minmax(0, 1.58fr) !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { grid-template-columns: minmax(0, 1.8fr) minmax(68px, .72fr) minmax(96px, 1.1fr) !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-observation-field { grid-column: 1 / -1 !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-summary { font-size: .65rem !important; line-height: 1.05 !important; padding: 3px 4px !important; }
}

/* P0 Nova Venda: o painel de operacao usa a altura real do shell e reserva o
   fechamento antes de distribuir o espaco restante ao carrinho. */
@media (min-width: 761px) {
  html:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) {
    height: 100%;
    overflow: hidden;
  }

  body:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) {
    height: 100dvh;
    overflow: hidden;
  }

  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  #commerceView.vasi-root-form.commerce-sale-active {
    align-self: stretch;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 4px 8px 8px !important;
    overflow: hidden !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active > .vasi-context-bar,
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-tabbar {
    display: none !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header {
    display: flex !important;
    grid-row: 1;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 0 3px !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench {
    display: block !important;
    grid-row: 2;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout {
    display: grid !important;
    grid-template-columns: minmax(280px, .42fr) minmax(0, 1.58fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 8px !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-product-gallery {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-content: start;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(64px, 1fr) auto auto minmax(158px, auto) auto !important;
    grid-template-areas:
      "context"
      "fiscal"
      "cart"
      "total"
      "payment"
      "checkout"
      "message" !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 6px !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout,
  #commerceView.vasi-root-form.commerce-sale-active #commerceSaleMessage {
    grid-area: auto !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid { grid-area: context !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid { grid-area: fiscal !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table {
    grid-area: cart !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total { grid-area: total !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel { grid-area: payment !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid { grid-area: delivery !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
    display: grid !important;
    grid-area: checkout !important;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 158px !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-review,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-review { overflow: auto !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(140px, .8fr) minmax(160px, .9fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "details summary actions" !important;
    align-items: stretch;
    gap: 6px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details { grid-area: details !important; min-width: 0; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-summary { grid-area: summary !important; min-width: 0; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions { grid-area: actions !important; min-width: 0; }
  #commerceView.vasi-root-form.commerce-sale-active #commerceSaleMessage { grid-area: message !important; }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid {
    min-width: 0 !important;
    width: 100% !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid { grid-template-columns: minmax(140px, .7fr) minmax(0, 1.3fr) !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form > * { min-width: 0; max-width: 100%; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form textarea,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form button { min-width: 0; max-width: 100%; }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td {
    min-width: 0 !important;
    padding: 6px 5px !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th:nth-child(1),
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td:nth-child(1) { width: 26% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th:nth-child(2),
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td:nth-child(2) { width: 9% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th:nth-child(3),
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td:nth-child(3) { width: 17% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th:nth-child(4),
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td:nth-child(4) { width: 12% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th:nth-child(5),
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td:nth-child(5),
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th:nth-child(6),
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td:nth-child(6) { width: 10% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th:nth-child(7),
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td:nth-child(7) { width: 11% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th:nth-child(8),
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td:nth-child(8) { width: 5% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table button { width: 100%; min-width: 0 !important; padding-inline: 4px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout { grid-template-columns: minmax(220px, .36fr) minmax(0, 1.64fr) !important; }
}

@media (min-width: 761px) and (max-height: 620px) {
  #commerceView.vasi-root-form.commerce-sale-active {
    grid-template-rows: 28px minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 2px 4px 4px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout { gap: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart { padding: 7px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar { gap: 4px; padding: 5px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar button { min-height: 32px; height: 32px; padding-block: 3px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form { gap: 4px !important; grid-template-rows: auto auto minmax(28px, 1fr) auto auto minmax(88px, auto) auto !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid { gap: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form label { gap: 2px; font-size: .7rem; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form select { min-height: 30px; height: 30px; padding: 3px 6px; font-size: .76rem; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form textarea { min-height: 30px; height: 30px; padding: 3px 6px; font-size: .76rem; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-status { margin-top: 2px; padding: 2px 4px; font-size: 9px; line-height: 1.1; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td { padding: 3px 4px !important; font-size: .7rem; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total { padding: 4px 8px; min-height: 30px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout { min-height: 88px !important; gap: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { grid-template-columns: minmax(0, 1.2fr) minmax(90px, .8fr) minmax(135px, 1fr) !important; gap: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side .commerce-sale-details { gap: 3px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout #commerceSaleSubmitButton { min-height: 44px; height: 44px; padding: 4px 8px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout #commerceSaleSubmitButton span { font-size: 12px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout #commerceSaleSubmitButton strong { font-size: 15px; }
}

/* Nova Venda: autoridade final do workspace operacional.
   Regras de breakpoint legadas acima não podem reduzir a operação a uma faixa.
   O contexto e a navegação pertencem à entrada do módulo; a venda usa o
   workspace inteiro, com rolagem somente na própria região quando necessário. */
@media (min-width: 761px) {
  #commerceView.vasi-root-form.commerce-sale-active {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-rows: auto !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-context-bar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header {
    display: flex !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 0 4px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header > div {
    display: none !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-tabbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench {
    display: block !important;
    height: auto !important;
    max-height: calc(100dvh - 120px) !important;
    min-height: 0 !important;
    overflow: auto !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr) !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 150px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  #commerceView.vasi-root-form.commerce-sale-active {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-rows: auto !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-context-bar,
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-tabbar {
    display: none !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header {
    display: flex !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header > div {
    display: none !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 150px !important;
    overflow: visible !important;
  }
}

/* Override final: nenhum breakpoint posterior pode reduzir Nova Venda a uma
   faixa. O conteúdo permanece no fluxo e o scroll fica somente no workspace. */
@media (min-width: 761px) {
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench {
    display: block !important;
    max-height: calc(100dvh - 110px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout {
    grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr) !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 150px !important;
    overflow: visible !important;
  }
}

/* P0 Comercial: composição final da estação de Nova Venda. */
@media (min-width: 981px) {
  #commerceView.vasi-root-form.commerce-sale-active {
    grid-template-rows: 42px minmax(0, 1fr);
    gap: 6px;
    padding-top: 4px;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-context-bar,
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header { display: none; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-tabbar {
    grid-row: 1;
    min-height: 42px;
    height: 42px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench {
    grid-row: 2;
    min-height: 0;
    height: 100%;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout { position: static; inset: auto; }
}
@media (min-width: 761px) and (max-width: 1240px) and (max-height: 600px) {
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
    position: static;
    width: auto;
    height: 150px;
    min-height: 150px;
    grid-template-rows: 42px 108px;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side {
    grid-template-columns: minmax(130px, 1fr) 140px 210px;
  }
}

@media (min-width: 761px) and (max-width: 1240px) and (max-height: 600px) {
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
    position: fixed; top: auto !important; right: 4px !important; bottom: 0 !important; left: 428px !important;
    width: auto !important; height: 150px; min-height: 150px; z-index: 20;
    grid-template-rows: 42px 108px;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { grid-template-columns: minmax(130px, 1fr) 140px 210px; }
}

/* Nova Venda — variante Tela Cheia Operacional com autoridade sobre o reset genérico. */
@media (min-width: 981px) {
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench { min-height: 0; height: 100%; overflow: hidden !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout {
    min-height: 0; height: 100%; overflow: hidden;
    grid-template-columns: minmax(260px, .38fr) minmax(0, 1fr); gap: 8px;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart { min-height: 0; height: 100%; overflow: hidden; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
    min-height: 0; height: 100%; overflow: hidden;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto minmax(150px, auto);
    grid-template-areas: "context total" "fiscal payment" "cart cart" "delivery delivery" "checkout checkout";
    gap: 6px;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid { grid-area: context; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid { grid-area: fiscal; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table { grid-area: cart; min-height: 0; overflow: auto; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total { grid-area: total; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel { grid-area: payment; min-width: 0; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid { grid-area: delivery; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
    grid-area: checkout; min-height: 0; height: 150px; overflow: hidden;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
    grid-template-rows: minmax(0, 1fr);
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side {
    min-height: 0; overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  #commerceView.vasi-root-form.commerce-sale-active #commerceSaleMessage { grid-column: 1 / -1; }
}

/* Ultima camada do contrato: o breakpoint de reorganizacao nao pode reabrir o scroll global. */
@media (min-width: 981px) {
  body:has(#commerceView.commerce-sale-active:not([hidden])) { overflow: hidden; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench {
    min-height: 0;
    height: 100%;
    overflow: auto !important;
  }
}

/* VASI Comercial — camada semantica unica: superficies clean, identidade e respiro operacional. */
:root {
  --vasi-bg: #f3fafd;
  --vasi-bg-soft: color-mix(in srgb, #f3fafd 72%, white);
  --vasi-surface: #ffffff;
  --vasi-surface-soft: color-mix(in srgb, #f3fafd 82%, white);
  --vasi-surface-elevated: #ffffff;
  --vasi-border: color-mix(in srgb, #09a8d8 22%, #dbe2e6);
  --vasi-border-soft: color-mix(in srgb, #17324a 10%, #dbe2e6);
  --vasi-text: #17324a;
  --vasi-text-muted: #60748a;
  --vasi-text-soft: #7890a0;
  --vasi-primary: #0876d8;
  --vasi-primary-hover: #0a2d5d;
  --vasi-accent: #09a8d8;
  --vasi-success: #11d19b;
  --vasi-warning: #d99b2b;
  --vasi-danger: #b94a5a;
  --vasi-gradient-brand: linear-gradient(135deg, #0a2d5d, #0876d8 58%, #09a8d8);
  --vasi-gradient-primary: linear-gradient(135deg, #0876d8, #09a8d8);
  --vasi-gradient-soft: linear-gradient(135deg, #f3fafd, #ffffff 62%, color-mix(in srgb, #11b8a5 8%, white));
  --vasi-gradient-active: linear-gradient(135deg, #0876d8, #11b8a5);
  --vasi-gradient-surface: linear-gradient(145deg, #ffffff, #f3fafd);
  --vasi-shadow-soft: 0 8px 24px rgba(7, 59, 120, .07);
  --vasi-focus: 0 0 0 3px rgba(9, 168, 216, .2);
}

#commerceView.vasi-root-form,
#accountingView.vasi-root-form {
  color: var(--vasi-text);
  background: var(--vasi-gradient-soft);
}

#commerceView.vasi-root-form .commerce-tab-panel,
#commerceView.vasi-root-form .commerce-workbench-panel,
#commerceView.vasi-root-form .commerce-product-editor-card,
#commerceView.vasi-root-form .commerce-category-card,
#commerceView.vasi-root-form .commerce-technical-card,
#commerceView.vasi-root-form .commerce-category-list-card,
#commerceView.vasi-root-form .commerce-product-list-card,
#commerceView.vasi-root-form .commerce-production-column,
#commerceView.vasi-root-form .commerce-sale-payment-panel,
#commerceView.vasi-root-form .commerce-sale-checkout,
#commerceView.vasi-root-form .commerce-payment-review,
#commerceView.vasi-root-form .commerce-payment-summary,
#accountingView.vasi-root-form .accounting-section,
#accountingView.vasi-root-form .accounting-toolbar,
#accountingView.vasi-root-form .accounting-table-wrap {
  min-width: 0;
  max-width: 100%;
  border-color: var(--vasi-border);
  background: var(--vasi-gradient-surface);
  box-shadow: var(--vasi-shadow-soft);
}

#commerceView.vasi-root-form > .commerce-tabbar,
#commerceView.vasi-root-form > .commerce-tabbar .module-tabs,
#accountingView.vasi-root-form > .vasi-module-tabs {
  background: var(--vasi-gradient-surface);
  border-color: var(--vasi-border-soft);
  box-shadow: var(--vasi-shadow-soft);
}

#commerceView.vasi-root-form > .commerce-tabbar .feature-tab,
#accountingView.vasi-root-form > .vasi-module-tabs .feature-tab {
  border-color: var(--vasi-border-soft);
  background: transparent;
  color: var(--vasi-text);
  box-shadow: none;
}

#commerceView.vasi-root-form > .commerce-tabbar .feature-tab:hover,
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab:focus-visible,
#accountingView.vasi-root-form > .vasi-module-tabs .feature-tab:hover,
#accountingView.vasi-root-form > .vasi-module-tabs .feature-tab:focus-visible {
  border-color: var(--vasi-accent);
  background: color-mix(in srgb, var(--vasi-accent) 8%, white);
  color: var(--vasi-primary-hover);
  outline: none;
  box-shadow: var(--vasi-focus);
}

#commerceView.vasi-root-form > .commerce-tabbar .feature-tab.active,
#accountingView.vasi-root-form > .vasi-module-tabs .feature-tab.active {
  border-color: transparent;
  background: var(--vasi-gradient-active);
  color: white;
  box-shadow: 0 5px 14px rgba(8, 118, 216, .18);
}

#commerceView.vasi-root-form input,
#commerceView.vasi-root-form select,
#commerceView.vasi-root-form textarea,
#accountingView.vasi-root-form input,
#accountingView.vasi-root-form select,
#accountingView.vasi-root-form textarea {
  border-color: var(--vasi-border);
  background: var(--vasi-surface);
  color: var(--vasi-text);
}

#commerceView.vasi-root-form input:focus,
#commerceView.vasi-root-form select:focus,
#commerceView.vasi-root-form textarea:focus,
#accountingView.vasi-root-form input:focus,
#accountingView.vasi-root-form select:focus,
#accountingView.vasi-root-form textarea:focus { border-color: var(--vasi-accent); box-shadow: var(--vasi-focus); }

#commerceView.vasi-root-form .primary-button,
#accountingView.vasi-root-form .primary-button { background: var(--vasi-gradient-primary); color: white; }

#commerceView.vasi-root-form .table-wrap,
#accountingView.vasi-root-form .table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; border-color: var(--vasi-border); }

@media (max-width: 1151px) {
  #commerceView.vasi-root-form,
  #accountingView.vasi-root-form { gap: var(--vasi-shell-space-2); padding-inline: var(--vasi-shell-space-3); }
  #commerceView.vasi-root-form > .vasi-page-header,
  #accountingView.vasi-root-form > .vasi-page-header { padding-bottom: var(--vasi-shell-space-2); }
}

@media (min-width: 981px) {
  #commerceView.vasi-root-form.commerce-sale-active {
    height: calc(100dvh - 64px);
    min-height: 0;
    grid-template-rows: 22px 38px 42px minmax(0, 1fr);
    gap: 6px;
    padding: 4px 8px 8px;
    overflow: hidden;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-context-bar { min-height: 0; height: 22px; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header { min-height: 0; height: 38px; padding: 0 0 4px; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header h1 { margin: 0; font-size: 1.35rem; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header .panel-copy { display: none; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-tabbar { min-height: 0; height: 42px; padding: 4px; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench { min-height: 0; height: 100%; overflow: auto; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-header { margin: 0 0 4px; padding-bottom: 4px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-header .panel-copy { display: none; }
}

/* Clinical agenda palette: differentiated status without strong saturation. */
.appointment-week-card.appointment-status-agendado,
.appointment-timeline-card.appointment-status-agendado { background: linear-gradient(135deg, color-mix(in srgb, #4e86b8 13%, var(--panel)), color-mix(in srgb, #78b8cf 8%, var(--panel))) !important; border-left-color: #4e86b8; }
.appointment-week-card.appointment-status-confirmado,
.appointment-timeline-card.appointment-status-confirmado { background: linear-gradient(135deg, color-mix(in srgb, #1687aa 15%, var(--panel)), color-mix(in srgb, #53b6b0 9%, var(--panel))) !important; border-left-color: #1687aa; }
.appointment-week-card.appointment-status-chegou,
.appointment-timeline-card.appointment-status-chegou { background: linear-gradient(135deg, color-mix(in srgb, #d59b3d 16%, var(--panel)), color-mix(in srgb, #ead187 10%, var(--panel))) !important; border-left-color: #b57a20; }
.appointment-week-card.appointment-status-em_atendimento,
.appointment-timeline-card.appointment-status-em_atendimento { background: linear-gradient(135deg, color-mix(in srgb, #8065ad 15%, var(--panel)), color-mix(in srgb, #b69bd1 9%, var(--panel))) !important; border-left-color: #74579e; }
.appointment-week-card.appointment-status-evoluido,
.appointment-timeline-card.appointment-status-evoluido { background: linear-gradient(135deg, color-mix(in srgb, #2e9873 15%, var(--panel)), color-mix(in srgb, #78c69f 9%, var(--panel))) !important; border-left-color: #25825f; }
.appointment-week-card.appointment-status-faltou,
.appointment-timeline-card.appointment-status-faltou { background: linear-gradient(135deg, color-mix(in srgb, #d47d45 15%, var(--panel)), color-mix(in srgb, #e7b18c 9%, var(--panel))) !important; border-left-color: #bd6336; }
.appointment-week-card.appointment-status-cancelado,
.appointment-timeline-card.appointment-status-cancelado { background: linear-gradient(135deg, color-mix(in srgb, #b85b67 13%, var(--panel)), color-mix(in srgb, #d9a0a7 8%, var(--panel))) !important; border-left-color: #a64040; opacity: .82; }
.appointment-week-columns[style] {
  grid-template-columns: repeat(var(--appointment-visible-days), minmax(240px, 1fr));
  min-width: max(100%, calc(var(--appointment-visible-days) * 240px));
}

/* Definitive PEP evolution: single linear clinical document. */
@media (min-width: 981px) {
  #medicalRecordsView.clinical-focus-active .records-panel > .medical-grid {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  #medicalRecordsView.clinical-focus-active .evolution-panel {
    display: block !important;
    height: 100% !important;
    padding: 0 14px 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: smooth;
    background: linear-gradient(180deg, color-mix(in srgb, #dff2f4 42%, var(--panel)), var(--panel) 150px);
  }

  #medicalRecordsView.clinical-focus-active .evolution-workspace-header {
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0 -14px 12px;
    padding: 12px 18px;
    border-bottom: 1px solid color-mix(in srgb, #258a78 35%, var(--line));
    background: linear-gradient(112deg, color-mix(in srgb, #123f58 92%, var(--panel)), color-mix(in srgb, #176f73 88%, var(--panel)) 58%, color-mix(in srgb, #2a927b 84%, var(--panel)));
    color: #fff;
    box-shadow: 0 10px 24px rgba(11, 61, 75, .16);
  }
  #medicalRecordsView.clinical-focus-active .evolution-workspace-header h2,
  #medicalRecordsView.clinical-focus-active .evolution-workspace-header .eyebrow { color: #fff; }
  #medicalRecordsView.clinical-focus-active .evolution-workspace-actions { display: flex; gap: 7px; flex-wrap: wrap; }
  #medicalRecordsView.clinical-focus-active .evolution-workspace-actions button { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }

  #medicalRecordsView.clinical-focus-active .evolution-patient-summary {
    position: static !important;
    margin: 0 0 14px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(115deg, color-mix(in srgb, #1687aa 12%, var(--panel)), color-mix(in srgb, #2a927b 15%, var(--panel)));
    box-shadow: 0 8px 22px rgba(15, 78, 89, .08);
  }

  #medicalRecordsView.clinical-focus-active .anamnesis-panel,
  #medicalRecordsView.clinical-focus-active #evolutionForm {
    display: block !important;
    width: 100%;
    margin: 0 0 16px !important;
    padding: 18px !important;
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, #1687aa 20%, var(--line));
    border-left: 4px solid #176f73;
    border-radius: 15px;
    background: var(--panel);
    box-shadow: 0 9px 25px rgba(12, 65, 78, .07);
  }

  #medicalRecordsView.clinical-focus-active .anamnesis-panel > .records-header {
    margin: -18px -18px 14px;
    padding: 12px 16px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(110deg, color-mix(in srgb, #1687aa 10%, var(--panel)), color-mix(in srgb, #2a927b 12%, var(--panel)));
  }

  #medicalRecordsView.clinical-focus-active .anamnesis-panel form,
  #medicalRecordsView.clinical-focus-active #evolutionForm { min-height: 0; max-height: none; }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel textarea,
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea {
    width: 100%;
    min-height: 130px !important;
    resize: vertical;
    overflow: auto;
    background: var(--input-bg, #fff);
  }
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea[name="summary"] { min-height: 180px !important; }
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea[name="conduct"] { min-height: 120px !important; }
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea[name="private_notes"] { min-height: 96px !important; }
  #medicalRecordsView.clinical-focus-active #evolutionForm > .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; }
  #medicalRecordsView.clinical-focus-active #evolutionForm > label { display: block; margin-top: 10px; }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel .form-actions,
  #medicalRecordsView.clinical-focus-active #evolutionForm > .form-actions {
    position: static !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }
  #medicalRecordsView.clinical-focus-active .evolution-procedures { margin: 16px 0; border-radius: 12px; }
  #medicalRecordsView.clinical-focus-active .evolution-history-layout { max-height: none; min-height: 420px; height: 100%; }
}

.clinical-float-panel--search { width: min(1180px, 94vw); }
.clinical-float-panel--history { width: min(1320px, 96vw); }
.patient-modal-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 14px; }
.patient-modal-search input, .patient-modal-search button { min-height: 46px; }
.patient-search-results { max-height: min(620px, 67dvh); overflow: auto; border: 1px solid var(--line); border-radius: 13px; }
.patient-search-results thead { position: sticky; top: 0; z-index: 2; }
.patient-search-results tbody tr:hover { background: color-mix(in srgb, #1687aa 8%, var(--panel)); }
.clinical-float-panel--history .clinical-float-body { overflow: hidden; }
.clinical-float-panel--history .evolution-history-layout { height: min(680px, 72dvh); max-height: none; }

@media (max-width: 980px) {
  #medicalRecordsView .evolution-panel { display: block !important; overflow: visible !important; }
  #medicalRecordsView .anamnesis-panel, #medicalRecordsView #evolutionForm { width: 100%; margin-bottom: 14px; }
  .patient-modal-search { grid-template-columns: 1fr; }
}

/* Paleta de identidade: complementa o tema sem controlar fundos ou cores semanticas. */
.appearance-settings {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.appearance-settings .records-header {
  margin: 0;
}

.appearance-save-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.appearance-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.appearance-fieldset legend {
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.appearance-theme-options,
.palette-options {
  display: grid;
  gap: 10px;
}

.appearance-theme-options {
  grid-template-columns: repeat(2, minmax(0, 150px));
}

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

.appearance-theme-option,
.palette-option {
  min-width: 0;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-gradient);
  color: var(--text);
  cursor: pointer;
}

.appearance-theme-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
}

.appearance-theme-icon {
  width: 30px;
  height: 24px;
  border: 1px solid #bdc9ce;
  border-radius: 5px;
  background: linear-gradient(135deg, #ffffff 58%, #e8f1f2 58%);
}

.appearance-theme-icon.dark {
  border-color: #43555c;
  background: linear-gradient(135deg, #172226 58%, #26383e 58%);
}

.palette-option {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px;
  text-align: left;
}

.palette-option > span:last-child {
  display: grid;
  gap: 3px;
}

.palette-option small {
  overflow-wrap: anywhere;
  color: var(--muted);
}

.palette-preview {
  position: relative;
  display: grid;
  width: 70px;
  height: 44px;
  grid-template-columns: 18px 1fr;
  grid-template-rows: 1fr 12px;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.palette-preview i,
.palette-preview b,
.palette-preview em {
  display: block;
  border-radius: 3px;
}

.palette-preview i { grid-row: 1 / 3; }
.palette-preview em { width: 72%; }
.palette-preview-default i,
.palette-preview-default em { background: #256f68; }
.palette-preview-default b { background: #e7f5f2; }
.palette-preview-masculine i,
.palette-preview-masculine em { background: #2563eb; }
.palette-preview-masculine b { background: #eff6ff; }
.palette-preview-feminine i,
.palette-preview-feminine em { background: #be185d; }
.palette-preview-feminine b { background: #fff1f5; }

.appearance-theme-option:hover,
.appearance-theme-option:focus-visible,
.palette-option:hover,
.palette-option:focus-visible,
.appearance-theme-option.selected,
.palette-option.selected {
  border-color: var(--palette-primary);
  outline: 3px solid color-mix(in srgb, var(--palette-primary) 15%, transparent);
}

.appearance-theme-option.selected,
.palette-option.selected {
  background: color-mix(in srgb, var(--palette-primary) 8%, var(--panel));
  box-shadow: inset 3px 0 0 var(--palette-primary);
}

:root[data-palette="masculine"] {
  --palette-primary: #2563eb;
  --palette-primary-hover: #1d4ed8;
  --palette-primary-active: #1e40af;
  --palette-secondary: #0e7490;
  --palette-soft: #eff6ff;
  --palette-focus-ring: rgba(96, 165, 250, 0.25);
  --primary: var(--palette-primary);
  --primary-dark: var(--palette-primary-hover);
  --vasi-primary: var(--palette-primary);
  --vasi-secondary: var(--palette-secondary);
  --vasi-accent: #38bdf8;
  --action-gradient: linear-gradient(135deg, var(--palette-primary), var(--palette-secondary));
  --accent-border: color-mix(in srgb, var(--palette-primary) 24%, var(--line));
  --field-focus-shadow: 0 0 0 3px var(--palette-focus-ring), 0 10px 24px rgba(23, 50, 60, 0.07);
}

:root[data-palette="feminine"] {
  --palette-primary: #be185d;
  --palette-primary-hover: #9d174d;
  --palette-primary-active: #831843;
  --palette-secondary: #a21caf;
  --palette-soft: #fff1f5;
  --palette-focus-ring: rgba(244, 114, 182, 0.25);
  --primary: var(--palette-primary);
  --primary-dark: var(--palette-primary-hover);
  --vasi-primary: var(--palette-primary);
  --vasi-secondary: var(--palette-secondary);
  --vasi-accent: #e879a7;
  --action-gradient: linear-gradient(135deg, var(--palette-primary), var(--palette-secondary));
  --accent-border: color-mix(in srgb, var(--palette-primary) 24%, var(--line));
  --field-focus-shadow: 0 0 0 3px var(--palette-focus-ring), 0 10px 24px rgba(23, 50, 60, 0.07);
}

:root[data-theme="dark"][data-palette="masculine"],
:root[data-theme="dark"][data-palette="feminine"] {
  --primary: var(--palette-primary);
  --primary-dark: color-mix(in srgb, var(--palette-primary) 42%, #ffffff);
  --vasi-primary: var(--palette-primary);
  --vasi-secondary: var(--palette-secondary);
  --vasi-accent: color-mix(in srgb, var(--palette-primary) 55%, #ffffff);
  --action-gradient: linear-gradient(135deg, var(--palette-primary), var(--palette-secondary));
  --accent-border: color-mix(in srgb, var(--palette-primary) 28%, var(--line));
  --field-focus-shadow: 0 0 0 3px var(--palette-focus-ring), 0 14px 30px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"][data-palette="default"] {
  --palette-primary: #54c8b8;
  --palette-primary-hover: #95e4d8;
  --palette-primary-active: #238a7f;
  --palette-secondary: #62b8de;
  --palette-soft: rgba(84, 200, 184, 0.18);
  --palette-focus-ring: rgba(84, 200, 184, 0.2);
}

:root[data-palette]:not([data-palette="default"]) input[type="checkbox"],
:root[data-palette]:not([data-palette="default"]) input[type="radio"] {
  accent-color: var(--palette-primary);
}

:root[data-palette]:not([data-palette="default"]) .system-progress:not(.error) .system-progress-track span {
  background: linear-gradient(90deg, var(--palette-primary), var(--palette-secondary));
}

:root[data-palette]:not([data-palette="default"]) .primary-button:active,
:root[data-palette]:not([data-palette="default"]) .tab-button.active:active,
:root[data-palette]:not([data-palette="default"]) .feature-tab.active:active {
  background: var(--palette-primary-active);
}

:root[data-palette]:not([data-palette="default"]) .link-button {
  color: var(--primary-dark);
}

:root[data-palette]:not([data-palette="default"]) #commerceView > .commerce-tabbar .feature-tab.active {
  border-color: color-mix(in srgb, var(--palette-primary) 34%, #ffffff);
  color: var(--primary-dark);
  box-shadow: inset 0 -3px 0 var(--palette-primary), 0 7px 16px color-mix(in srgb, var(--palette-primary) 15%, transparent);
}

@media (max-width: 760px) {
  .palette-options {
    grid-template-columns: 1fr;
  }

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

/* Shell global: contrato único de rail, conteúdo e identidade visual. */
@media (min-width: 761px) {
  #moduleNav {
    box-sizing: border-box;
    width: 184px;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
  }

  .portal-sidebar-brand {
    box-sizing: border-box;
    min-height: 82px;
    padding: 12px 10px;
    gap: 10px;
  }

  .portal-sidebar-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
  }

  .portal-sidebar-brand-copy {
    min-width: 0;
  }

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

  #appShell > .topbar,
  #appShell > .portal-layout,
  #appShell > main:not(.portal-layout) {
    box-sizing: border-box;
    min-width: 0;
    max-width: calc(100% - 184px);
  }

  #appShell > .portal-layout {
    width: calc(100% - 184px);
    overflow-x: visible;
  }

  body.nav-collapsed #moduleNav {
    width: 74px;
    overflow-x: visible;
    overflow-y: visible;
  }

  body.nav-collapsed #appShell > .topbar,
  body.nav-collapsed #appShell > .portal-layout,
  body.nav-collapsed #appShell > main:not(.portal-layout) {
    width: calc(100% - 74px);
    max-width: calc(100% - 74px);
  }

  body.nav-collapsed .portal-sidebar-brand {
    overflow: visible;
  }

  body.nav-collapsed .portal-sidebar-brand-copy {
    display: none;
  }

  body.nav-collapsed .portal-sidebar-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
  }

  body.nav-collapsed .nav-collapse-button {
    top: 8px;
    right: 3px;
  }

  .portal-company-logo-frame {
    width: 64px !important;
    height: 64px !important;
  }

  .portal-company-logo-frame .portal-company-logo {
    width: 56px !important;
    height: 56px !important;
    padding: 5px !important;
    object-fit: contain;
  }

  .active-company-logo {
    width: 56px;
    height: 56px;
    padding: 5px;
    object-fit: contain;
  }
}

/* Login VASI: identidade compartilhada com o Portal e seletor Master escalável. */
.auth-screen {
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  gap: clamp(28px, 6vw, 104px);
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 72px);
  color: #18354f;
  background:
    radial-gradient(circle at 7% 96%, rgba(16, 191, 185, 0.2), transparent 30%),
    radial-gradient(circle at 2% 12%, rgba(20, 113, 219, 0.16), transparent 30%),
    linear-gradient(135deg, #f8fbff 0%, #eef7fc 55%, #f8fbff 100%);
}

.auth-screen::before {
  inset: auto auto -18vw -14vw;
  width: 62vw;
  height: 62vw;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(18, 107, 221, 0.92), rgba(31, 207, 151, 0.78));
  filter: blur(1px);
  opacity: 0.9;
  clip-path: ellipse(58% 48% at 42% 58%);
}
.auth-screen::after {
  inset: 0 0 0 auto;
  width: 44%;
  height: 100%;
  background: radial-gradient(circle at 70% 25%, rgba(255,255,255,.92), transparent 54%);
  opacity: 0.8;
}

.auth-backdrop-brand {
  display: grid;
  align-self: center;
  justify-self: end;
  width: min(100%, 620px);
  padding: clamp(18px, 4vw, 52px);
  color: #143a5b;
  pointer-events: none;
}

.auth-backdrop-brand strong {
  font-size: clamp(86px, 12vw, 184px);
  letter-spacing: -0.08em;
  background: linear-gradient(135deg, #106ed7, #1ccf98);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 18px 48px rgba(24, 111, 185, 0.12);
}

.auth-backdrop-brand span {
  max-width: 520px;
  margin-top: 24px;
  color: #536b7e;
  font-size: clamp(13px, 1.5vw, 18px);
  letter-spacing: 0.18em;
}

.auth-card {
  width: min(100%, 460px);
  justify-self: start;
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid rgba(184, 206, 224, 0.62);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(27, 76, 119, 0.14), 0 2px 0 rgba(255,255,255,.85) inset;
}

.auth-logo { margin-bottom: 22px; }
.auth-logo img { width: min(180px, 58vw); }
.auth-card h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; }
.auth-card .auth-copy { max-width: 34ch; line-height: 1.55; }
.auth-card input { min-height: 48px; border-radius: 13px; }
.auth-card .primary-button { min-height: 50px; border-radius: 13px; font-size: 15px; }

.company-selector-hint { display: block; margin: 6px 0 8px; color: #66747f; font-size: 12px; font-weight: 600; text-transform: none; }
.company-search-input { width: 100%; margin: 0 0 8px !important; }
.company-choice-summary { min-height: 18px; margin: 2px 0 6px; color: #71808a; font-size: 11px; font-weight: 700; }
.company-choice-list { max-height: min(320px, 38vh); padding-right: 3px; }
.company-choice-card { min-height: 66px; border-radius: 14px; }
.company-choice-empty { margin: 8px 0; padding: 16px; border: 1px dashed rgba(37,111,104,.28); border-radius: 14px; color: #66747f; font-size: 12px; text-align: center; }

@media (min-width: 901px) {
  .auth-screen { grid-template-columns: minmax(420px, 0.95fr) minmax(390px, 0.75fr); }
  .auth-backdrop-brand { justify-self: center; }
  .auth-card { justify-self: center; }
}

@media (max-width: 900px) {
  .auth-screen { grid-template-columns: 1fr; gap: 12px; padding: 24px; }
  .auth-backdrop-brand { justify-self: center; width: min(100%, 520px); padding: 0 12px; text-align: center; }
  .auth-backdrop-brand strong { font-size: clamp(72px, 16vw, 132px); }
  .auth-backdrop-brand span { margin: 12px auto 0; }
  .auth-card { justify-self: center; }
}

@media (max-width: 560px) {
  .auth-screen { align-content: center; padding: 14px; background: linear-gradient(160deg, #f7fbff 0%, #eaf7fb 100%); }
  .auth-backdrop-brand { display: none; }
  .auth-card { width: 100%; padding: 26px 20px 22px; border-radius: 22px; }
  .company-choice-list { max-height: 28vh; }
}

/* VASI Pulse corrective release: shared shell compatibility and readable identity. */
.auth-backdrop-brand img {
  display: block;
  width: min(360px, 42vw);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

#appShell,
#appShell > .topbar,
#appShell > .module-nav,
#appShell > .portal-layout,
#appShell > main {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

#appShell > .topbar {
  overflow: visible;
}

#appShell > .topbar .topbar-brand,
#appShell > .topbar .topbar-brand-copy,
#appShell > .topbar .brand-line,
#appShell > .topbar .topbar-actions {
  min-width: 0;
}

#appShell > .topbar .topbar-brand-copy .eyebrow {
  white-space: normal;
  line-height: 1.2;
}

#appShell > .topbar .topbar-brand-copy h1 {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

#appShell > .topbar .topbar-actions {
  flex: 1 1 auto;
}

.module-page,
.settings-layout,
.module-content,
.layout,
.settings-panel,
.entry-panel,
.records-panel,
.feature-tabs,
.module-tabs {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.feature-tabs {
  flex-wrap: wrap;
}

.table-scroll,
.records-table-wrap,
.table-wrapper,
.responsive-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table,
.records-table-wrap table,
.table-wrapper table,
.responsive-table table {
  max-width: none;
}

@media (max-width: 1100px) {
  #appShell > .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #appShell > .topbar .topbar-brand {
    flex: 1 1 min(100%, 460px);
  }

  #appShell > .topbar .topbar-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  #appShell > .topbar .topbar-brand-copy h1 {
    font-size: clamp(1rem, 2.2vw, 1.35rem);
  }
}

@media (max-width: 560px) {
  .auth-backdrop-brand img {
    width: min(260px, 78vw);
  }

  #appShell > .topbar .topbar-brand-copy h1 {
    overflow-wrap: normal;
  }
}

/* Agenda: acoes com dimensoes e contraste consistentes. */
#appointmentsView .appointment-roster-actions button,
#appointmentsView .appointment-timeline-actions button,
#appointmentsView .appointment-slot-actions button,
#appointmentsView #appointmentListWrap .row-actions button {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--clinical-action) 32%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 92%, white), color-mix(in srgb, var(--clinical-action) 10%, var(--panel)));
  color: var(--clinical-ink);
  box-shadow: 0 2px 6px rgba(15, 73, 79, .08);
  font-weight: 700;
}
#appointmentsView .appointment-roster-actions button:hover,
#appointmentsView .appointment-timeline-actions button:hover,
#appointmentsView .appointment-slot-actions button:hover,
#appointmentsView #appointmentListWrap .row-actions button:hover { background: linear-gradient(135deg, color-mix(in srgb, white 86%, var(--clinical-action)), color-mix(in srgb, var(--clinical-action) 18%, var(--panel))); }
#appointmentsView .appointment-roster-actions .appointment-delete,
#appointmentsView .appointment-timeline-actions .appointment-delete,
#appointmentsView .appointment-slot-actions .appointment-delete,
#appointmentsView #appointmentListWrap .row-actions .appointment-delete,
#appointmentsView .appointment-roster-actions .appointment-cancel,
#appointmentsView .appointment-timeline-actions .appointment-cancel,
#appointmentsView .appointment-slot-actions .appointment-cancel,
#appointmentsView #appointmentListWrap .row-actions .appointment-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  background: linear-gradient(135deg, #fff5f4, #fbe1df);
  border-color: #d58b87;
  color: #a53635;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 8% -12%, rgba(37, 111, 104, 0.08), transparent 28%),
    radial-gradient(circle at 92% -10%, rgba(22, 135, 170, 0.08), transparent 32%),
    linear-gradient(135deg, #f7faf9 0%, #edf6f5 54%, #f8fafc 100%);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.mobile-nav-header,
.mobile-nav-footer,
.mobile-nav-backdrop,
.mobile-bottom-nav {
  display: none;
}

.system-progress {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 2000;
  width: min(520px, calc(100vw - 32px));
  transform: translateX(-50%);
  border: 1px solid rgba(37, 111, 104, 0.22);
  border-radius: 8px;
  padding: 10px 12px 11px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 250, 249, 0.96)),
    linear-gradient(90deg, rgba(37, 111, 104, 0.08), rgba(47, 131, 183, 0.08));
  box-shadow: 0 18px 42px rgba(23, 32, 38, 0.16);
}

.system-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  color: #0b435b;
  font-size: 13px;
}

.system-progress-header strong,
.system-progress-header span {
  line-height: 1.2;
}

.system-progress-track {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: #e5eeee;
}

.system-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #256f68, #2fcf96, #1687aa);
  transition: width 0.18s ease;
}

.system-progress.complete .system-progress-track span {
  background: linear-gradient(90deg, #256f68, #2fcf96);
}

.system-progress.error {
  border-color: rgba(168, 63, 63, 0.35);
}

.system-progress.error .system-progress-header {
  color: #8f3131;
}

.system-progress.error .system-progress-track span {
  background: linear-gradient(90deg, #a83f3f, #d97b63);
}

[hidden] {
  display: none !important;
}

.auth-screen {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 460px);
  align-items: center;
  justify-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(24px, 5vw, 64px);
  background:
    linear-gradient(135deg, rgba(7, 48, 74, 0.98) 0%, rgba(13, 99, 132, 0.94) 46%, rgba(31, 139, 120, 0.92) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}

.auth-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.45;
}

.auth-screen::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(3, 24, 38, 0.22), transparent);
  pointer-events: none;
}

.auth-backdrop-brand {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: end;
  display: grid;
  max-width: 620px;
  justify-items: start;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.auth-backdrop-brand strong {
  font-size: clamp(78px, 12vw, 170px);
  line-height: 0.84;
  letter-spacing: 0;
  background: linear-gradient(90deg, #ffffff, #9ff5df);
  -webkit-background-clip: text;
  color: transparent;
}

.auth-backdrop-brand span {
  max-width: 520px;
  margin-top: 18px;
  color: rgba(235, 252, 255, 0.88);
  font-size: clamp(15px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.25;
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 250px);
  min-height: 68px;
  margin: 0 auto 22px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(219, 226, 230, 0.9);
  border-radius: 8px;
  color: #1e6fb8;
  font-weight: 700;
}

.auth-logo img {
  display: block;
  width: 100%;
  max-height: 96px;
  object-fit: contain;
}

.auth-logo strong {
  font-size: 24px;
  letter-spacing: 0;
  background: linear-gradient(90deg, #0d63aa, #2dbf91);
  -webkit-background-clip: text;
  color: transparent;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  padding: 30px 34px 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 249, 0.95)),
    linear-gradient(120deg, rgba(47, 207, 150, 0.1), rgba(11, 100, 166, 0.08));
  box-shadow: 0 28px 70px rgba(2, 18, 28, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
}

.auth-card h1 {
  margin: 0 0 8px;
  color: #0b435b;
  font-size: 24px;
  line-height: 1.1;
  text-align: center;
}

.auth-copy {
  margin: 0 0 22px;
  color: #60717b;
  text-align: center;
  font-size: 14px;
}

.auth-card form {
  width: min(100%, 320px);
  margin: 0 auto;
}

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

.auth-recovery-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 2px;
  text-align: center;
}

.auth-recovery-heading h2 {
  margin: 0;
  color: #173f48;
  font-size: 18px;
  line-height: 1.2;
}

.auth-recovery-heading p,
.password-requirements {
  margin: 0;
  color: #60717b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-transform: none;
}

.auth-card .auth-recovery-form .primary-button {
  margin-top: 0;
}

.auth-recovery-back {
  width: 100%;
  min-height: 34px;
  padding: 4px 10px;
}

.auth-recovery-form .message {
  min-height: 0;
  line-height: 1.4;
  text-align: center;
}

.auth-card label {
  color: #405963;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.auth-card input {
  min-height: 42px;
  margin-top: 6px;
  padding: 9px 11px;
  border-color: rgba(37, 111, 104, 0.2);
  background: rgba(251, 253, 254, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Login premium composition: institutional hero and access card share one Pulse canvas. */
.auth-screen{grid-template-columns:minmax(0,1.12fr) minmax(360px,420px);gap:clamp(34px,6vw,104px);padding:clamp(28px,5vw,72px);background:radial-gradient(circle at 8% 88%,#0fd3b933,transparent 28%),linear-gradient(135deg,#f7fbff 0%,#eef8fb 58%,#ffffff 100%)}
.auth-screen::before{inset:0 auto 0 0;width:58%;height:100%;border-radius:0;background:linear-gradient(135deg,#06356d,#087bb2 58%,#0fb79f);clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);opacity:1}
.auth-screen::after{inset:auto 0 0 0;width:100%;height:42%;background:radial-gradient(ellipse at 22% 100%,#0fd39a55,transparent 38%),linear-gradient(0deg,#04315d22,transparent);opacity:1}
.auth-backdrop-brand{width:min(100%,680px);min-height:0;padding:clamp(22px,4vw,56px);justify-self:center;background:linear-gradient(145deg,#073b78cc,#0876d877 62%,#0f9f9c44);border:1px solid #8feee033;border-radius:32px;box-shadow:0 26px 70px #06356d33;overflow:hidden}
.auth-backdrop-brand::before{inset:auto -12% -32% -15%;height:72%;background:radial-gradient(circle at 35% 35%,#11d19b99,transparent 44%),linear-gradient(145deg,transparent,#09a8d855);opacity:1}
.auth-backdrop-brand::after{inset:0;background:linear-gradient(90deg,#ffffff12 1px,transparent 1px),linear-gradient(0deg,#ffffff0d 1px,transparent 1px);background-size:42px 42px;opacity:.35;mix-blend-mode:screen}
.auth-brand-symbol{width:78px;height:78px}.auth-brand-wordmark img{width:min(250px,32vw)}.auth-brand-copy{margin-top:clamp(34px,6vh,70px);max-width:430px}.auth-brand-copy h2{font-size:clamp(34px,4vw,56px)}.auth-brand-copy>span{font-size:14px}
.auth-hero-network{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;max-width:390px;margin-top:26px}.auth-hero-network span{padding:7px 10px;border:1px solid #d4fffa44;border-radius:999px;background:#ffffff12;color:#eafffc;font-size:10px;font-weight:800;backdrop-filter:blur(5px)}
.auth-backdrop-brand .auth-brand-name{display:block;color:#fff;font-size:clamp(38px,4vw,58px);font-weight:900;letter-spacing:.08em;line-height:.9;text-shadow:0 8px 20px #062b5633}.auth-brand-wordmark span{font-weight:800}
.auth-screen{grid-template-columns:minmax(0,1fr) minmax(340px,390px);gap:clamp(28px,5vw,76px);background:radial-gradient(circle at 10% 92%,#0fd3b91c,transparent 28%),linear-gradient(135deg,#f8fcff,#eef8fb 58%,#ffffff)}
.auth-screen::before{display:none}.auth-screen::after{inset:0;width:100%;height:100%;background:linear-gradient(90deg,#0a4e8a08 1px,transparent 1px),linear-gradient(0deg,#0a4e8a06 1px,transparent 1px);background-size:64px 64px;opacity:.45}
.auth-backdrop-brand{width:min(100%,560px);padding:34px 38px;border-radius:28px;background:linear-gradient(145deg,#073b78,#0876d8 62%,#0f9f9c);box-shadow:0 24px 58px #06356d2b}.auth-brand-copy{margin-top:42px}.auth-brand-copy h2{font-size:clamp(32px,3.5vw,48px)}.auth-hero-network{margin-top:20px}.auth-card{width:min(100%,390px);padding:30px 34px 24px;box-shadow:0 22px 54px #06356d1c,0 1px 0 #fff inset}
@media (max-width:900px){.auth-screen{grid-template-columns:1fr;gap:14px}.auth-backdrop-brand{width:min(100%,560px);padding:28px 24px}.auth-brand-copy{margin-top:28px}.auth-card{width:min(100%,420px)}}
@media (max-width:560px){.auth-screen::after{display:none}.auth-backdrop-brand{padding:12px 8px}.auth-card{padding:26px 20px 22px}}
.auth-pulse-lines{right:7%;bottom:13%;gap:8px}.auth-pulse-lines i{width:12px}.auth-card{width:min(100%,420px);padding:34px 38px 26px;border-radius:26px;border-color:#d6e8ef;background:linear-gradient(145deg,#fffffff5,#f3fafbf2);box-shadow:0 28px 80px #06356d24,0 1px 0 #fff inset}.auth-logo{width:100%;min-height:84px;margin-bottom:20px;padding:12px 20px;border:0;border-radius:18px;background:linear-gradient(135deg,#eefbfa,#fff);box-shadow:0 8px 24px #06356d12}.auth-logo img{width:min(230px,100%);max-height:74px}.auth-card h1{font-size:28px;color:#073b78}.auth-copy{margin-bottom:20px;color:#60798a}.auth-card-copyright{color:#718998;font-size:11px}
@media (max-width:900px){.auth-screen{grid-template-columns:1fr;gap:18px;padding:24px}.auth-screen::before{width:100%;height:48%;clip-path:none;border-radius:0 0 38% 0}.auth-backdrop-brand{width:min(100%,620px);justify-self:center;padding:28px 24px;border-radius:28px}.auth-brand-copy{margin-top:28px}.auth-card{justify-self:center}}
@media (max-width:560px){.auth-screen{gap:10px;padding:14px;background:linear-gradient(160deg,#f7fbff,#eaf7fb)}.auth-screen::before{display:none}.auth-backdrop-brand{display:block;padding:12px 8px;background:transparent;border:0;box-shadow:none;text-align:center}.auth-brand-lockup{justify-content:center}.auth-brand-copy,.auth-hero-network{display:none}.auth-brand-symbol{width:52px;height:52px}.auth-brand-wordmark img{width:170px}.auth-card{padding:26px 20px 22px;border-radius:22px}.auth-logo{min-height:72px}}

.auth-card input:focus {
  outline: 3px solid rgba(47, 207, 150, 0.22);
  outline-offset: 0;
  border-color: #2fcf96;
}

.auth-native-company-select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.company-choice-list {
  display: grid;
  gap: 8px;
  max-height: min(330px, 42vh);
  margin-top: 8px;
  overflow: auto;
  padding-right: 2px;
}

.company-choice-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  min-height: 78px;
  border: 1px solid rgba(37, 111, 104, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: rgba(251, 253, 254, 0.96);
  color: #172026;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.company-choice-card:hover,
.company-choice-card:focus-visible {
  border-color: rgba(37, 111, 104, 0.38);
  outline: 3px solid rgba(47, 207, 150, 0.18);
  outline-offset: 0;
  background: #ffffff;
}

.company-choice-card.selected {
  border-color: rgba(37, 111, 104, 0.5);
  background: linear-gradient(135deg, rgba(235, 249, 247, 0.98), rgba(245, 252, 253, 0.98));
  box-shadow: 0 10px 24px rgba(37, 111, 104, 0.12);
}

.company-choice-mark {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid rgba(37, 111, 104, 0.26);
  border-radius: 999px;
  background: #ffffff;
}

.company-choice-card.selected .company-choice-mark {
  border: 5px solid #256f68;
}

.company-choice-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.company-choice-name {
  color: #122c38;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-transform: none;
  white-space: normal;
}

.company-choice-main small {
  color: #66747f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-transform: none;
  white-space: normal;
}

.company-choice-document {
  color: #35545e;
}

.company-choice-meta {
  color: #7a8992;
  font-size: 10px;
  letter-spacing: 0;
}

.password-field {
  display: grid;
}

.password-input-wrap {
  position: relative;
  display: block;
}

.password-input-wrap input {
  width: 100%;
  padding-right: 84px;
}

.password-toggle-button {
  position: absolute;
  top: calc(50% + 3px);
  right: 8px;
  transform: translateY(-50%);
  min-width: 64px;
  min-height: 30px;
  border: 1px solid rgba(37, 111, 104, 0.18);
  border-radius: 7px;
  background: #eaf6f5;
  color: #0b5f73;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.password-toggle-button:hover,
.password-toggle-button:focus-visible {
  background: #d9f0ee;
  outline: 2px solid rgba(47, 207, 150, 0.24);
  outline-offset: 1px;
}

.auth-card .primary-button {
  width: 100%;
  min-height: 42px;
  margin: 4px auto 0;
  padding: 0 16px;
  border: 1px solid rgba(37, 111, 104, 0.3);
  border-radius: 8px;
  background: linear-gradient(135deg, #256f68, #1687aa);
  box-shadow: 0 12px 26px rgba(37, 111, 104, 0.18);
  color: #ffffff;
  font-weight: 700;
}

.auth-card .primary-button:hover {
  background: linear-gradient(135deg, #1f625c, #14799b);
}

.auth-credit {
  position: absolute;
  z-index: 1;
  margin: 0;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  font-size: 14px;
}

/* Visual hard reset: active Portal namespace, independent of the legacy home composition. */
:root {
  --vasi-navy: #0a4e8a;
  --vasi-blue: #1599d3;
  --vasi-cyan: #16c1a6;
  --vasi-teal: #0fd3b9;
  --vasi-surface: #f4fafb;
  --vasi-border: #dbeaf0;
  --vasi-text: #102f54;
  --vasi-muted: #60748a;
  --vasi-radius-sm: 12px;
  --vasi-radius-md: 18px;
  --vasi-shadow: 0 12px 28px rgba(10, 78, 138, .09);
}
.vasi-portal { min-width: 0; margin-left: 184px; padding: 16px 24px 26px; background: var(--vasi-surface); }
.vasi-welcome { min-height: 112px; }
.vasi-alerts { margin-top: 10px; }
.vasi-global-search { margin-top: 10px; }
.vasi-global-search .portal-command-trigger { min-height: 48px; border: 1px solid var(--vasi-border); border-radius: var(--vasi-radius-sm); background: #fff; box-shadow: 0 5px 16px rgba(10,78,138,.05); }
.vasi-areas { margin-top: 12px; }
.vasi-areas .portal-area-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.vasi-areas .portal-area-card { min-height: 124px; border: 1px solid var(--vasi-border); border-radius: var(--vasi-radius-md); background: linear-gradient(145deg,#fff,#f8fcfd); box-shadow: var(--vasi-shadow); }
.vasi-areas .portal-area-card:hover { border-color: rgba(21,153,211,.42); box-shadow: 0 16px 32px rgba(10,78,138,.13); }
.vasi-areas .portal-area-icon { background: linear-gradient(135deg,var(--vasi-navy),var(--vasi-blue) 52%,var(--vasi-cyan)); }
.vasi-areas .portal-area-copy strong { color: var(--vasi-text); }
.vasi-areas .portal-area-copy p { color: var(--vasi-muted); }
@media (min-width:761px) {
  #appShell > .topbar { margin-left: 184px !important; }
  body.nav-collapsed .vasi-portal { margin-left: 68px; }
  body.nav-collapsed #appShell > .topbar { margin-left: 68px !important; }
}
@media (max-width:1180px) and (min-width:761px) { .vasi-areas .portal-area-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .vasi-portal { padding-inline: 16px; } }
@media (max-width:760px) { .vasi-portal { margin-left: 0; padding: 12px; } .vasi-areas .portal-area-grid { grid-template-columns: 1fr; } }

.auth-card-copyright {
  position: static !important;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(238, 247, 248, 0.92);
  box-shadow: none;
  color: #4a646e;
  font-size: 12px;
  text-align: center;
  text-shadow: none;
}

/* Hero Pulse: painel gráfico próprio, sem imagem lavada ou retângulo colado. */
#appShell > .portal-layout .portal-hero-decoration {
  position: relative;
  align-self: stretch;
  min-height: 92px;
  overflow: hidden;
  border: 1px solid rgba(10, 78, 138, .18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 78% 20%, rgba(17, 209, 155, .34), transparent 26%),
    linear-gradient(135deg, #0a4e8a 0%, #0876d8 52%, #0f9f9c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px rgba(7,59,120,.14);
}
#appShell > .portal-layout .portal-hero-decoration::before {
  content: "";
  position: absolute;
  inset: 18% -8% 8% 12%;
  border: 1px solid rgba(244,250,251,.34);
  border-left: 0;
  border-radius: 50%;
  transform: rotate(-8deg);
  box-shadow: 0 14px 0 -13px rgba(244,250,251,.42), 0 28px 0 -27px rgba(143,238,224,.5);
}
#appShell > .portal-layout .portal-hero-decoration::after {
  content: "VASI PULSE";
  position: absolute;
  top: 14px;
  right: 16px;
  color: rgba(244,250,251,.82);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .22em;
}
#appShell > .portal-layout .portal-hero-decoration .portal-hero-spark { opacity: .92; box-shadow: 0 0 0 5px rgba(143,238,224,.08), 0 8px 18px rgba(17,209,155,.28); }
#appShell > .portal-layout .portal-hero-decoration .portal-hero-chart { right: 28px; bottom: 16px; opacity: .96; }
#appShell > .portal-layout .portal-hero-decoration .portal-hero-chart i { background: linear-gradient(180deg, #f4fafb 0%, #8feee0 100%); box-shadow: 0 0 10px rgba(143,238,224,.28); }

/* Identidade do tenant: VASI permanece a marca da plataforma e a empresa ativa usa sua logo contextual. */
.portal-company-logo-frame { display: grid !important; place-items: center; width: 48px !important; height: 48px !important; overflow: hidden; border: 1px solid rgba(20,118,208,.18); border-radius: 15px; background: #f4fafb; box-shadow: 0 5px 14px rgba(20,78,138,.10); }
.portal-company-logo-frame .portal-company-logo { width: 100% !important; height: 100% !important; padding: 6px !important; object-fit: contain; object-position: center; transform: none !important; }
.active-company-logo { width: 42px; height: 42px; object-fit: contain; object-position: center; border-radius: 10px; background: #f4fafb; padding: 4px; }

/* Final precedence for the corrective release after legacy responsive rules. */
#appShell > .topbar .topbar-brand-copy .eyebrow {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

#appShell > .topbar .topbar-brand-copy h1 {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.vasi-v2-hero-art {
  background:
    linear-gradient(145deg, #ffffff44, #ffffff99),
    url('/assets/brand/vasi-pulse-symbol.png') center / 108px auto no-repeat;
}

.vasi-v2-hero-art::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #16c1a6, #1599d3, transparent);
  box-shadow: 0 -10px 0 -1px #16c1a655, 0 -20px 0 -1px #1599d344;
  transform: skewX(8deg);
}

.vasi-v2-hero-art .vasi-v2-chart {
  opacity: .24;
}

/* PORTAL SHELL VISUAL — bloco final do protótipo oficial. */
@media (min-width: 761px) {
  .portal-sidebar-brand {
    min-height: 82px;
    padding: 12px 10px;
    gap: 10px;
  }

  .portal-sidebar-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
  }

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

  #moduleNav {
    width: 184px !important;
    padding: 0 10px 16px !important;
    background: linear-gradient(180deg, #063c62 0%, #075a78 54%, #067b88 100%) !important;
    border: 0 !important;
    box-shadow: 8px 0 28px rgba(5, 49, 77, .18) !important;
  }
  #appShell > .topbar, #appShell > .portal-layout, #appShell > main:not(.portal-layout) { margin-left: 184px !important; }
  body.nav-collapsed #moduleNav { width: 68px !important; }
  body.nav-collapsed #appShell > .topbar, body.nav-collapsed #appShell > .portal-layout, body.nav-collapsed #appShell > main:not(.portal-layout) { margin-left: 68px !important; }
  .portal-sidebar-brand { height: 68px; min-height: 68px; margin: 0 0 8px; padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,.18); }
  .portal-sidebar-logo { width: 34px; height: 34px; filter: brightness(0) invert(1); }
  .portal-sidebar-brand-copy strong { color: #fff !important; font-size: 17px; }
  .portal-sidebar-brand-copy span { color: rgba(255,255,255,.72) !important; }
  .portal-area-nav { padding: 0 2px 10px !important; gap: 4px; }
  .portal-area-nav .nav-title { margin: 0 8px 6px; color: rgba(255,255,255,.62) !important; }
  .portal-area-nav .tab-button { min-height: 36px; padding: 7px 8px; color: rgba(255,255,255,.9) !important; border-radius: 10px; }
  .portal-area-nav .tab-button:hover, .portal-area-nav .tab-button:focus-visible { background: rgba(255,255,255,.12) !important; color: #fff !important; }
  .portal-area-nav .tab-button.active { background: linear-gradient(135deg, #1389c4, #18bb9c) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(0,0,0,.14); }
  .portal-area-nav .tab-button small { color: #b0f2dd !important; }
  .area-nav-icon { background: rgba(255,255,255,.14) !important; color: #fff !important; }
  .portal-area-nav-divider { margin: 10px 7px 7px; background: rgba(255,255,255,.2); }
  #appShell > .topbar { min-height: 62px; padding: 8px 16px; gap: 12px; background: linear-gradient(100deg, #fff 0%, #effafa 64%, #eaf5fb 100%); border-bottom-color: rgba(16,117,139,.16); }
  #appShell > .topbar .system-top-logo { width: 38px; max-height: 38px; }
  #appShell > .topbar .topbar-actions { flex-wrap: nowrap; gap: 6px; }
  #appShell > .topbar .topbar-clock, #appShell > .topbar #tabletNavOpen, #appShell > .topbar #refreshButton { display: none; }
  #appShell > .topbar .topbar-icon-button { min-width: 34px; height: 34px; padding: 0 8px; }
  #appShell > .portal-layout { padding: 12px 24px 24px; background: radial-gradient(circle at 90% 4%, rgba(27,185,173,.1), transparent 24%), #f7fbfc; }
  #appShell > .portal-layout .portal-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; min-height: 86px; padding: 13px 17px; border-radius: 18px; background: linear-gradient(110deg, #e2f7f6 0%, #f7fcff 58%, #e4f3fb 100%); }
  #appShell > .portal-layout .portal-company-logo-frame { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg,#1374ce,#20bd99); }
  #appShell > .portal-layout .portal-company-logo { width: 32px; filter: brightness(0) invert(1); }
  #appShell > .portal-layout .portal-company-copy h2 { margin: 0 0 3px; font-size: clamp(1.35rem,2.1vw,2rem); }
  #appShell > .portal-layout .portal-company-copy > p:not(.eyebrow) { font-size: 12px; }
  #appShell > .portal-layout .portal-command-center { margin-top: 10px; }
  #appShell > .portal-layout .portal-command-trigger { min-height: 54px; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(17,80,102,.06); }
  #appShell > .portal-layout .portal-area-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  #appShell > .portal-layout .portal-area-card { grid-template-columns: 42px minmax(0,1fr); min-height: 126px; padding: 15px; gap: 10px; border-radius: 16px; background: linear-gradient(145deg,#fff,#eff9fa); box-shadow: 0 10px 22px rgba(15,74,96,.1); }
  #appShell > .portal-layout .portal-area-icon { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg,#1478cf,#1fbe98); }
  #appShell > .portal-layout .portal-area-copy strong { margin: 2px 0 5px; font-size: 16px; }
  #appShell > .portal-layout .portal-area-copy p { font-size: 12px; line-height: 1.3; }
}

/* Detalhamento visual do protótipo: hero gráfico, header e tiles. */
@media (min-width: 761px) {
  #moduleNav .portal-sidebar-logo { display: block; width: 38px; height: 38px; filter: none; }
  #moduleNav .portal-sidebar-brand { gap: 8px; }
  #appShell > .topbar .topbar-brand-copy .eyebrow { max-width: 230px; }
  #appShell > .topbar #topbarCommandButton { font-size: 0; }
  #appShell > .topbar #topbarCommandButton::after { content: "⌕"; font-size: 18px; }
  #appShell > .topbar #topbarNotificationButton { font-size: 0; }
  #appShell > .topbar #topbarNotificationButton::after { content: "♧"; font-size: 17px; }
  #appShell > .topbar .theme-toggle-button { min-width: 34px; font-size: 0; background: linear-gradient(135deg,#1478cf,#20bd99); color: #fff; }
  #appShell > .topbar .theme-toggle-button::after { content: "◐"; font-size: 16px; }
  #appShell > .topbar .topbar-account-button { min-width: 122px; text-align: left; }
  #appShell > .portal-layout .portal-hero { position: relative; overflow: hidden; grid-template-columns: minmax(0,1fr) 220px; }
  #appShell > .portal-layout .portal-hero-decoration { position: relative; display: block; align-self: stretch; min-height: 58px; }
  .portal-hero-decoration::before { content: ""; position: absolute; inset: 2px 12px 0 10px; border-radius: 18px 18px 5px 5px; background: linear-gradient(145deg,rgba(255,255,255,.7),rgba(191,231,241,.45)); transform: perspective(200px) rotateY(-12deg); box-shadow: 0 8px 20px rgba(23,111,148,.08); }
  .portal-hero-decoration::after { content: ""; position: absolute; width: 150px; height: 90px; right: -30px; bottom: -38px; border-radius: 50%; background: linear-gradient(135deg,rgba(25,177,198,.28),rgba(30,204,148,.18)); }
  .portal-hero-spark { position: absolute; z-index: 1; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; background: linear-gradient(135deg,#19b99e,#1680cf); transform: rotate(-45deg); opacity: .82; }
  .spark-one { top: 8px; right: 45px; }
  .spark-two { top: 30px; right: 130px; width: 17px; height: 17px; opacity: .55; }
  .portal-hero-chart { position: absolute; z-index: 2; right: 34px; bottom: 15px; display: flex; align-items: end; gap: 7px; height: 42px; transform: skewY(-8deg); }
  .portal-hero-chart i { display: block; width: 13px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg,#1478cf,#21bd99); }
  .portal-hero-chart i:nth-child(1) { height: 18px; }.portal-hero-chart i:nth-child(2) { height: 28px; }.portal-hero-chart i:nth-child(3) { height: 23px; }.portal-hero-chart i:nth-child(4) { height: 38px; }
  #appShell > .portal-layout .portal-area-card { min-height: 124px; }
}

/* O novo Portal não promove blocos legados; seus dados e estruturas continuam preservados. */
#portalView #portalFavorites,
#portalView .portal-work-grid,
#portalView .portal-quick-access,
#portalView .portal-insights { display: none !important; }

.auth-footer {
  display: none !important;
}

.auth-credit {
  right: 12px;
  bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 5px;
  padding: 8px 12px;
  background: rgba(18, 31, 38, 0.28);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(18px, 3vw, 38px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 248, 247, 0.95) 62%, rgba(242, 248, 252, 0.96)),
    linear-gradient(90deg, rgba(37, 111, 104, 0.08), rgba(22, 135, 170, 0.07));
  border-bottom: 1px solid var(--accent-border);
  box-shadow: 0 10px 30px rgba(23, 50, 60, 0.06);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.system-top-logo {
  width: 112px;
  max-height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0.94;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.topbar-clock {
  min-width: 168px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 12px;
  color: var(--primary-dark);
  background: linear-gradient(135deg, #f8fcfc, #edf7f5);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.topbar-refresh-button {
  min-width: 118px;
  min-height: 40px;
  padding-inline: 14px;
  white-space: nowrap;
}

.user-badge {
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 9px 12px;
  color: var(--muted);
  background: var(--control-gradient);
  font-size: 13px;
  font-weight: 700;
}

.advanced-settings {
  margin-top: 14px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  background: var(--surface-gradient);
}

.advanced-settings summary {
  cursor: pointer;
  padding: 13px 14px;
  color: var(--primary-dark);
  font-weight: 700;
}

.advanced-settings > :not(summary) {
  margin-inline: 14px;
}

.advanced-settings > :last-child {
  margin-bottom: 14px;
}

.compact-records-header {
  margin-bottom: 12px;
}

.compact-tabs {
  margin: 14px 0;
  padding: 8px;
}

.spdata-rules-panel {
  min-width: 0;
}

.dataset-factory-admin {
  margin-top: 18px;
  border-top: 3px solid var(--primary);
}

.dataset-factory-filters {
  display: grid;
  grid-template-columns: minmax(210px, 1.35fr) repeat(3, minmax(150px, 0.75fr)) auto;
  align-items: end;
  gap: 10px;
}

.dataset-factory-filters label {
  min-width: 0;
}

.dataset-factory-tabs {
  overflow-x: auto;
  scrollbar-width: thin;
}

.dataset-factory-tabs .feature-tab {
  flex: 0 0 auto;
}

.dataset-factory-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 8px;
}

.dataset-factory-heading h4 {
  margin: 0;
  color: var(--text);
}

.dataset-factory-heading span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.dataset-factory-table-wrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.dataset-factory-table {
  width: 100%;
  table-layout: fixed;
}

.dataset-factory-table th,
.dataset-factory-table td {
  overflow-wrap: anywhere;
  vertical-align: top;
}

.dataset-factory-table th:last-child,
.dataset-factory-table td:last-child {
  width: 52px;
  text-align: center;
}

.dataset-factory-detail {
  margin-top: 14px;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.dataset-factory-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.dataset-factory-detail-grid > div {
  min-width: 0;
  padding: 10px;
  background: var(--panel);
}

.dataset-factory-detail-grid dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dataset-factory-detail-grid dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dataset-factory-related {
  margin-top: 12px;
}

.dataset-factory-related h5 {
  margin: 0 0 6px;
  color: var(--text);
}

.dataset-factory-related pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

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

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

@media (max-width: 700px) {
  .dataset-factory-filters,
  .dataset-factory-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dataset-factory-table-wrap {
    overflow-x: auto;
  }

  .dataset-factory-table {
    min-width: 760px;
  }
}

.crm-assistant-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}

.crm-assistant-chat,
.crm-assistant-help {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 14px;
}

.crm-assistant-messages {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 320px;
  max-height: 520px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.crm-assistant-message {
  max-width: min(860px, 92%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f7fbfb;
  color: var(--text);
  line-height: 1.45;
}

.crm-assistant-message.user {
  justify-self: end;
  background: #e7f2f0;
  border-color: rgba(37, 111, 104, 0.24);
}

.crm-assistant-message.assistant {
  justify-self: start;
}

.crm-assistant-form {
  margin-top: 12px;
}

.crm-assistant-pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid rgba(37, 111, 104, 0.2);
  border-radius: 8px;
  padding: 12px;
  background: #eef8f6;
}

.crm-assistant-pending span,
.crm-assistant-help h3,
.crm-assistant-result strong {
  color: var(--primary-dark);
}

.crm-assistant-result {
  margin-top: 10px;
}

.crm-assistant-result-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.crm-assistant-result-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
}

.crm-assistant-result-list span,
.crm-assistant-result-list small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.crm-assistant-help ul {
  margin: 8px 0 12px;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}

.assistant-layout {
  width: min(1400px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.assistant-shell {
  display: grid;
  gap: 18px;
}

.assistant-header,
.assistant-workspace,
.assistant-chat-panel,
.assistant-side-panel,
.assistant-input-bar,
.assistant-message-meta,
.assistant-code-block > div,
.assistant-generated-text > div,
.assistant-side-actions,
.assistant-header-actions {
  display: flex;
  gap: 12px;
}

.assistant-header {
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.assistant-header h2 {
  margin: 0;
}

.assistant-header p {
  margin: 6px 0 0;
  color: var(--muted);
}

.assistant-workspace {
  align-items: stretch;
}

.assistant-chat-panel {
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 14px;
}

.assistant-messages {
  min-height: 440px;
  max-height: 62vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px;
}

.assistant-message {
  width: min(860px, 92%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  line-height: 1.45;
}

.assistant-message.user {
  align-self: flex-end;
  background: #edf7f5;
  border-color: rgba(37, 111, 104, 0.24);
}

.assistant-message.assistant {
  align-self: flex-start;
}

.assistant-message p,
.assistant-code-block pre,
.assistant-generated-text pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.assistant-message-meta {
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.assistant-message-meta span,
.assistant-context-card span {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
}

.assistant-code-block,
.assistant-generated-text {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.assistant-code-block > div,
.assistant-generated-text > div {
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.assistant-code-block pre,
.assistant-generated-text pre {
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.assistant-message-actions {
  margin-top: 10px;
}

.assistant-input-bar {
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.assistant-input-bar label {
  margin: 0;
}

.assistant-question-field {
  flex: 1 1 auto;
}

.assistant-question-field textarea {
  min-height: 52px;
  resize: vertical;
}

.assistant-side-panel {
  flex: 0 0 300px;
  flex-direction: column;
}

.assistant-context-card,
.assistant-admin-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 12px;
}

.assistant-context-card strong {
  display: block;
  margin-top: 4px;
}

.assistant-side-actions {
  flex-wrap: wrap;
}

.assistant-admin-panel {
  display: grid;
  gap: 10px;
}

.assistant-admin-panel h3 {
  margin: 0;
}

.assistant-management-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 14px;
}

.assistant-management-tabs,
.assistant-admin-toolbar,
.assistant-admin-actions,
.assistant-check-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.assistant-management-tabs .active {
  border-color: rgba(37, 111, 104, 0.42);
  color: var(--primary-dark);
  background: #edf7f5;
}

.assistant-admin-tab-panel {
  display: grid;
  gap: 14px;
}

.assistant-knowledge-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.assistant-admin-toolbar {
  align-items: center;
}

.assistant-admin-list {
  display: grid;
  gap: 10px;
}

.assistant-admin-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.assistant-admin-item span,
.assistant-admin-item small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.assistant-admin-item strong {
  display: block;
  margin: 3px 0;
}

.assistant-admin-item p {
  margin: 0 0 6px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.assistant-admin-actions {
  justify-content: flex-end;
}

.assistant-check-grid label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

@media (max-width: 900px) {
  .assistant-layout {
    padding: 14px;
  }

  .assistant-header,
  .assistant-workspace,
  .assistant-input-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .assistant-side-panel {
    flex-basis: auto;
  }

  .assistant-message {
    width: 100%;
  }

  .assistant-admin-item {
    grid-template-columns: 1fr;
  }

  .assistant-admin-actions {
    justify-content: flex-start;
  }
}

.module-nav {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px clamp(18px, 4vw, 44px) 0;
}

.nav-section {
  display: grid;
  gap: 8px;
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.management-group {
  margin-left: auto;
}

.tab-button {
  min-height: 38px;
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  padding: 0 14px;
  color: var(--muted);
  background: var(--control-gradient);
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(23, 50, 60, 0.04);
}

.tab-button.active {
  border-color: transparent;
  color: #ffffff;
  background: var(--action-gradient);
  box-shadow: 0 10px 22px rgba(37, 111, 104, 0.2);
}

.subtab-button {
  border-style: dashed;
  padding-inline: 12px;
  font-size: 13px;
}

.subtab-button::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  vertical-align: middle;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(28px, 4vw, 42px);
}

.brand-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-context {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.active-company-logo {
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
  background: #ffffff;
  padding: 5px;
}

h2 {
  font-size: 20px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 24px;
  padding: 24px clamp(18px, 4vw, 44px) 44px;
}

.entry-panel,
.records-panel,
.settings-panel {
  min-width: 0;
  background: var(--surface-gradient);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.entry-panel,
.settings-panel {
  padding: 22px;
}

.settings-layout {
  display: grid;
  gap: 18px;
  padding: 24px clamp(18px, 4vw, 44px) 44px;
}

/* Fase UX-2A: area -> hub -> operação, sem repetir o menu geral na operação. */
.area-hub-page {
  align-content: start;
}

.area-hub-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 13%, #ffffff), #ffffff 64%, color-mix(in srgb, var(--secondary) 12%, #ffffff));
  box-shadow: var(--shadow);
}

.area-hub-hero h1 {
  margin: 4px 0 6px;
  color: var(--heading);
  font-size: clamp(1.7rem, 3vw, 2.45rem);
}

.area-hub-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}

.area-hub-icon,
.area-hub-card-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: #ffffff;
  background: var(--action-gradient);
  font-size: 24px;
  font-weight: 800;
}

.area-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}

.prontuario-hub-groups {
  display: grid;
  gap: 18px;
}

.prontuario-hub-group {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 92%, var(--primary) 8%);
}

.prontuario-hub-group-heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.prontuario-hub-group-heading h2 {
  margin: 0;
  color: var(--heading);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.prontuario-hub-future {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px dashed var(--accent-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, var(--secondary) 6%);
}

.prontuario-hub-future strong,
.prontuario-hub-future p {
  overflow-wrap: anywhere;
}

.prontuario-hub-future strong {
  color: var(--heading);
}

.prontuario-hub-future p {
  max-width: 900px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.area-hub-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
  min-height: 126px;
  padding: 18px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(23, 50, 60, 0.07);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.area-hub-card:hover,
.area-hub-card:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 16px 30px rgba(23, 50, 60, 0.13);
  transform: translateY(-2px);
}

.area-hub-card strong,
.area-hub-card small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.area-hub-card strong {
  font-size: 1rem;
}

.area-hub-card small {
  grid-column: 2;
  color: var(--muted);
  line-height: 1.45;
}

.area-workspace-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  margin: 0 0 2px;
  padding: 10px 0 2px;
}

.area-workspace-back {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  color: var(--primary);
  background: var(--panel);
  font-weight: 800;
  cursor: pointer;
}

.area-workspace-back:hover,
.area-workspace-back:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, #ffffff);
}

.area-workspace-context {
  display: grid;
  min-width: 0;
  justify-items: end;
  gap: 2px;
  color: var(--muted);
  text-align: right;
}

.area-workspace-context span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.area-workspace-context strong {
  overflow-wrap: anywhere;
  color: var(--heading);
  font-size: 1.1rem;
}

.area-operation-active > .module-tabs,
.supplies-operation-active > .module-tabs {
  display: none;
}

#jornadaView.area-operation-active .gjf-nav {
  display: none;
}

#jornadaView.area-operation-active .gjf-shell {
  display: block;
}

#jornadaView.area-operation-active .gjf-workspace {
  min-width: 0;
}

.jornada-hub-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

@media (max-width: 700px) {
  .area-hub-hero {
    align-items: flex-start;
  }

  .area-hub-icon {
    width: 44px;
    height: 44px;
  }

  .area-workspace-chrome {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .area-workspace-context {
    justify-items: start;
    text-align: left;
  }

  .area-workspace-back {
    width: 100%;
  }
}

.erp-client-selector {
  padding: 16px 22px;
}

.compact-label {
  display: grid;
  gap: 6px;
  min-width: min(360px, 100%);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
}

.compact-label select {
  min-height: 40px;
  text-transform: none;
}

.module-page {
  display: block;
}

.module-content {
  padding-top: 18px;
}

.feature-tabs {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  background: var(--menu-gradient);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(23, 50, 60, 0.07);
}

.feature-tab {
  width: auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.36);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.feature-tab.active {
  color: #ffffff;
  background: var(--action-gradient);
  border-color: transparent;
  box-shadow: 0 9px 22px rgba(37, 111, 104, 0.2);
}

.module-tabs {
  margin: 18px clamp(18px, 4vw, 44px) 0;
  background: var(--menu-gradient);
}

.module-tabs .feature-tab {
  min-width: 132px;
}

.settings-layout > .module-tabs {
  margin: 0;
}

.calculator-panel {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.calculator-panel h3,
.subrecords-header h3 {
  margin: 0;
  font-size: 16px;
}

.calculator-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.portal-layout {
  position: relative;
  display: grid;
  gap: 18px;
  min-height: calc(100vh - 190px);
  padding: 26px clamp(18px, 4vw, 44px) 48px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 249, 248, 0.82) 45%, rgba(242, 248, 251, 0.92)),
    linear-gradient(90deg, rgba(11, 100, 166, 0.08), rgba(35, 184, 125, 0.08));
  overflow: hidden;
}

.portal-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(37, 111, 104, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(37, 111, 104, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 75%);
  pointer-events: none;
}

.portal-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
  align-items: center;
  gap: 18px;
  min-height: 188px;
  padding: 22px 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(226, 244, 244, 0.88)),
    linear-gradient(120deg, rgba(24, 86, 123, 0.12), rgba(44, 190, 143, 0.12));
  border: 1px solid rgba(178, 205, 211, 0.9);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(23, 50, 60, 0.08);
  overflow: hidden;
  z-index: 1;
}

.portal-hero::after {
  display: none;
}

.portal-hero h2 {
  margin: 4px 0 8px;
  color: #0b435b;
  font-size: 34px;
  line-height: 1.12;
}

.portal-hero p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.portal-company-brand {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.portal-company-copy {
  min-width: 0;
}

.portal-hero-panel {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 8px;
  justify-items: stretch;
  padding-left: 24px;
  border-left: 1px solid rgba(37, 111, 104, 0.2);
}

.portal-company-logo {
  width: 230px;
  height: 126px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid rgba(37, 111, 104, 0.16);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 14px 30px rgba(23, 50, 60, 0.12);
}

.portal-welcome-label {
  margin: 0;
  color: #56727a;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.portal-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.portal-meta-grid article {
  border: 1px solid rgba(37, 111, 104, 0.16);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}

.portal-meta-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.portal-meta-grid strong {
  display: block;
  margin-top: 5px;
  color: #0b435b;
  font-size: 13px;
}

.portal-control-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, auto);
  gap: 14px;
  align-items: end;
  border: 1px solid rgba(197, 215, 219, 0.95);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(23, 50, 60, 0.07);
}

.portal-search {
  margin: 0;
}

.portal-search span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.portal-search input {
  min-height: 42px;
  background: #fbfcfd;
}

.portal-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.portal-filter {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 12px;
  color: #315762;
  background: #eef6f6;
  font-weight: 800;
  cursor: pointer;
  line-height: 1.15;
  white-space: normal;
}

.portal-filter.active {
  border-color: #256f68;
  color: #ffffff;
  background: linear-gradient(135deg, #256f68, #1687aa);
  box-shadow: 0 8px 18px rgba(37, 111, 104, 0.18);
}

.portal-sections {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
}

.portal-module-section {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(197, 215, 219, 0.74);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.portal-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.portal-section-heading h3 {
  margin: 2px 0 0;
  color: #102e3a;
  font-size: 17px;
}

.portal-section-heading p {
  max-width: 640px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.portal-section-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.portal-section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 6px;
  padding: 0 8px;
  color: #0f6c76;
  background: rgba(229, 245, 244, 0.9);
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
}

.portal-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  align-items: start;
  z-index: 1;
}

.portal-empty {
  position: relative;
  z-index: 1;
  border: 1px dashed rgba(37, 111, 104, 0.32);
  border-radius: 8px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
  text-align: center;
}

.portal-empty strong {
  display: block;
  margin-bottom: 5px;
  color: #0b435b;
}

.billing-alert {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  color: #624315;
  background: linear-gradient(135deg, #fff7df, #fffaf0);
  border: 1px solid #ead39b;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(98, 67, 21, 0.08);
}

.billing-alert strong {
  font-size: 14px;
}

.billing-alert span {
  color: #6f551f;
}

.portal-insights {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.portal-insight-card {
  position: relative;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid rgba(197, 215, 219, 0.92);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(243, 250, 250, 0.92)),
    linear-gradient(120deg, rgba(11, 100, 166, 0.08), rgba(47, 207, 150, 0.08));
  box-shadow: 0 12px 30px rgba(23, 50, 60, 0.08);
  overflow: hidden;
}

.portal-insight-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgba(11, 100, 166, 0.7), rgba(47, 207, 150, 0.8));
}

.portal-insight-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.portal-insight-card strong {
  display: block;
  margin-top: 4px;
  color: #0b435b;
  font-size: 20px;
  line-height: 1.05;
}

.portal-insight-card small {
  display: block;
  margin-top: 4px;
  color: #4d6670;
  font-size: 12px;
  line-height: 1.35;
}

.portal-insight-primary {
  border-color: rgba(37, 111, 104, 0.28);
  background:
    linear-gradient(145deg, rgba(236, 249, 247, 0.98), rgba(255, 255, 255, 0.94)),
    linear-gradient(120deg, rgba(37, 111, 104, 0.14), rgba(11, 100, 166, 0.1));
}

.module-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 128px;
  padding: 12px;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99) 0%, rgba(243, 250, 249, 0.96) 62%, rgba(235, 245, 250, 0.94) 100%),
    linear-gradient(120deg, rgba(37, 111, 104, 0.12), rgba(28, 105, 160, 0.08));
  border: 1px solid rgba(197, 215, 219, 0.95);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(23, 50, 60, 0.07);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.module-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #0b64a6, #2fcf96);
}

.module-card::after {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -54px;
  width: 132px;
  height: 108px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(37, 111, 104, 0.1), rgba(11, 100, 166, 0.06));
  transform: rotate(-12deg);
  pointer-events: none;
}

.module-card:hover {
  border-color: var(--primary);
  box-shadow: 0 14px 32px rgba(23, 50, 60, 0.12);
  transform: translateY(-2px);
}

.module-card-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 24px;
  padding: 0 7px;
  color: #0e5661;
  background: rgba(225, 244, 242, 0.95);
  border: 1px solid rgba(37, 111, 104, 0.16);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
}

.module-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.module-card-tag,
.module-card-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(37, 111, 104, 0.14);
  border-radius: 999px;
  padding: 0 8px;
  color: #315762;
  background: rgba(246, 251, 251, 0.94);
  font-size: 11px;
  font-weight: 800;
}

.module-card-kicker {
  width: fit-content;
  min-height: 20px;
  margin-top: 9px;
  border-radius: 6px;
  padding: 0 7px;
  color: #315762;
  background: rgba(246, 251, 251, 0.88);
}

.module-card-clock {
  display: inline-grid;
  justify-items: end;
  gap: 1px;
  color: #0e5661;
  font-weight: 800;
  line-height: 1;
}

.module-card-clock span {
  font-size: 13px;
}

.module-card-clock small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.module-card strong {
  display: block;
  margin: 8px 0 5px;
  color: #102e3a;
  font-size: 16px;
  line-height: 1.12;
}

.module-card p {
  display: -webkit-box;
  min-height: 32px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.module-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 9px;
  max-height: 44px;
  overflow: hidden;
}

.module-card-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 6px;
  padding: 0 6px;
  color: #45636d;
  background: rgba(235, 244, 245, 0.9);
  font-size: 10px;
  font-weight: 700;
}

.module-card-action {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: auto;
  padding-top: 9px;
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 700;
}

.module-card.finance::before {
  background: linear-gradient(90deg, #1f7a4d, #4cc48c);
}

.module-card.medical::before {
  background: linear-gradient(90deg, #0b64a6, #38cbd3);
}

.module-card.reports::before {
  background: linear-gradient(90deg, #365f91, #7bb7d8);
}

.module-card.crm::before {
  background: linear-gradient(90deg, #256f68, #26a3a3, #2fcf96);
}

.module-card.crm {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(234, 249, 244, 0.95) 56%, rgba(232, 243, 252, 0.94) 100%),
    linear-gradient(120deg, rgba(37, 111, 104, 0.17), rgba(38, 163, 163, 0.13));
}

.module-card.supply::before {
  background: linear-gradient(90deg, #25706b, #38b47f, #9ad66f);
}

.module-card.supply {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 250, 245, 0.96) 58%, rgba(246, 251, 235, 0.94) 100%),
    linear-gradient(120deg, rgba(37, 112, 107, 0.14), rgba(154, 214, 111, 0.14));
}

.module-card.contracts::before {
  background: linear-gradient(90deg, #0b5f73, #2a8f88, #55b985);
}

.module-card.contracts {
  background: linear-gradient(145deg, #ffffff 0%, #eef8f7 58%, #eef6fb 100%);
}

.module-card.erp::before {
  background: linear-gradient(90deg, #0b5f73, #2fcf96);
}

.module-card.downloads::before {
  background: linear-gradient(90deg, #256f68, #2f83b7);
}

.contracts-tabs {
  align-items: stretch;
}

.contracts-tabs .feature-tab {
  flex: 1 1 170px;
}

.contracts-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  border-block: 1px solid var(--border);
}

.contracts-intro-grid article {
  min-width: 0;
  padding: 18px;
}

.contracts-intro-grid article + article {
  border-left: 1px solid var(--border);
}

.contracts-intro-grid span,
.contracts-intro-grid strong {
  display: block;
}

.contracts-intro-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.contracts-intro-grid strong {
  margin-top: 7px;
  color: #0b435b;
  font-size: 17px;
}

.contracts-intro-grid p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.contracts-stage-note {
  margin-top: 18px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  margin: 18px 0;
}

.detail-grid dt { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.detail-grid dd { margin: 5px 0 0; color: var(--text); white-space: pre-wrap; }
.detail-grid .detail-wide { grid-column: 1 / -1; }

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

  .detail-grid { grid-template-columns: 1fr; }

  .contracts-intro-grid article + article {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

.module-card.strategic {
  min-height: 142px;
  border-color: rgba(11, 95, 115, 0.34);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99) 0%, rgba(225, 249, 245, 0.96) 54%, rgba(223, 242, 252, 0.95) 100%),
    linear-gradient(120deg, rgba(11, 100, 166, 0.2), rgba(47, 207, 150, 0.24));
  box-shadow: 0 14px 34px rgba(11, 95, 115, 0.14);
}

.module-card.strategic strong {
  color: #073f52;
  font-size: 18px;
}

.module-card.strategic .module-card-action {
  color: #0b5f73;
  font-size: 12px;
}

.module-card.settings::before,
.module-card.users::before,
.module-card.backup::before,
.module-card.help::before {
  background: linear-gradient(90deg, #256f68, #2fcf96);
}

.panel-copy {
  max-width: 820px;
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.locked-option {
  color: var(--muted);
  background: rgba(236, 244, 244, 0.8);
}

.erp-status-grid strong {
  word-break: break-word;
}

.downloads-panel {
  display: grid;
  gap: 18px;
}

.downloads-list {
  display: grid;
  gap: 12px;
}

.download-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(135deg, #ffffff, #f2faf9);
}

.download-card-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #256f68, #2f83b7);
  font-size: 13px;
  font-weight: 900;
}

.download-card-body {
  min-width: 0;
}

.download-card-body span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.download-card-body strong {
  display: block;
  color: var(--text);
  font-size: 17px;
}

.download-card-body p {
  margin: 5px 0;
  color: #315762;
  line-height: 1.45;
}

.download-card-body small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.download-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.about-panel {
  display: grid;
  gap: 18px;
}

.help-panel {
  display: grid;
  gap: 18px;
}

.help-search {
  min-width: min(420px, 100%);
}

.help-header-tools {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.help-manual-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.help-manual-links a {
  text-decoration: none;
}

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

.help-menu {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #f3faf9);
}

.help-topic-button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 12px;
  color: #315762;
  background: transparent;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}

.help-topic-button:hover,
.help-topic-button.active {
  border-color: rgba(37, 111, 104, 0.18);
  color: #0b435b;
  background: #edf6f5;
}

.help-content {
  min-width: 0;
}

.help-topic {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.help-topic span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.help-topic h3 {
  margin: 0;
  color: #0b435b;
  font-size: 24px;
}

.help-topic ol {
  margin: 0;
  padding-left: 20px;
  color: #263f4b;
  line-height: 1.65;
}

.help-topic p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.help-topic a {
  color: #0b5f73;
  font-weight: 900;
}

.help-topic h4 {
  margin: 0 0 10px;
  color: #0b435b;
  font-size: 17px;
}

.help-intro-grid,
.help-deep-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.help-intro-grid article,
.help-deep-grid article,
.help-guide-block {
  border: 1px solid rgba(37, 111, 104, 0.14);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(135deg, #ffffff, #f5fbfa);
}

.help-intro-grid strong,
.help-deep-grid strong {
  display: block;
  margin-bottom: 6px;
  color: #102e3a;
  font-size: 15px;
}

.help-intro-grid p,
.help-deep-grid p {
  margin: 0;
  color: #526875;
  font-size: 14px;
  line-height: 1.45;
}

.help-guide-block {
  margin: 16px 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 249, 248, 0.92)),
    linear-gradient(90deg, rgba(37, 111, 104, 0.08), rgba(47, 131, 183, 0.07));
}

.help-guide-block ol {
  margin-bottom: 0;
}

.help-example {
  border: 1px solid rgba(37, 111, 104, 0.16);
  border-left: 4px solid #256f68;
  border-radius: 8px;
  padding: 12px 14px;
  color: #254552;
  background: linear-gradient(135deg, #f7fcfb, #eef8f7);
  line-height: 1.45;
}

.help-example strong {
  color: #0b435b;
}

.help-screen-preview {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 190px;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(197, 215, 219, 0.95);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 248, 0.94)),
    linear-gradient(120deg, rgba(37, 111, 104, 0.14), rgba(47, 131, 183, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.help-screen-preview::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #256f68, #2fcf96, #2f83b7);
}

.help-screen-preview figcaption {
  color: #0b435b;
  font-size: 13px;
  font-weight: 900;
}

.help-screen-preview i,
.help-screen-preview b,
.help-screen-patient,
.help-screen-contact,
.help-screen-chart,
.help-screen-line,
.help-screen-backup-icon {
  position: relative;
  overflow: hidden;
}

.help-screen-preview i::before,
.help-screen-preview b::before,
.help-screen-patient::before,
.help-screen-contact::before,
.help-screen-chart::before,
.help-screen-line::before,
.help-screen-backup-icon::before {
  position: absolute;
  inset: 8px 10px auto;
  color: #315762;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.help-screen-toolbar,
.help-screen-form,
.help-screen-list,
.help-screen-cards,
.help-screen-bars,
.help-screen-statement,
.help-screen-kanban,
.help-screen-permissions,
.help-screen-actions {
  display: grid;
  gap: 8px;
}

.help-screen-toolbar {
  grid-template-columns: 1.5fr 1fr 76px;
}

.help-screen-toolbar i:nth-child(1)::before { content: "Periodo: hoje"; }
.help-screen-toolbar i:nth-child(2)::before { content: "Responsavel"; }
.help-screen-toolbar i:nth-child(3)::before { content: "Salvar"; }

.help-screen-toolbar i,
.help-screen-form b,
.help-screen-list i,
.help-screen-cards b,
.help-screen-statement i,
.help-screen-kanban i,
.help-screen-permissions i,
.help-screen-actions b,
.help-screen-notes i {
  position: relative;
  display: block;
  min-height: 28px;
  border: 1px solid rgba(37, 111, 104, 0.12);
  border-radius: 7px;
  background: #ffffff;
  overflow: hidden;
}

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

.help-screen-calendar .help-screen-form b:nth-child(1)::before { content: "Titulo: Reuniao com cliente"; }
.help-screen-calendar .help-screen-form b:nth-child(2)::before { content: "Data: 15/06/2026"; }
.help-screen-calendar .help-screen-form b:nth-child(3)::before { content: "WhatsApp: 5531..."; }
.help-screen-calendar .help-screen-form b:nth-child(4)::before { content: "Avisar: 1 dia antes"; }

.help-screen-calendar .help-screen-list i:nth-child(1)::before { content: "09:00 - Retorno comercial"; }
.help-screen-calendar .help-screen-list i:nth-child(2)::before { content: "14:30 - Reuniao financeira"; }
.help-screen-calendar .help-screen-list i:nth-child(3)::before { content: "16:00 - Enviar proposta"; }

.help-screen-list i {
  min-height: 20px;
  background: linear-gradient(90deg, #ffffff 0 38%, #e9f4f3 38% 52%, #ffffff 52%);
}

.help-screen-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.help-screen-finance .help-screen-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.help-screen-finance .help-screen-cards b:nth-child(1)::before { content: "Receitas\A R$ 8.450"; white-space: pre-line; }
.help-screen-finance .help-screen-cards b:nth-child(2)::before { content: "Despesas\A R$ 3.120"; white-space: pre-line; }
.help-screen-finance .help-screen-cards b:nth-child(3)::before { content: "Saldo\A R$ 5.330"; white-space: pre-line; }

.help-screen-erp .help-screen-cards b:nth-child(1)::before { content: "Internados\A 2"; white-space: pre-line; }
.help-screen-erp .help-screen-cards b:nth-child(2)::before { content: "Altas\A 0"; white-space: pre-line; }
.help-screen-erp .help-screen-cards b:nth-child(3)::before { content: "Atendimentos\A 18"; white-space: pre-line; }
.help-screen-erp .help-screen-cards b:nth-child(4)::before { content: "Coleta\A Atualizada"; white-space: pre-line; }

.help-screen-table {
  display: grid;
  gap: 7px;
}

.help-screen-table i {
  display: block;
  min-height: 20px;
  border-radius: 6px;
  background: linear-gradient(90deg, #dcefeb 0 18%, #ffffff 18% 58%, #eef6f7 58% 74%, #ffffff 74%);
}

.help-screen-table i:nth-child(1)::before { content: "Boleto aluguel - pendente"; }
.help-screen-table i:nth-child(2)::before { content: "Honorarios - pago"; }
.help-screen-table i:nth-child(3)::before { content: "Nota fiscal - anexada"; }
.help-screen-table i:nth-child(4)::before { content: "Despesa fixa - prevista"; }

.help-screen-patient,
.help-screen-contact,
.help-screen-assistant,
.help-screen-chart,
.help-screen-line,
.help-screen-backup-icon {
  position: relative;
  min-height: 46px;
  border: 1px solid rgba(37, 111, 104, 0.12);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #e8f6f4);
  overflow: hidden;
}

.help-screen-patient::before {
  content: "Paciente: Maria Silva\A Proxima sessao: 18/06/2026";
  white-space: pre-line;
}

.help-screen-contact::before {
  content: "Contato: Clinica Modelo\A Oportunidade: implantacao VASI";
  white-space: pre-line;
}

.help-screen-assistant::before {
  content: "Assistente CRM: resumir cliente e criar follow-up";
}

.help-screen-chart::before {
  content: "Grafico de indicadores por periodo";
}

.help-screen-line::before {
  content: "Saldo acumulado previsto x realizado";
}

.help-screen-backup-icon::before {
  content: "Backup seguro";
  inset: auto 8px 10px;
  text-align: center;
}

.help-screen-notes {
  display: grid;
  gap: 7px;
}

.help-screen-notes i {
  min-height: 18px;
}

.help-screen-notes i:nth-child(1)::before { content: "Queixa principal e evolucao do atendimento"; }
.help-screen-notes i:nth-child(2)::before { content: "Conduta realizada"; }
.help-screen-notes i:nth-child(3)::before { content: "Orientacoes ao paciente"; }
.help-screen-notes i:nth-child(4)::before { content: "Profissional responsavel"; }

.help-screen-actions b:nth-child(1)::before { content: "Salvar evolucao"; }
.help-screen-actions b:nth-child(2)::before { content: "Imprimir"; }

.help-screen-bars {
  align-items: end;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 92px;
}

.help-screen-bars i {
  display: block;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #2fcf96, #256f68);
}

.help-screen-bars i:nth-child(1) { height: 46px; }
.help-screen-bars i:nth-child(2) { height: 72px; background: linear-gradient(180deg, #8fc7e3, #2f83b7); }
.help-screen-bars i:nth-child(3) { height: 58px; background: linear-gradient(180deg, #f0b68f, #b7553e); }
.help-screen-bars i:nth-child(4) { height: 86px; }

.help-screen-bars i:nth-child(1)::before { content: "Entradas"; color: #ffffff; }
.help-screen-bars i:nth-child(2)::before { content: "Saidas"; color: #ffffff; }
.help-screen-bars i:nth-child(3)::before { content: "Previsto"; color: #ffffff; }
.help-screen-bars i:nth-child(4)::before { content: "Saldo"; color: #ffffff; }

.help-screen-line {
  min-height: 28px;
  background:
    linear-gradient(135deg, transparent 0 44%, #2f83b7 45% 48%, transparent 49%),
    #ffffff;
}

.help-screen-statement i {
  min-height: 22px;
  background: linear-gradient(90deg, #ffffff 0 62%, #eaf6f4 62%);
}

.help-screen-statement i:nth-child(1)::before { content: "Receita bruta"; }
.help-screen-statement i:nth-child(2)::before { content: "Deducoes"; }
.help-screen-statement i:nth-child(3)::before { content: "Lucro bruto"; }
.help-screen-statement i:nth-child(4)::before { content: "Despesas operacionais"; }
.help-screen-statement i:nth-child(5)::before { content: "Resultado liquido"; }

.help-screen-statement i:nth-child(3),
.help-screen-statement i:nth-child(5) {
  background: linear-gradient(90deg, #eaf6f4 0 62%, #d9efeb 62%);
}

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

.help-screen-kanban i {
  min-height: 88px;
  background:
    linear-gradient(#ffffff 0 28px, transparent 28px),
    linear-gradient(145deg, #edf6f5, #ffffff);
}

.help-screen-kanban i:nth-child(1)::before { content: "Novo\A Lead recebido"; white-space: pre-line; }
.help-screen-kanban i:nth-child(2)::before { content: "Em negociacao\A Proposta enviada"; white-space: pre-line; }
.help-screen-kanban i:nth-child(3)::before { content: "Fechado\A Cliente ativo"; white-space: pre-line; }

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

.help-screen-permissions i {
  min-height: 34px;
  background: linear-gradient(90deg, #eaf6f4 0 22%, #ffffff 22%);
}

.help-screen-permissions i:nth-child(1)::before { content: "Financeiro: visualizar"; }
.help-screen-permissions i:nth-child(2)::before { content: "Financeiro: editar"; }
.help-screen-permissions i:nth-child(3)::before { content: "CRM: criar"; }
.help-screen-permissions i:nth-child(4)::before { content: "ERP: gerenciar"; }
.help-screen-permissions i:nth-child(5)::before { content: "Backup: executar"; }
.help-screen-permissions i:nth-child(6)::before { content: "Logs: auditar"; }

.help-screen-backup .help-screen-list i:nth-child(1)::before { content: "15/06/2026 02:00 - Sucesso"; }
.help-screen-backup .help-screen-list i:nth-child(2)::before { content: "14/06/2026 02:00 - Sucesso"; }
.help-screen-backup .help-screen-list i:nth-child(3)::before { content: "13/06/2026 02:00 - Baixar"; }

.help-screen-backup-icon {
  width: 72px;
  min-height: 72px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 38%, #2fcf96 0 18%, transparent 19%),
    linear-gradient(145deg, #eaf6f4, #ffffff);
}

.help-screen-portal .help-screen-cards b:nth-child(1)::before { content: "Financeiro"; }
.help-screen-portal .help-screen-cards b:nth-child(2)::before { content: "Gestao Comercial"; }
.help-screen-portal .help-screen-cards b:nth-child(3)::before { content: "Prontuario"; }
.help-screen-portal .help-screen-cards b:nth-child(4)::before { content: "Contratos"; }
.help-screen-portal .help-screen-list i:nth-child(1)::before { content: "Busca: venda, paciente, contrato"; }
.help-screen-portal .help-screen-list i:nth-child(2)::before { content: "Filtro: Operacao do negocio"; }
.help-screen-portal .help-screen-list i:nth-child(3)::before { content: "Empresa: ambiente correto"; }

.help-screen-commerce .help-screen-cards b:nth-child(1)::before { content: "Vendas\A R$ 1.240"; white-space: pre-line; }
.help-screen-commerce .help-screen-cards b:nth-child(2)::before { content: "Pedidos\A 8 abertos"; white-space: pre-line; }
.help-screen-commerce .help-screen-cards b:nth-child(3)::before { content: "Sinal\A 3 pendentes"; white-space: pre-line; }
.help-screen-commerce .help-screen-cards b:nth-child(4)::before { content: "Producao\A hoje"; white-space: pre-line; }
.help-screen-commerce .help-screen-table i:nth-child(1)::before { content: "Venda balcao - Pix - finalizada"; }
.help-screen-commerce .help-screen-table i:nth-child(2)::before { content: "Pedido #108 - aguardando sinal"; }
.help-screen-commerce .help-screen-table i:nth-child(3)::before { content: "Lista compras - morango"; }
.help-screen-commerce .help-screen-table i:nth-child(4)::before { content: "XML mensal - pronto"; }

.help-screen-agenda .help-screen-list i:nth-child(1)::before { content: "09:00 - Maria Silva - Fono"; }
.help-screen-agenda .help-screen-list i:nth-child(2)::before { content: "10:30 - Retorno - Psicologia"; }
.help-screen-agenda .help-screen-list i:nth-child(3)::before { content: "14:00 - Avaliacao inicial"; }

.help-screen-billing .help-screen-cards b:nth-child(1)::before { content: "Pendentes\A 24"; white-space: pre-line; }
.help-screen-billing .help-screen-cards b:nth-child(2)::before { content: "Competencia\A 06/2026"; white-space: pre-line; }
.help-screen-billing .help-screen-cards b:nth-child(3)::before { content: "Em fatura\A 12"; white-space: pre-line; }
.help-screen-billing .help-screen-cards b:nth-child(4)::before { content: "Conferencia\A aberta"; white-space: pre-line; }
.help-screen-billing .help-screen-table i:nth-child(1)::before { content: "Maria Silva - Fono - R$ 85,00"; }
.help-screen-billing .help-screen-table i:nth-child(2)::before { content: "Joao Lima - Psicologia - R$ 120,00"; }
.help-screen-billing .help-screen-table i:nth-child(3)::before { content: "Convenio Modelo - revisar carteirinha"; }
.help-screen-billing .help-screen-table i:nth-child(4)::before { content: "Gerar faturamento selecionado"; }

.help-screen-tiss .help-screen-cards b:nth-child(1)::before { content: "Convenios\A ativos"; white-space: pre-line; }
.help-screen-tiss .help-screen-cards b:nth-child(2)::before { content: "Guias\A rascunho"; white-space: pre-line; }
.help-screen-tiss .help-screen-cards b:nth-child(3)::before { content: "Faturas\A validadas"; white-space: pre-line; }
.help-screen-tiss .help-screen-cards b:nth-child(4)::before { content: "Glosas\A retorno"; white-space: pre-line; }
.help-screen-tiss .help-screen-list i:nth-child(1)::before { content: "Guia SP/SADT - validar inconsistencias"; }
.help-screen-tiss .help-screen-list i:nth-child(2)::before { content: "Lote TISS - convenio Modelo"; }
.help-screen-tiss .help-screen-list i:nth-child(3)::before { content: "Retorno de glosa - revisar item"; }

.help-screen-contracts .help-screen-cards b:nth-child(1)::before { content: "Rascunhos"; }
.help-screen-contracts .help-screen-cards b:nth-child(2)::before { content: "Aguardando dados"; }
.help-screen-contracts .help-screen-cards b:nth-child(3)::before { content: "Assinatura"; }
.help-screen-contracts .help-screen-cards b:nth-child(4)::before { content: "Ativos"; }
.help-screen-contracts .help-screen-table i:nth-child(1)::before { content: "Contrato mensal - Clinica Modelo"; }
.help-screen-contracts .help-screen-table i:nth-child(2)::before { content: "Ficha cadastral - recebida"; }
.help-screen-contracts .help-screen-table i:nth-child(3)::before { content: "Modelo padrao - revisar clausulas"; }
.help-screen-contracts .help-screen-table i:nth-child(4)::before { content: "Aguardando aprovacao"; }

.help-screen-jornada .help-screen-cards b:nth-child(1)::before { content: "Batidas\A hoje"; white-space: pre-line; }
.help-screen-jornada .help-screen-cards b:nth-child(2)::before { content: "Atrasos\A 2"; white-space: pre-line; }
.help-screen-jornada .help-screen-cards b:nth-child(3)::before { content: "Banco\A +04:20"; white-space: pre-line; }
.help-screen-jornada .help-screen-cards b:nth-child(4)::before { content: "Ajustes\A pendentes"; white-space: pre-line; }
.help-screen-jornada .help-screen-list i:nth-child(1)::before { content: "Escala 12x36 - conferir parametros"; }
.help-screen-jornada .help-screen-list i:nth-child(2)::before { content: "Falta abonada - preservar auditoria"; }
.help-screen-jornada .help-screen-list i:nth-child(3)::before { content: "Fechamento mensal - pendente"; }

.help-screen-supplies .help-screen-cards b:nth-child(1)::before { content: "Produtos"; }
.help-screen-supplies .help-screen-cards b:nth-child(2)::before { content: "Estoque minimo"; }
.help-screen-supplies .help-screen-cards b:nth-child(3)::before { content: "Pedidos compra"; }
.help-screen-supplies .help-screen-cards b:nth-child(4)::before { content: "Fornecedores"; }
.help-screen-supplies .help-screen-table i:nth-child(1)::before { content: "Leite condensado - entrada 20 un"; }
.help-screen-supplies .help-screen-table i:nth-child(2)::before { content: "Chocolate nobre - estoque baixo"; }
.help-screen-supplies .help-screen-table i:nth-child(3)::before { content: "Fornecedor Aurora Insumos"; }
.help-screen-supplies .help-screen-table i:nth-child(4)::before { content: "Ajuste manual - justificar"; }

.help-screen-assistant-vasi .help-screen-contact::before {
  content: "Especialidade: Automatico\A Modulo detectado: SPData";
  white-space: pre-line;
}

.help-screen-assistant-vasi .help-screen-assistant::before {
  content: "Resposta com confianca, fonte, copiar SQL e validar conhecimento";
}

.help-screen-assistant-vasi .help-screen-list i:nth-child(1)::before { content: "Orientacao de uso do sistema"; }
.help-screen-assistant-vasi .help-screen-list i:nth-child(2)::before { content: "Geracao de mensagem ou texto"; }
.help-screen-assistant-vasi .help-screen-list i:nth-child(3)::before { content: "SQL consultivo sem executar"; }

.help-screen-reports .help-screen-cards b:nth-child(1)::before { content: "Financeiro"; }
.help-screen-reports .help-screen-cards b:nth-child(2)::before { content: "Prontuario"; }
.help-screen-reports .help-screen-cards b:nth-child(3)::before { content: "Comercial"; }
.help-screen-reports .help-screen-cards b:nth-child(4)::before { content: "ERP"; }
.help-screen-reports .help-screen-chart::before { content: "Filtros por periodo, status, modulo e impressao"; }


.help-screen-downloads .help-screen-list i:nth-child(1)::before { content: "APK Android - versao mais recente"; }
.help-screen-downloads .help-screen-list i:nth-child(2)::before { content: "Conector SPData - instalar no cliente"; }
.help-screen-downloads .help-screen-list i:nth-child(3)::before { content: "Agente remoto - suporte supervisionado"; }

.about-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(181, 210, 216, 0.9);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(231, 247, 247, 0.9)),
    linear-gradient(120deg, rgba(11, 100, 166, 0.12), rgba(47, 207, 150, 0.13));
}

.about-hero h2 {
  margin-bottom: 8px;
  font-size: clamp(28px, 5vw, 44px);
  color: #0b435b;
}

.about-hero p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.about-hero > strong {
  flex: 0 0 auto;
  font-size: clamp(42px, 8vw, 86px);
  line-height: 0.9;
  background: linear-gradient(90deg, #0b64a6, #2fcf96);
  -webkit-background-clip: text;
  color: transparent;
}

.about-logo-img {
  flex: 0 0 auto;
  width: min(260px, 34vw);
  max-height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(18, 60, 74, 0.12));
}

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

.about-card {
  display: grid;
  gap: 8px;
  min-height: 138px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
}

.about-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.about-card strong {
  color: #102e3a;
  font-size: 20px;
}

.about-card small,
.about-note p {
  color: var(--muted);
  line-height: 1.45;
}

.contact-card a {
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-card .whatsapp-contact-link {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(37, 111, 104, 0.1);
  color: #0f5f45;
}

.contact-card a:hover {
  text-decoration: underline;
}

.about-note {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f4fbfa);
}

.about-note h3 {
  margin: 0 0 8px;
}

.about-note p {
  margin: 0;
}

.profile-panel {
  max-width: 780px;
}

.report-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 16px;
  background: linear-gradient(135deg, #ffffff, #f3fbfa);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.report-brand-logo {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.report-brand-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 6px;
}

.report-brand-logo strong {
  color: var(--primary);
  font-size: 28px;
}

.report-brand span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.report-brand h3 {
  margin: 4px 0;
  font-size: 22px;
}

.report-brand p {
  margin: 0;
  color: var(--muted);
}

.report-brand-main {
  flex: 1 1 auto;
  min-width: 0;
}

.report-system-logo {
  width: 112px;
  max-height: 48px;
  margin-left: auto;
  object-fit: contain;
  opacity: 0.58;
  filter: grayscale(0.1);
}

.report-mode-tabs {
  display: inline-flex;
  width: fit-content;
  margin-top: 16px;
}

.custom-report-form textarea {
  min-height: 118px;
}

.report-subtitle {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.settings-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-actions {
  display: flex;
  gap: 8px;
}

.settings-panel h3 {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 16px;
}

.settings-hint {
  margin: 12px 0 18px;
  padding: 12px 14px;
  border: 1px solid #cfe0e2;
  border-radius: 8px;
  background: linear-gradient(135deg, #f4fbfa, #eef7f6);
  color: #395965;
  line-height: 1.45;
}

.legacy-settings {
  margin: 12px 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
}

.legacy-settings summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
}

.legacy-settings h3 {
  margin-top: 16px;
}

.whatsapp-connect-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  margin: 18px 0 20px;
  padding: 16px;
  border: 1px solid #cfe0e2;
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fcfb, #edf8f7);
}

.whatsapp-connect-panel h3 {
  margin: 4px 0 6px;
}

.whatsapp-connect-panel p {
  margin: 0;
}

.whatsapp-system-clock {
  margin-top: 6px !important;
  color: var(--muted);
  font-size: 12px;
}

.whatsapp-system-clock strong {
  color: var(--primary-dark);
}

.whatsapp-connect-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.whatsapp-connect-result {
  display: flex;
  grid-column: 1 / -1;
  gap: 16px;
  align-items: center;
}

.whatsapp-connect-result img {
  width: 184px;
  max-width: 42vw;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.whatsapp-connect-result strong {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid #aacdce;
  border-radius: 8px;
  background: #fff;
  color: var(--primary-dark);
  letter-spacing: 1px;
}

.danger-action {
  border-color: #efc5b8 !important;
  background: #fff4f0 !important;
  color: #8a3f2a !important;
}

.danger-action:hover {
  border-color: #d99b87 !important;
  background: #ffe9e1 !important;
}

.settings-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.settings-status article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfc;
}

.settings-status span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.settings-status strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
}

.backup-panel {
  display: grid;
  gap: 18px;
}

.backup-header {
  align-items: stretch;
}

.backup-next-card {
  min-width: 260px;
  border: 1px solid rgba(37, 111, 104, 0.18);
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 248, 246, 0.9)),
    linear-gradient(90deg, rgba(11, 100, 166, 0.08), rgba(47, 207, 150, 0.12));
  box-shadow: 0 12px 28px rgba(23, 50, 60, 0.08);
}

.backup-next-card span,
.backup-status-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.backup-next-card strong {
  display: block;
  margin: 8px 0 4px;
  color: #0b435b;
  font-size: 21px;
}

.backup-next-card small {
  color: var(--muted);
}

.backup-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.backup-status-grid article {
  min-height: 98px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfc;
}

.backup-status-grid strong {
  display: block;
  margin-top: 8px;
  color: #102e3a;
  font-size: 18px;
}

.infrastructure-panel {
  display: grid;
  gap: 1.1rem;
}

.infrastructure-summary {
  margin-top: 0;
}

.infrastructure-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 1rem;
  align-items: start;
}

.infrastructure-card {
  border: 1px solid rgba(12, 73, 78, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(235, 249, 248, 0.84)),
    linear-gradient(90deg, rgba(34, 150, 136, 0.06), rgba(24, 129, 168, 0.08));
  box-shadow: 0 14px 34px rgba(12, 73, 78, 0.08);
  padding: 1rem;
}

.infrastructure-actions {
  display: grid;
  gap: 0.8rem;
}

.infrastructure-action-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  border: 1px solid rgba(12, 73, 78, 0.14);
  border-radius: 12px;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.76);
}

.infrastructure-action-item strong {
  color: var(--text);
}

.infrastructure-action-item p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.backup-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.backup-status.success {
  color: #1f6f4a;
  background: #e7f7ee;
}

.backup-status.failed {
  color: #9b2f2f;
  background: #fff0f0;
}

.backup-status.running {
  color: #24516d;
  background: #edf6fb;
}

.backup-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  text-decoration: none;
}

.release-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(37, 111, 104, 0.14);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f4fbfa);
}

.release-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.release-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.release-summary-grid article {
  border: 1px solid rgba(37, 111, 104, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.release-summary-grid span,
.release-check-item span,
.release-commands span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.release-summary-grid strong {
  display: block;
  margin-top: 4px;
  color: #0b435b;
  font-size: 18px;
}

.release-status.success {
  color: #256f68;
}

.release-status.failed {
  color: #b7553e;
}

.release-online-status {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(37, 111, 104, 0.12);
  border-radius: 8px;
  background: #ffffff;
}

.release-online-status span,
.release-online-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.release-online-status p {
  margin: 4px 0 0;
  color: var(--muted);
}

.release-online-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.release-online-grid article {
  padding: 10px;
  border: 1px solid rgba(183, 85, 62, 0.18);
  border-radius: 8px;
  background: #fffaf7;
}

.release-online-grid article.success {
  border-color: rgba(37, 111, 104, 0.18);
  background: #f2fbfa;
}

.release-online-grid strong,
.release-online-grid small {
  display: block;
  margin-top: 3px;
}

.release-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.release-layout h3 {
  margin: 0 0 8px;
  color: #0b435b;
}

.release-checklist,
.release-links,
.release-commands {
  display: grid;
  gap: 8px;
}

.release-check-item,
.release-commands article {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(37, 111, 104, 0.12);
  border-radius: 8px;
  background: #ffffff;
}

.release-check-item {
  grid-template-columns: 74px 1fr;
}

.release-check-item.success {
  border-left: 4px solid #256f68;
}

.release-check-item.failed {
  border-left: 4px solid #b7553e;
}

.release-check-item strong {
  display: block;
  color: #102e3a;
}

.release-check-item p {
  margin: 3px 0 0;
  color: var(--muted);
}

.release-links {
  align-items: start;
}

.release-links a {
  text-decoration: none;
}

.release-doc-link {
  color: var(--muted);
  font-size: 13px;
}

.release-commands code,
.release-doc-link code {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 7px;
  border-radius: 6px;
  background: #edf6f5;
  color: #123642;
  font-weight: 800;
}

.compact-release-history {
  margin-top: 4px;
}

.compact-form {
  margin-bottom: 18px;
}

.commerce-client-identity-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(180px, 0.65fr);
}

.commerce-cnpj-import-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  gap: 16px;
  margin: 0 0 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
  border-left: 5px solid var(--primary);
  border-radius: 8px;
  padding: 14px 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 92%, #dff5ef), color-mix(in srgb, var(--panel) 94%, #e4efff));
}

.commerce-cnpj-import-panel strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
}

.commerce-cnpj-import-panel p,
.commerce-cnpj-import-panel ul {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.commerce-cnpj-import-panel ul {
  padding-left: 18px;
}

.commerce-cnpj-import-panel li + li {
  margin-top: 4px;
}

@media (max-width: 980px) {
  .commerce-client-identity-grid,
  .commerce-cnpj-import-panel {
    grid-template-columns: 1fr;
  }
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
  color: #0b435b;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.form-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(37, 111, 104, 0.34), transparent);
}

.form-note {
  margin: -2px 0 12px;
  border-left: 3px solid #28a783;
  border-radius: 6px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(234, 249, 247, 0.92), rgba(244, 251, 252, 0.92));
  color: #405662;
  font-size: 13px;
  line-height: 1.45;
}

.inline-editor {
  padding: 16px;
  background: linear-gradient(135deg, #fbfdfd, #f1faf9);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.top-actions {
  justify-content: flex-end;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.form-actions .primary-button,
.form-actions .secondary-button {
  min-width: 170px;
  padding: 0 16px;
}

.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.table-actions .secondary-button,
.table-actions .delete-button {
  min-height: 34px;
}

.permissions-panel {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.permissions-grid .empty-inline {
  grid-column: 1 / -1;
  margin: 0;
}

.permission-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfc;
  color: var(--text);
}

.permission-item input {
  width: auto;
}

#permissionsGrid {
  grid-template-columns: 1fr;
}

.permission-mode-switch {
  display: inline-flex;
  gap: 6px;
  margin-top: 12px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--menu-gradient);
}

.permission-mode-switch .feature-tab {
  min-width: 190px;
}

.permission-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}

.permission-template-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.permission-template-actions .secondary-button {
  min-height: 36px;
}

.permission-profile-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.permission-profile-summary article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #ffffff, #f2faf9);
}

.permission-profile-summary span,
.permission-module-main small,
.permission-action small {
  color: var(--muted);
  font-size: 12px;
}

.permission-profile-summary span {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
  text-transform: uppercase;
}

.permission-profile-summary strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
}

.permission-profile-summary small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.permission-module-card {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 14px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfc;
}

.permission-module-card.disabled {
  opacity: 0.64;
}

.permission-module-toggle,
.permission-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.permission-module-toggle {
  font-weight: 800;
}

.permission-module-main {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.permission-module-toggle input,
.permission-action input {
  width: auto;
}

.permission-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 8px;
}

.permission-action {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  font-size: 0.88rem;
  align-items: flex-start;
}

.permission-action-blocked {
  background: #f4f7f7;
  opacity: 0.72;
}

.permission-action-blocked strong {
  color: var(--muted);
}

.permission-action span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.permission-action strong {
  color: var(--text);
}

.permission-toolbar-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0;
  background: var(--panel);
}

.permission-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 220px) minmax(150px, 220px);
  gap: 10px;
  margin-top: 12px;
}

.permission-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  min-height: 0;
  margin-top: 12px;
  overflow: visible;
  border: 2px solid var(--accent-border);
  border-radius: 8px;
  background: var(--surface-gradient);
  box-shadow: var(--shadow);
}

.permission-tree {
  min-width: 0;
  overflow: visible;
  padding: 10px;
  border-right: 1px solid var(--line);
  background: var(--menu-gradient);
  scrollbar-width: thin;
}

.permission-tree-module {
  margin-bottom: 5px;
  border: 1px solid transparent;
  border-radius: 6px;
}

.permission-tree-module.active {
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--primary) 8%, var(--panel));
}

.permission-tree-row {
  display: grid;
  grid-template-columns: 26px 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 4px 6px;
}

.permission-tree-expand,
.permission-tree-check,
.permission-tree-label,
.permission-tree-group {
  border: 0;
  background: transparent;
  color: var(--text);
}

.permission-tree-group-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  margin-top: 3px;
  border-radius: 7px;
}

.permission-tree-group-row.active {
  background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 13%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
}

.permission-tree-group-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  grid-column: 3;
  grid-row: 1;
  padding: 3px 8px 3px 0;
}

.permission-tree-group-actions button {
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  font-weight: 700;
  cursor: pointer;
}

.permission-tree-group-actions .permission-allow-button { color: var(--income); }
.permission-tree-group-actions .permission-deny-button { color: var(--danger); }
.permission-tree-group-actions button:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 8%, var(--panel)); }
.permission-tree-group-actions button:disabled { opacity: 0.45; cursor: not-allowed; }

.permission-tree-permissions {
  grid-column: 2 / -1;
  display: grid;
  gap: 2px;
  padding: 0 8px 5px;
}

.permission-tree-permission-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-left: 2px solid var(--line);
  border-radius: 6px;
}

.permission-tree-permission-row.custom {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-left-color: var(--primary);
}

.permission-tree-permission-row.without-area-effect {
  background: color-mix(in srgb, var(--danger) 7%, transparent);
}

.permission-tree-permission-row em {
  display: block;
  margin-top: 3px;
  color: var(--danger);
  font-size: 10px;
  font-style: normal;
  line-height: 1.3;
}

.permission-tree-permission small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
}

.permission-inline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.permission-inline-action {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.permission-inline-action:hover { background: color-mix(in srgb, var(--primary) 9%, var(--panel)); }
.permission-inline-action.permission-inherit-button { color: var(--primary); }

@media (max-width: 760px) {
  .permission-tree-group-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .permission-tree-group-actions {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    padding: 2px 8px 5px 0;
  }

  .permission-tree-permissions {
    grid-column: 2;
  }
}

.permission-tree-permission {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  border: 0;
  border-left: 2px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  border-radius: 5px;
  font-size: 12px;
}

.permission-tree-permission span { min-width: 0; overflow-wrap: anywhere; }
.permission-tree-permission strong { white-space: nowrap; font-size: 10px; }
.permission-tree-permission .allowed { color: var(--income); }
.permission-tree-permission .denied { color: var(--danger); }
.permission-tree-permission.blocked { opacity: 0.65; }
.permission-tree-permission.inherited strong { color: var(--muted); }
.permission-tree-permission.custom strong { color: var(--primary); }
.permission-tree-permission:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 8%, transparent); }

.permission-tree-expand,
.permission-tree-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
}

.permission-tree-expand {
  color: var(--muted);
  font-size: 16px;
  font-weight: 900;
}

.permission-tree-check,
.permission-effect-box {
  position: relative;
  border: 2px solid var(--muted);
  border-radius: 4px;
}

.permission-tree-check::after,
.permission-effect-box::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}

.permission-tree-check.effect-inherit::after,
.permission-effect-control.effect-inherit .permission-effect-box::after {
  content: "-";
  color: var(--muted);
}

.permission-tree-check.effect-allow,
.permission-effect-control.effect-allow .permission-effect-box {
  border-color: var(--income);
  background: var(--income);
}

.permission-tree-check.effect-allow::after,
.permission-effect-control.effect-allow .permission-effect-box::after {
  content: "";
  inset: 3px 5px 5px 4px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(42deg);
}

.permission-tree-check.effect-deny,
.permission-effect-control.effect-deny .permission-effect-box {
  border-color: var(--danger);
  background: var(--danger);
}

.permission-tree-check.effect-deny::after,
.permission-effect-control.effect-deny .permission-effect-box::after {
  content: "x";
}

.permission-tree-label {
  min-width: 0;
  padding: 5px;
  text-align: left;
  cursor: pointer;
}

.permission-tree-label span,
.permission-tree-label small {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.permission-tree-label span {
  font-weight: 800;
}

.permission-tree-label small {
  margin-top: 2px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
}

.permission-effective-badge,
.permission-contract-badge,
.permission-risk {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.permission-effective-badge.allowed,
.permission-source .allowed {
  color: var(--income);
}

.permission-effective-badge.denied,
.permission-source .denied {
  color: var(--danger);
}

.permission-tree-groups {
  display: grid;
  gap: 2px;
  padding: 0 6px 9px 42px;
}

.permission-tree-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  border-radius: 5px;
  padding: 5px 8px;
  text-align: left;
  cursor: pointer;
}

.permission-tree-group:hover,
.permission-tree-group.active {
  background: color-mix(in srgb, var(--primary) 13%, transparent);
}

.permission-tree-group b {
  color: var(--muted);
  font-size: 11px;
}

.permission-detail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.permission-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 76px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--control-gradient);
}

.permission-detail-header h3,
.permission-detail-header p {
  margin: 2px 0 0;
}

.permission-detail-header p {
  color: var(--muted);
  font-size: 12px;
}

.permission-contract-badge {
  border: 1px solid var(--accent-border);
  color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 8%, var(--panel));
}

.permission-detail-list {
  min-height: 0;
  overflow: auto;
  padding: 6px 14px 14px;
  scrollbar-width: thin;
}

.permission-detail-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) minmax(145px, 190px);
  align-items: center;
  gap: 12px;
  min-height: 68px;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}

.permission-detail-row.blocked {
  opacity: 0.62;
}

.permission-effect-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 108px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--control-gradient);
  color: var(--text);
  cursor: pointer;
}

.permission-effect-control:disabled {
  cursor: not-allowed;
}

.permission-effect-box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.permission-detail-copy,
.permission-detail-copy > div,
.permission-source {
  min-width: 0;
}

.permission-detail-copy > div {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.permission-detail-copy small,
.permission-source span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.permission-risk {
  min-height: 20px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}

.permission-source {
  text-align: right;
}

.permission-source strong {
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.permission-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--panel);
  box-shadow: 0 -8px 24px rgba(23, 32, 38, 0.07);
}

.permission-savebar p,
.permission-savebar .form-actions {
  margin: 0;
}

.permission-review-dialog {
  width: min(680px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 24px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

.permission-review-dialog::backdrop {
  background: rgba(10, 20, 24, 0.64);
}

.permission-review-shell {
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto auto auto;
  max-height: min(740px, calc(100vh - 32px));
}

.permission-review-shell > header,
.permission-review-shell > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.permission-review-shell > footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.permission-review-shell h3 {
  margin: 2px 0 0;
}

.permission-review-list {
  overflow: auto;
  padding: 8px 16px;
}

.permission-review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.permission-review-item small {
  grid-column: 1 / -1;
  color: var(--danger);
}

.permission-review-item .effect-allow { color: var(--income); }
.permission-review-item .effect-deny { color: var(--danger); }
.permission-review-item .effect-inherit { color: var(--muted); }

.permission-review-shell > label {
  margin: 8px 16px;
}

:root[data-theme="dark"] .permission-toolbar-sticky,
:root[data-theme="dark"] .permission-savebar,
:root[data-theme="dark"] .permission-review-dialog {
  background: var(--panel);
  color: var(--text);
}

@media (max-width: 900px) {
  .permission-toolbar,
  .permission-filters {
    grid-template-columns: 1fr;
  }

  .permission-template-actions {
    justify-content: flex-start;
  }

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

  .permission-workspace {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .permission-tree { border-right: 0; border-bottom: 1px solid var(--line); }

  .medical-grid { grid-template-columns: 1fr; }

  .appointment-workspace {
    min-height: 0;
    padding: 14px;
  }

  .permission-detail-row {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .permission-tree-permission-row { grid-template-columns: 1fr; }
  .permission-inline-actions { justify-content: flex-start; }

  .permission-source {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .permission-profile-summary {
    grid-template-columns: 1fr;
  }

  .permission-savebar {
    align-items: stretch;
    flex-direction: column;
  }

  .permission-savebar .form-actions,
  .permission-savebar button {
    width: 100%;
  }

  .permission-detail-row {
    grid-template-columns: 1fr;
  }

  .permission-source {
    grid-column: 1;
  }
}

.patient-search-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  background: linear-gradient(135deg, #fbfdfd, #f1faf9);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.patient-form-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.patient-form-tabs button {
  flex: 0 0 auto;
  min-height: 36px;
  min-width: max-content;
  width: auto;
  white-space: nowrap;
}

.patient-form-tabs button.active {
  background: var(--accent-color, #176b57);
  border-color: var(--accent-color, #176b57);
  color: #fff;
}

.patient-form-panel {
  min-height: 190px;
}

.patient-convention-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.patient-convention-rows {
  display: grid;
  gap: 12px;
}

.patient-convention-row {
  border: 1px solid var(--border-color, #d9e0df);
  border-radius: 6px;
  padding: 12px;
  position: relative;
}

.patient-convention-row > .delete-button {
  position: absolute;
  right: 8px;
  top: 8px;
}

.patient-linked-summary {
  display: grid;
  gap: 8px;
}

.patient-linked-summary > div {
  align-items: center;
  border-bottom: 1px solid var(--border-color, #d9e0df);
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.patient-linked-summary span {
  color: var(--muted-color, #64706e);
  font-size: .86rem;
}

@media (max-width: 640px) {
  .patient-form-tabs .secondary-button {
    width: auto;
  }

  .patient-convention-toolbar,
  .patient-linked-summary > div {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .patient-form-panel {
    min-height: 0;
  }
}

.record-search-panel {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.record-search-panel .form-section-title {
  margin: 0;
}

.record-search-panel .form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.record-search-panel .form-actions button {
  width: 100%;
}

.filter-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.required-highlight {
  padding: 12px;
  background: #fff9ed;
  border: 1px solid #f0cf8a;
  border-radius: 8px;
}

.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 250px;
}

.row-actions .secondary-button,
.row-actions .link-action,
.row-actions .delete-button {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
}

.medical-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

#medicalRecordsView:not(.patient-only-mode) .medical-grid > .table-wrap {
  max-height: 180px;
}

.patient-only-mode .record-search-panel,
.patient-only-mode .records-panel .evolution-panel { display: none; }

#medicalRecordsView[data-workspace-mode="patients"] .record-search-panel,
#medicalRecordsView[data-workspace-mode="patients"] .records-panel .evolution-panel {
  display: none !important;
}

.patient-only-mode .layout.module-content {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  min-height: calc(100vh - 250px);
  padding: 16px clamp(14px, 2vw, 30px) 24px;
}

.patient-only-mode .entry-panel {
  display: grid;
  grid-template-columns: auto minmax(420px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--primary) 9%, var(--panel)), color-mix(in srgb, var(--accent) 5%, var(--panel)));
}

.patient-only-mode .entry-panel h2 { margin: 0; white-space: nowrap; }
.patient-only-mode .patient-search-panel {
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.patient-only-mode .patient-search-panel .form-actions { margin: 0; flex-wrap: nowrap; }

.patient-only-mode .records-panel {
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 18px;
}

.patient-only-mode .records-panel .medical-grid,
.patient-only-mode .records-panel .table-wrap {
  height: 100%;
  min-height: 0;
}

.patient-only-mode #patientsBody tr:only-child td[colspan] {
  height: 280px;
  padding: 32px;
  color: var(--muted);
  text-align: center;
  vertical-align: middle;
  font-size: 15px;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--primary) 7%, var(--panel)), var(--panel) 68%);
}

.patient-only-mode .records-panel .table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.patient-only-mode #patientForm {
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 360px);
  overflow: auto;
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--primary) 3%, var(--panel)));
  box-shadow: 0 12px 28px rgba(14, 64, 70, 0.08);
}

.patient-only-mode #patientForm[hidden] { display: none; }

.patient-only-mode .records-panel:has(#patientForm:not([hidden])) .medical-grid { display: none; }

.patient-only-mode .patient-form-tabs {
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
  margin: 0;
  padding: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, var(--panel));
}

.patient-only-mode .patient-form-tabs button.active {
  background: linear-gradient(115deg, var(--primary), color-mix(in srgb, var(--primary) 68%, var(--accent)));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 20%, transparent);
}

.patient-only-mode .patient-form-panel { min-height: 0; }
.patient-only-mode .patient-form-panel > .form-grid { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.patient-only-mode .patient-form-panel .guardian-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.patient-only-mode #patientForm > .form-actions {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  justify-content: flex-end;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(8px);
}

.evolution-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--primary) 3%, var(--panel)));
  min-height: calc(100vh - 310px);
}

#medicalRecordsView:not(.patient-only-mode) .layout.module-content {
  min-height: calc(100vh - 230px);
  padding: 16px clamp(14px, 2vw, 30px) 24px;
}

#medicalRecordsView:not(.patient-only-mode) .entry-panel,
#medicalRecordsView:not(.patient-only-mode) .records-panel {
  min-height: 0;
  max-height: calc(100vh - 250px);
  overflow: auto;
}

.evolution-workspace-header {
  margin: -16px -16px 14px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 14%, var(--panel)), color-mix(in srgb, var(--accent) 8%, var(--panel)));
}

.evolution-patient-summary {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.evolution-patient-summary > article,
.evolution-patient-summary > p {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 4%, var(--panel));
}

.evolution-patient-summary > p { grid-column: 1 / -1; text-align: center; color: var(--muted); }
.evolution-patient-summary span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.evolution-patient-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.anamnesis-panel {
  padding: 14px;
  background: color-mix(in srgb, var(--primary) 3%, var(--panel));
}

.anamnesis-panel textarea { width: 100%; min-height: 150px; }
.anamnesis-panel .form-actions { justify-content: flex-start; }

#evolutionForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

#evolutionForm > label,
#evolutionForm > section,
#evolutionForm > .form-actions,
#evolutionForm > .message { grid-column: 1 / -1; }

#evolutionForm > .form-grid { grid-column: 1; }
#evolutionForm > label:has(#evolutionProfessionalSelect) { grid-column: 2; }
#evolutionForm > label:has(input[name="professional"]) { grid-column: 2; }

.evolution-procedures {
  min-width: 0;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(37, 111, 104, 0.2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 5%, var(--panel));
}

.evolution-procedures-header,
.pep-procedure-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.evolution-procedures-header span,
.pep-procedure-dialog > header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.evolution-procedures-header h3,
.pep-procedure-dialog > header h2 {
  margin: 2px 0 0;
}

.evolution-procedure-input {
  width: 104px;
  min-width: 84px;
  height: 36px;
  padding: 6px 8px;
}

.evolution-procedure-quantity {
  width: 76px;
}

.evolution-procedure-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.evolution-procedure-totals span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-left: 3px solid var(--primary);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
}

.evolution-procedure-totals strong {
  color: var(--text);
  font-size: 16px;
}

.pep-procedure-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(9, 38, 43, 0.48);
}

.pep-procedure-modal[hidden] {
  display: none;
}

.pep-procedure-dialog {
  width: min(920px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(10, 41, 48, 0.28);
}

.pep-procedure-search {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(190px, 0.55fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}

.evolution-history-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
  max-height: 280px;
  overflow: hidden;
}

.evolution-tree-panel,
.evolution-detail {
  min-height: 0;
  overflow: auto;
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #f5fbfa;
}

.history-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.history-tree {
  max-height: 420px;
  overflow: auto;
  padding: 10px;
}

.history-date-group {
  margin-bottom: 8px;
}

.history-date-group summary {
  cursor: pointer;
  color: var(--primary-dark);
  font-weight: 800;
  list-style-position: inside;
}

.history-date-group > div {
  display: grid;
  gap: 6px;
  margin: 8px 0 0 12px;
  padding-left: 12px;
  border-left: 2px solid rgba(37, 111, 104, 0.18);
}

.history-record {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.history-record:hover,
.history-record.active {
  border-color: rgba(37, 111, 104, 0.25);
  background: #eef8f7;
}

.history-record span {
  color: #0b64a6;
  font-size: 12px;
  font-weight: 800;
}

.history-record strong {
  font-size: 13px;
}

.history-record small {
  grid-column: 2;
  color: var(--muted);
}

.evolution-detail {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.evolution-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.evolution-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  text-align: right;
}

.evolution-detail-actions .secondary-button {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
}

.evolution-detail-actions .delete-button {
  width: auto;
  min-width: 78px;
  height: 34px;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
}

.evolution-detail-header span,
.evolution-detail small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.evolution-detail h3,
.evolution-detail h4,
.evolution-detail p {
  margin: 0;
}

.evolution-detail h4 {
  margin-bottom: 6px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--muted);
}

.evolution-detail p {
  line-height: 1.55;
  white-space: pre-wrap;
}

.report-results {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.report-results h3 {
  margin: 0;
  font-size: 16px;
}

.report-summary {
  margin-bottom: 0;
}

.dashboard-results {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.dashboard-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #eef8f6 58%, #f7fbfc);
}

.dashboard-intro-logo {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.dashboard-intro-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 6px;
}

.dashboard-intro-logo strong {
  color: var(--primary);
  font-size: 28px;
}

.dashboard-intro span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-intro h3 {
  margin: 4px 0;
  font-size: 22px;
}

.dashboard-intro p {
  margin: 0;
  color: var(--muted);
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-cards article {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--line)) 36%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent-soft, #f2faf9) 22%, #ffffff), #f7fbfc 58%, color-mix(in srgb, var(--card-accent, #256f68) 7%, #ffffff)),
    var(--panel);
  box-shadow: 0 14px 30px rgba(23, 32, 38, 0.08);
}

.dashboard-cards article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--card-accent, var(--primary)), var(--card-accent-soft, #58a6a0));
}

.dashboard-cards article::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--card-accent-soft, #58a6a0) 22%, transparent), transparent 35%);
  pointer-events: none;
}

.dashboard-cards span {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--card-accent, var(--primary)) 48%, var(--muted));
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-cards strong {
  position: relative;
  z-index: 1;
  color: var(--text);
  font-size: 22px;
}

.dashboard-cards small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  color: color-mix(in srgb, var(--text) 42%, var(--muted));
  font-size: 12px;
}

.dashboard-cards small.dashboard-card-note-list {
  display: grid;
  gap: 3px;
}

.dashboard-cards small.dashboard-card-note-list em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.dashboard-card-success {
  border-color: rgba(37, 111, 104, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(235, 250, 245, 0.98), rgba(248, 252, 252, 0.98)),
    var(--panel) !important;
}

.dashboard-card-danger {
  border-color: rgba(183, 85, 62, 0.3) !important;
  background:
    linear-gradient(135deg, rgba(255, 244, 240, 0.98), rgba(250, 252, 252, 0.98)),
    var(--panel) !important;
}

.dashboard-card-warning {
  border-color: rgba(186, 143, 48, 0.34) !important;
  background:
    linear-gradient(135deg, #fffdf7, #f6fbfa),
    var(--panel) !important;
}

.erp-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.erp-ranking-section {
  margin: 0;
  align-content: start;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 249, 0.94)),
    var(--panel);
  box-shadow: 0 12px 28px rgba(23, 32, 38, 0.06);
}

.erp-ranking-section h3,
.chart-section h3 {
  position: relative;
  padding-left: 12px;
  color: color-mix(in srgb, var(--primary) 42%, var(--text));
  font-size: 17px;
  font-weight: 900;
}

.erp-ranking-section h3::before,
.chart-section h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary), #2f83b7);
}

.erp-ranking-list {
  display: grid;
  gap: 10px;
}

.erp-ranking-list article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 54px;
  gap: 10px;
  align-items: center;
  min-height: 42px;
}

.erp-ranking-list article > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.erp-ranking-list strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erp-ranking-list i {
  display: block;
  width: var(--bar-width, 0);
  max-width: 100%;
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bar-accent, #256f68), var(--bar-accent-soft, #58a6a0));
  box-shadow: 0 7px 14px color-mix(in srgb, var(--bar-accent, #256f68) 20%, transparent);
}

.erp-ranking-list em,
.erp-ranking-list small {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.erp-ranking-list small {
  font-size: 11px;
}

.erp-lgpd-section {
  align-content: start;
}

.erp-lgpd-list {
  display: grid;
  gap: 8px;
}

.erp-lgpd-list article {
  display: grid;
  grid-template-columns: 30px minmax(72px, 0.55fr) minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
}

.erp-lgpd-list span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.erp-lgpd-list strong,
.erp-lgpd-list em {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erp-lgpd-list strong {
  font-size: 15px;
  font-weight: 900;
}

.erp-lgpd-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

@media (max-width: 900px) {
  .erp-breakdown-grid {
    grid-template-columns: 1fr;
  }

  .erp-ranking-list article {
    grid-template-columns: 26px minmax(0, 1fr) auto;
  }

  .erp-ranking-list small {
    display: none;
  }

  .erp-lgpd-list article {
    grid-template-columns: 26px minmax(56px, 0.45fr) minmax(100px, 1fr);
  }
}

.erp-data-warning {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  border: 1px solid rgba(186, 143, 48, 0.32);
  border-left: 4px solid #ba8f30;
  border-radius: 8px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fffdf7, #f4fbfa);
  color: #5f4515;
}

.erp-data-warning strong {
  color: #3d2d0f;
  font-size: 13px;
}

.erp-data-warning span {
  color: #5f4515;
  font-size: 13px;
  line-height: 1.4;
}

.crm-overview-grid {
  margin-top: 16px;
}

.crm-summary-cards article {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(235, 248, 246, 0.96)),
    linear-gradient(120deg, rgba(37, 111, 104, 0.12), rgba(47, 207, 150, 0.08));
}

.cash-flow-grid .dashboard-section:nth-child(n + 3) {
  grid-column: 1 / -1;
}

.cash-flow-results .table-wrap {
  overflow-x: auto;
}

.dre-grid .dre-statement,
.dre-grid .dashboard-section:last-child {
  grid-column: 1 / -1;
}

.dre-statement tbody tr td:first-child {
  font-weight: 700;
}

.dre-line-subtotal td {
  background: #f2faf9;
  color: #0b435b;
  font-weight: 800;
}

.dre-line-total td {
  background: #eaf6f4;
  color: #0b435b;
  font-weight: 900;
}

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

.dashboard-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.dashboard-section h3 {
  margin: 0;
  font-size: 16px;
}

.link-action {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
}

.bi-command-strip {
  align-items: center;
  background: linear-gradient(120deg, rgba(37, 120, 111, 0.1), rgba(47, 131, 183, 0.08));
  border: 1px solid #d4e5e7;
  border-radius: 7px;
  color: #36505d;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
  padding: 11px 12px;
}

.bi-command-strip span {
  background: #ffffff;
  border: 1px solid #d9e6e8;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}

.bi-canvas {
  background:
    linear-gradient(135deg, rgba(37, 120, 111, 0.08), rgba(47, 131, 183, 0.05)),
    #ffffff;
  border: 1px solid #d4e1e4;
  border-radius: 8px;
  margin-top: 18px;
  padding: 16px;
}

.bi-canvas-header {
  align-items: center;
  border-bottom: 1px solid #dce7ea;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
}

.bi-canvas-header span,
.bi-canvas-header small {
  color: #5c6f7b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.bi-canvas-header strong {
  color: #0e303a;
  display: block;
  font-size: 22px;
}

.spdata-search-form {
  margin-bottom: 18px;
}

.spdata-workspace,
.spdata-object-results,
.spdata-sql-output {
  margin-top: 18px;
}

.spdata-dictionary-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 18px;
}

.spdata-list,
.spdata-object-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.spdata-list-item,
.spdata-object-item,
.spdata-detail,
.spdata-answer,
.spdata-history {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

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

.spdata-list-item div {
  min-width: 0;
}

.spdata-list-item span,
.spdata-object-head span,
.spdata-detail-header span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.spdata-list-item strong,
.spdata-object-head strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
}

.spdata-list-item p,
.spdata-object-item p,
.spdata-detail-header p {
  margin: 6px 0;
  color: var(--muted);
  line-height: 1.45;
}

.spdata-list-item small,
.spdata-object-head small,
.spdata-object-item small {
  color: var(--muted);
  font-size: 12px;
}

.spdata-detail {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.spdata-detail-header h3 {
  margin: 4px 0;
  font-size: 22px;
}

.spdata-detail-grid {
  margin-top: 2px;
}

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

.spdata-object-item {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

.spdata-object-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.spdata-object-item details {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.spdata-object-item summary {
  color: var(--primary);
  cursor: pointer;
  font-weight: 700;
}

.spdata-object-item pre,
.spdata-sql-output pre,
.spdata-answer-box pre {
  max-height: 420px;
  overflow: auto;
  margin: 8px 0 0;
  border: 1px solid #d7e3e6;
  border-radius: 8px;
  padding: 12px;
  background: #f7fafb;
  color: #203038;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.spdata-warning-list {
  margin: 0 0 10px;
  padding-left: 18px;
  color: #8a5b13;
  font-weight: 700;
}

.spdata-assistant-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: 16px;
  margin-top: 18px;
}

.spdata-answer,
.spdata-history {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 16px;
}

.spdata-answer h3,
.spdata-history h3 {
  margin: 0;
  font-size: 16px;
}

.spdata-history-list {
  display: grid;
  gap: 8px;
}

.spdata-history-item {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #f8fbfb;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.chart-section {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 248, 247, 0.94)),
    #ffffff;
  box-shadow: 0 12px 28px rgba(23, 32, 38, 0.06);
}

.wide-chart {
  grid-column: 1 / -1;
}

.gradient-bars {
  display: grid;
  gap: 12px;
}

.gradient-bars article {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--bar-accent, var(--primary)) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bar-accent-soft, #eef8f7) 12%, #ffffff);
}

.gradient-bars article div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.gradient-bars article strong {
  color: var(--text);
}

.gradient-bars i {
  display: block;
  width: var(--bar-width);
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--bar-accent, var(--primary)), var(--bar-accent-soft, #48b7a9) 58%, #2f83b7),
    var(--bar-accent, var(--primary));
  box-shadow: 0 8px 16px color-mix(in srgb, var(--bar-accent, #256f68) 20%, transparent);
}

.donut-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.donut-chart {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--donut-gradient, conic-gradient(var(--primary), #2f83b7));
  box-shadow: 0 18px 34px rgba(23, 32, 38, 0.12);
}

.donut-chart::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: #ffffff;
}

.donut-chart strong,
.donut-chart span {
  position: relative;
  z-index: 1;
  text-align: center;
}

.donut-chart strong {
  max-width: 104px;
  color: var(--text);
  font-size: 17px;
}

.donut-chart span {
  margin-top: 28px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.chart-legend {
  display: grid;
  gap: 10px;
}

.chart-legend article {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-legend i {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.chart-legend span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.chart-legend strong {
  color: var(--text);
}

.comparison-chart {
  display: grid;
  gap: 14px;
}

.comparison-chart article {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--primary));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.comparison-chart article > strong {
  color: var(--text);
}

.comparison-bars {
  display: grid;
  gap: 7px;
}

.comparison-bars span {
  display: grid;
  gap: 4px;
}

.comparison-bars i {
  display: block;
  width: var(--bar-width);
  max-width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bar-color), color-mix(in srgb, var(--bar-color) 72%, white));
}

.comparison-bars small {
  color: var(--muted);
}

.report-section {
  display: grid;
  gap: 10px;
}

.text-right {
  text-align: right;
}

form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

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

input,
select,
textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 6px;
  padding: 11px 12px;
  color: var(--text);
  background: var(--input-gradient);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

textarea {
  resize: vertical;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-grid.single-column {
  grid-template-columns: 1fr;
}

.input-with-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.input-with-button .secondary-button {
  min-width: 76px;
  padding-inline: 12px;
  white-space: nowrap;
}

.form-hint {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.lookup-results {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  background: var(--surface-gradient);
}

.lookup-results[hidden] {
  display: none;
}

.lookup-result-button {
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--primary-strong);
  background: var(--control-gradient);
  font-weight: 700;
  cursor: pointer;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--control-gradient);
}

.segmented label {
  display: block;
  color: var(--text);
}

.segmented input {
  position: absolute;
  opacity: 0;
}

.segmented span {
  display: block;
  padding: 11px 12px;
  text-align: center;
  cursor: pointer;
}

.segmented input:checked + span {
  background: var(--action-gradient);
  color: #ffffff;
}

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

.check-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  background: var(--control-gradient);
  color: var(--text);
  font-weight: 700;
}

.check-option input {
  width: 16px;
  height: 16px;
}

.status-note {
  color: var(--primary-dark);
  font-weight: 700;
}

.primary-button,
.secondary-button,
.icon-button,
.delete-button {
  border: 0;
  cursor: pointer;
}

.primary-button {
  min-height: 44px;
  border-radius: 6px;
  background: var(--action-gradient);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(37, 111, 104, 0.18);
}

.primary-button:hover,
.icon-button:hover {
  background: linear-gradient(135deg, var(--primary-dark), #116d8f);
}

:root[data-palette]:not([data-palette="default"]) .primary-button:hover,
:root[data-palette]:not([data-palette="default"]) .icon-button:hover {
  background: linear-gradient(135deg, var(--palette-primary-hover), var(--palette-secondary));
}

.secondary-button {
  min-height: 38px;
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  padding: 0 14px;
  background: var(--control-gradient);
  color: var(--primary-dark);
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(23, 50, 60, 0.04);
}

.secondary-button:hover {
  background: linear-gradient(135deg, #edf8f6, #dff0ee);
}

.link-button {
  align-self: center;
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  cursor: pointer;
  font-weight: 700;
  padding: 6px 10px;
}

.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  font-size: 20px;
}

.message {
  min-height: 20px;
  margin: 0;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}

.message.error {
  color: var(--danger);
}

.records-panel {
  min-width: 0;
  padding: 22px;
}

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

.summary-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfcfc;
}

.summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.summary-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
}

.alerts-panel {
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfcfc;
}

.alerts-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.alerts-list {
  display: grid;
  gap: 10px;
}

.alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-left: 4px solid var(--expense);
  padding: 10px 12px;
  background: #ffffff;
}

.alert-item strong,
.alert-item span {
  display: block;
}

.alert-item span,
.empty-inline {
  color: var(--muted);
  font-size: 13px;
}

.alert-link {
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

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

.secondary-link {
  font-size: 13px;
}

.records-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 150px 150px;
  gap: 10px;
  width: min(100%, 620px);
}

.compact-filters {
  grid-template-columns: minmax(160px, 220px);
  width: auto;
}

.audit-log-filters {
  grid-template-columns: repeat(2, minmax(150px, 180px)) repeat(3, minmax(170px, 1fr));
  align-items: end;
  width: 100%;
}

.audit-log-filters input,
.audit-log-filters select {
  min-width: 0;
}

.audit-log-filters #auditLogSearch {
  grid-column: 1 / -1;
}

.audit-log-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 0;
}

.audit-log-summary article {
  position: relative;
  min-width: 0;
  min-height: 116px;
  border: 1px solid rgba(37, 111, 104, 0.16);
  border-radius: 8px;
  padding: 16px 16px 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 250, 0.94)),
    linear-gradient(90deg, rgba(37, 111, 104, 0.08), rgba(47, 131, 183, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  overflow: visible;
}

.audit-log-summary article::before {
  content: "";
  position: absolute;
  inset: 14px auto 14px 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #256f68, #2fcf96);
}

.audit-log-summary article.dashboard-card-warning::before {
  background: linear-gradient(180deg, #9a6b2f, #d8a35d);
}

.audit-log-summary span,
.audit-log-summary small {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}

.audit-log-summary span {
  min-height: 31px;
  color: #496271;
  white-space: normal;
  line-height: 1.22;
}

.audit-log-summary strong {
  display: block;
  margin: 8px 0 5px;
  color: #071f2d;
  font-size: 29px;
  line-height: 1.1;
}

.audit-log-summary small {
  color: #60747f;
  line-height: 1.35;
}

.audit-log-table-wrap {
  margin-top: 14px;
}

.audit-log-table-wrap table {
  min-width: 1120px;
  table-layout: fixed;
}

.audit-log-table-wrap th:nth-child(1),
.audit-log-table-wrap td:nth-child(1) {
  width: 155px;
}

.audit-log-table-wrap th:nth-child(2),
.audit-log-table-wrap td:nth-child(2) {
  width: 240px;
}

.audit-log-table-wrap th:nth-child(3),
.audit-log-table-wrap td:nth-child(3) {
  width: 150px;
}

.audit-log-table-wrap th:nth-child(4),
.audit-log-table-wrap td:nth-child(4) {
  width: 120px;
}

.audit-log-table-wrap th:nth-child(5),
.audit-log-table-wrap td:nth-child(5) {
  width: 230px;
}

.audit-date-cell {
  white-space: nowrap;
}

.audit-user-cell small,
.audit-area-cell,
.audit-description-cell {
  overflow-wrap: break-word;
  word-break: normal;
}

.audit-log-table-wrap th,
.audit-log-table-wrap td {
  vertical-align: top;
}

.audit-description-cell {
  line-height: 1.45;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.inline-check input {
  width: auto;
}

.warning-text {
  color: #9a6a15;
  font-weight: 700;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Tabelas de operações: identidade e ações continuam visíveis durante o scroll interno. */
#transactionsView input[type="radio"],
#transactionsView input[type="checkbox"],
#suppliesView input[type="radio"],
#suppliesView input[type="checkbox"] {
  width: auto;
  min-width: 0;
}

#transactionsView .table-wrap,
#suppliesView .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

#transactionsView .table-wrap table,
#suppliesView .table-wrap table {
  min-width: 900px;
}

#transactionsView .table-wrap th:first-child,
#transactionsView .table-wrap td:first-child,
#suppliesView .table-wrap th:first-child,
#suppliesView .table-wrap td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 150px;
  background: var(--panel);
  box-shadow: 6px 0 8px -8px rgba(23, 50, 60, .45);
}

#transactionsView .table-wrap thead th:first-child,
#suppliesView .table-wrap thead th:first-child {
  background: var(--table-head, #164f5c);
}

#transactionsView .table-wrap th:last-child,
#transactionsView .table-wrap td:last-child,
#suppliesView .table-wrap th:last-child,
#suppliesView .table-wrap td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--panel);
  box-shadow: -6px 0 8px -8px rgba(23, 50, 60, .45);
}

#transactionsView .table-wrap thead th:last-child,
#suppliesView .table-wrap thead th:last-child {
  background: var(--table-head, #164f5c);
}

@media (max-width: 1366px) {
  #transactionsView .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }

  #transactionsView .filters input,
  #transactionsView .filters select {
    width: 100%;
    min-width: 0;
  }
}

table {
  width: 100%;
  min-width: 1020px;
  border-collapse: collapse;
  background: #ffffff;
}

.small-table table {
  min-width: 680px;
}

.company-logo-thumb {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  object-fit: contain;
  background: #ffffff;
  padding: 4px;
}

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

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

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

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.pill.receita,
.amount.receita {
  color: var(--income);
}

.pill.despesa,
.amount.despesa {
  color: var(--expense);
}

.pill.status {
  background: #eef3f3;
  color: var(--muted);
}

.pill.success {
  background: #e8f8f0;
  color: #1f7a4d;
}

.pill.warning {
  background: #fff6dc;
  color: #8b6716;
}

.pill.danger {
  background: #fff1f1;
  color: #a64040;
}

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

.billing-admin-layout,
.billing-client-layout {
  align-content: start;
}

.billing-admin-filters {
  grid-template-columns: minmax(150px, 180px) minmax(180px, 220px) minmax(220px, 1fr) auto;
  width: 100%;
  margin-bottom: 16px;
}

.billing-summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 18px;
}

.billing-summary-grid article,
.billing-status-card,
.billing-payment-box,
.billing-copy-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 14px;
}

.billing-summary-grid span,
.billing-status-card span,
.billing-copy-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.billing-summary-grid strong,
.billing-status-card strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 18px;
}

.billing-plan-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 12px 0 18px;
  padding: 16px;
  background: #f8fbfb;
}

.billing-config-details {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 12px 0 18px;
  background: #fbfdfd;
}

.billing-config-details summary {
  cursor: pointer;
  font-weight: 800;
  padding: 14px 16px;
}

.billing-config-form {
  border-top: 1px solid var(--line);
  padding: 16px;
}

.billing-table-wrap {
  margin-top: 12px;
}

.billing-table-wrap .table-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.billing-invoice-detail {
  margin-top: 16px;
}

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

.billing-copy-grid p,
.billing-whatsapp-preview p,
.billing-payment-box p {
  overflow-wrap: anywhere;
}

.billing-payment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.billing-events {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.billing-events li {
  border-left: 3px solid var(--primary);
  padding: 8px 0 8px 12px;
}

.billing-events span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.billing-client-status,
.billing-current-card {
  margin-bottom: 14px;
}

.billing-status-card.success {
  border-color: rgba(31, 122, 77, .22);
  background: #f2fbf6;
}

.billing-status-card.warning {
  border-color: rgba(139, 103, 22, .22);
  background: #fffaf0;
}

.billing-status-card.danger {
  border-color: rgba(166, 64, 64, .22);
  background: #fff5f5;
}

.billing-whatsapp-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 14px;
  padding: 14px;
  background: #f8fbfb;
}

.empty-state.visible {
  display: block;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(183, 85, 62, 0.22);
  border-radius: 999px;
  color: #8a4d35;
  background: #fff7f1;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-pill.success {
  border-color: rgba(37, 111, 104, 0.24);
  color: #256f68;
  background: #edf6f5;
}

.amount {
  white-space: nowrap;
  font-weight: 700;
}

.attachment-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.delete-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--danger);
  background: #fff1f1;
  font-size: 18px;
}

.empty-state {
  display: none;
  margin: 18px 0 0;
  color: var(--muted);
}

@media (max-width: 1500px) {
  .module-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
  }

  .module-nav .nav-section:first-child {
    grid-column: 1 / -1;
  }

  .module-nav .nav-group {
    flex-wrap: wrap;
  }

  .management-group {
    margin-left: 0;
  }
}

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

  .auth-screen {
    grid-template-columns: 1fr;
    align-content: center;
  }

  .auth-backdrop-brand {
    display: none;
  }

  .auth-backdrop-brand strong {
    font-size: clamp(62px, 18vw, 118px);
  }

  .portal-hero {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .portal-hero-panel {
    justify-items: stretch;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 14px 0 0;
    border-top: 1px solid rgba(37, 111, 104, 0.2);
    border-left: 0;
  }

  .portal-meta-grid {
    width: 100%;
  }

  .portal-control-panel {
    grid-template-columns: 1fr;
  }

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

  .portal-filter-group {
    justify-content: flex-start;
  }

  .report-brand,
  .dashboard-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-system-logo {
    margin-left: 0;
  }

  .records-header {
    align-items: stretch;
    flex-direction: column;
  }

  .filters,
  .settings-status,
  .backup-status-grid,
  .release-layout {
    grid-template-columns: 1fr;
  }

  .audit-log-filters #auditLogSearch {
    grid-column: auto;
  }

  .module-nav {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .nav-group {
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
  }

  .management-group {
    margin-left: 0;
  }

  .tab-button {
    flex: 0 0 auto;
  }

  .feature-tabs {
    overflow-x: auto;
  }

  .feature-tab {
    flex: 0 0 auto;
  }

  .help-layout {
    grid-template-columns: 1fr;
  }

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

  .whatsapp-connect-panel {
    grid-template-columns: 1fr;
  }

  .whatsapp-connect-actions {
    justify-content: stretch;
  }

  .whatsapp-connect-actions button {
    flex: 1 1 180px;
  }

  .whatsapp-connect-result {
    align-items: flex-start;
    flex-direction: column;
  }

  .permissions-grid {
    grid-template-columns: 1fr 1fr;
  }

  #permissionsGrid {
    grid-template-columns: 1fr;
  }

  .permission-toolbar {
    grid-template-columns: 1fr;
  }

  .permission-template-actions {
    justify-content: flex-start;
  }

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

  .permission-module-card {
    grid-template-columns: 1fr;
  }

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

  .help-intro-grid,
  .help-deep-grid {
    grid-template-columns: 1fr;
  }

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

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

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

  .audit-log-filters #auditLogSearch {
    grid-column: 1 / -1;
  }

  .audit-log-summary {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .spdata-dictionary-layout,
  .spdata-object-grid,
  .spdata-assistant-layout,
  .help-layout {
    grid-template-columns: 1fr;
  }

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

  .bi-canvas-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .donut-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .comparison-chart article {
    grid-template-columns: 1fr;
  }

  .evolution-history-layout {
    grid-template-columns: 1fr;
  }

  .history-tree {
    max-height: 280px;
  }
}

@media (max-width: 760px) {
  body {
    background: #f7f9fa;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 18px 16px;
  }

  .topbar-brand {
    align-items: flex-start;
  }

  .system-top-logo {
    width: 86px;
    max-height: 44px;
  }

  .brand-line {
    align-items: flex-start;
  }

  h1 {
    font-size: clamp(25px, 8vw, 34px);
    line-height: 1.08;
  }

  .active-company-logo {
    width: 46px;
    height: 46px;
  }

  .module-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px 12px 0;
  }

  .nav-section {
    grid-column: 1;
    width: 100%;
  }

  .nav-title {
    padding-left: 2px;
  }

  .nav-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .tab-button,
  .feature-tab {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    white-space: normal;
  }

  .module-tabs {
    width: auto;
    min-width: 0;
    max-width: calc(100% - 24px);
    margin: 12px 12px 0;
  }

  .module-tabs .feature-tab {
    min-width: 0;
  }

  .feature-tabs {
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .layout,
  .settings-layout,
  .portal-layout {
    padding: 14px 12px 28px;
  }

  .module-content {
    padding-top: 12px;
  }

  .entry-panel,
  .records-panel,
  .settings-panel {
    padding: 16px;
    border-radius: 7px;
  }

  .evolution-procedures-header,
  .pep-procedure-dialog > header {
    align-items: stretch;
    flex-direction: column;
  }

  .evolution-procedures-header .secondary-button {
    width: 100%;
  }

  .evolution-procedure-totals,
  .pep-procedure-search {
    grid-template-columns: 1fr;
  }

  .pep-procedure-modal {
    align-items: end;
    padding: 8px;
  }

  .pep-procedure-dialog {
    max-height: calc(100vh - 16px);
    padding: 16px;
  }

  .records-header,
  .alerts-title,
  .billing-alert {
    align-items: stretch;
    flex-direction: column;
  }

  .filters,
  .compact-filters {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .form-grid,
  .summary-grid,
  .dashboard-cards,
  .dashboard-grid,
  .spdata-dictionary-layout,
  .spdata-object-grid,
  .spdata-assistant-layout,
  .permissions-grid {
    grid-template-columns: 1fr;
  }

  .spdata-list-item,
  .spdata-object-head {
    align-items: stretch;
    flex-direction: column;
  }

  .report-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .report-brand {
    align-items: flex-start;
    padding: 13px;
  }

  .report-brand-logo {
    width: 58px;
    height: 58px;
  }

  .download-card {
    grid-template-columns: 1fr;
  }

  .download-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .table-wrap {
    margin-inline: -4px;
  }

  table {
    min-width: 760px;
  }

  .small-table table {
    min-width: 620px;
  }

  th,
  td {
    padding: 11px 10px;
    font-size: 13px;
  }

  .row-actions {
    min-width: 130px;
  }

  .portal-hero {
    padding: 20px;
  }

  .portal-control-panel {
    padding: 12px;
  }

  .portal-filter-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-filter {
    width: 100%;
  }

  .about-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .portal-hero h2 {
    font-size: 22px;
  }

  .portal-company-brand {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
  }

  .portal-company-logo {
    width: 180px;
    height: 104px;
  }
}

@media (max-width: 560px) {
  .portal-insights {
    grid-template-columns: 1fr;
  }

  .auth-screen {
    min-height: 100dvh;
    align-content: start;
    padding: 16px;
  }

  .auth-screen::after {
    height: 34%;
  }

  .auth-card {
    width: 100%;
    margin: auto;
    padding: 22px 18px 20px;
  }

  .auth-backdrop-brand {
    align-self: end;
  }

  .auth-backdrop-brand span {
    font-size: 14px;
  }

  .auth-backdrop-brand span {
    margin-top: 12px;
  }

  .auth-credit {
    left: 18px;
    right: 18px;
    text-align: center;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-grid,
  .checkbox-grid,
  .summary-grid,
  .permissions-grid,
  .dashboard-cards,
  .audit-log-filters,
  .audit-log-summary,
  .calculator-row {
    grid-template-columns: 1fr;
  }

  .audit-log-summary span {
    white-space: normal;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .permission-actions {
    grid-template-columns: 1fr;
  }

  .permission-profile-summary {
    grid-template-columns: 1fr;
  }

  .permission-template-actions .secondary-button {
    width: 100%;
  }

  .form-actions {
    justify-content: stretch;
  }

  .form-actions .primary-button,
  .form-actions .secondary-button {
    width: 100%;
  }

  .feature-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .feature-tab {
    width: 100%;
  }

  .row-actions {
    align-items: stretch;
    flex-direction: column;
    min-width: 150px;
  }

  .row-actions .secondary-button,
  .row-actions .link-action,
  .row-actions .delete-button {
    width: 100%;
  }

  .portal-layout {
    min-height: auto;
    padding-bottom: 28px;
  }

  .portal-hero {
    min-height: 0;
  }

  .portal-company-brand {
    grid-template-columns: 1fr;
  }

  .portal-company-logo {
    width: min(100%, 250px);
    height: 130px;
  }

  .portal-grid {
    grid-template-columns: 1fr;
  }

  .portal-meta-grid,
  .portal-filter-group {
    grid-template-columns: 1fr;
  }

  .portal-hero-panel {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .portal-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .alert-actions {
    justify-content: stretch;
    width: 100%;
  }

  .topbar-actions {
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
  }

  .user-badge {
    width: 100%;
  }

  .topbar-clock,
  .topbar-refresh-button {
    width: 100%;
  }

  .crm-assistant-layout {
    grid-template-columns: 1fr;
  }

  .crm-assistant-pending {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 120;
    min-height: 64px;
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 12px rgba(13, 49, 61, 0.1);
  }

  .topbar-brand {
    align-items: center;
    gap: 10px;
  }

  .system-top-logo {
    width: 74px;
    height: 42px;
    max-height: 42px;
  }

  .topbar-brand .eyebrow,
  .topbar-brand .company-context,
  .topbar-actions {
    display: none;
  }

  .brand-line h1 {
    max-width: calc(100vw - 116px);
    overflow: hidden;
    font-size: 16px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .active-company-logo {
    width: 34px;
    height: 34px;
  }

  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 390;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(8, 28, 38, 0.48);
  }

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

  .module-nav {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 400;
    width: min(88vw, 380px);
    height: 100dvh;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: -20px 0 44px rgba(8, 28, 38, 0.2);
    transform: translateX(105%);
    transition: transform 180ms ease;
  }

  .mobile-nav-open .module-nav {
    transform: translateX(0);
  }

  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  .mobile-nav-header span,
  .mobile-nav-header strong {
    display: block;
  }

  .mobile-nav-header span {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
  }

  .mobile-nav-header strong {
    margin-top: 2px;
    color: #123f51;
    font-size: 20px;
  }

  .mobile-nav-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: #123f51;
    background: #f5f8f9;
    font-size: 18px;
  }

  .module-nav .nav-section {
    display: grid;
    width: 100%;
    gap: 8px;
  }

  .module-nav .management-group {
    margin-left: 0;
  }

  .module-nav .nav-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .module-nav .tab-button {
    min-height: 48px;
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    white-space: normal;
  }

  .mobile-nav-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  .mobile-nav-footer .secondary-button {
    width: 100%;
    min-width: 0;
  }

  .mobile-bottom-nav {
    display: grid;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
    height: calc(68px + env(safe-area-inset-bottom));
    padding: 6px 6px env(safe-area-inset-bottom);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    border-top: 1px solid #d7e1e4;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -8px 26px rgba(13, 49, 61, 0.1);
  }

  .mobile-bottom-action {
    display: grid;
    min-width: 0;
    min-height: 56px;
    place-items: center;
    align-content: center;
    gap: 3px;
    border: 0;
    border-radius: 6px;
    color: #63717a;
    background: transparent;
  }

  .mobile-bottom-action span {
    min-width: 28px;
    height: 24px;
    color: currentColor;
    font-size: 12px;
    font-weight: 900;
    line-height: 24px;
    text-align: center;
  }

  .mobile-bottom-action small {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bottom-action.active {
    color: #0c615b;
    background: #eaf5f3;
  }

  .module-tabs,
  .feature-tabs {
    display: flex;
    position: sticky;
    top: calc(64px + env(safe-area-inset-top));
    z-index: 90;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 8px 0 0;
    padding: 6px 12px;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    border-width: 1px 0;
    border-radius: 0;
    background: rgba(244, 248, 249, 0.98);
    box-shadow: none;
    scrollbar-width: none;
  }

  .feature-tabs::-webkit-scrollbar,
  .module-tabs::-webkit-scrollbar {
    display: none;
  }

  .module-tabs .feature-tab,
  .feature-tabs .feature-tab,
  .feature-tab {
    width: auto;
    min-width: max-content;
    min-height: 42px;
    padding: 0 14px;
    white-space: nowrap;
  }

  .settings-layout > .module-tabs {
    margin: -14px -12px 12px;
  }

  .layout,
  .settings-layout,
  .portal-layout {
    padding: 12px 10px 24px;
  }

  .entry-panel,
  .records-panel,
  .settings-panel {
    padding: 14px 12px;
  }

  input,
  select,
  textarea {
    min-height: 48px;
    font-size: 16px;
  }

  textarea {
    min-height: 112px;
  }

  .form-actions:not(.top-actions) {
    position: sticky;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 80;
    margin: 16px -8px -8px;
    padding: 10px 8px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -10px 24px rgba(13, 49, 61, 0.08);
  }

  .form-actions:not(.top-actions) .primary-button,
  .form-actions:not(.top-actions) .secondary-button {
    min-height: 48px;
  }

  .portal-hero {
    padding: 16px 14px;
  }

  .portal-company-brand {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
  }

  .portal-company-logo {
    width: 92px;
    height: 64px;
  }
}
.pep-parameters-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.pep-parameters-list .permission-item {
  align-items: flex-start;
  padding: 14px 16px;
}

.pep-parameters-list .permission-item > span {
  display: grid;
  gap: 4px;
}

.pep-parameters-list .permission-item small {
  display: block;
  color: var(--muted);
  font-weight: 400;
}

.pep-catalog-heading {
  align-items: flex-start;
  gap: 18px;
}

.segmented-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

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

.pep-procedure-filters {
  flex: 1 1 720px;
}

.pep-procedure-filters input {
  min-width: min(100%, 280px);
}

.pep-catalog-form {
  margin: 14px 0 18px;
  border-left: 3px solid var(--primary);
}

.pep-catalog-form input[readonly] {
  background: #f2f7f7;
  color: var(--muted);
}

.pep-catalog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.production-panel {
  display: grid;
  gap: 18px;
}

.production-header {
  align-items: flex-start;
}

.production-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.production-filters {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 10px;
}

.production-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.production-filters input,
.production-filters select {
  width: 100%;
  min-width: 0;
}

.production-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.production-summary span {
  min-width: 150px;
  color: var(--muted);
}

.production-summary strong {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.production-table th,
.production-table td {
  white-space: normal;
  vertical-align: top;
}

.production-table .table-actions {
  min-width: 150px;
}

@media (max-width: 1180px) {
  .production-filters {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (min-width: 981px) {
  #appointmentsView.clinical-focus-active .appointment-layout { position: relative; }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) {
    position: fixed;
    inset: 82px 18px 18px auto;
    z-index: 120;
    width: min(780px, calc(100vw - 36px));
    max-height: none;
    padding: 18px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: -18px 24px 70px rgba(7, 39, 46, .28);
  }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed)::before {
    content: "Cadastro de atendimento";
    display: block;
    margin-bottom: 12px;
    color: var(--primary);
    font-size: 18px;
    font-weight: 900;
  }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) .compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) .compact-form > .form-actions { position: sticky; bottom: -18px; grid-column: 1 / -1; z-index: 3; justify-content: flex-end; margin: 4px -18px -18px; padding: 12px 18px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(10px); }
}

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

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

.tiss-workspace {
  display: grid;
  gap: 20px;
}

.tiss-workspace > section {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.tiss-workspace h3 {
  margin: 4px 0;
}

.tiss-tabs {
  padding: 8px;
  border: 1px solid var(--line);
  background: #f7fafb;
}

.tiss-workspace .compact-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 10px;
}

.tiss-workspace .compact-summary article {
  display: grid;
  gap: 7px;
  min-height: 82px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  background: linear-gradient(135deg, #fff, #f1f8f7);
}

.tiss-workspace .compact-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.tiss-workspace .compact-summary strong {
  color: #0b435b;
  font-size: 24px;
}

.tiss-workspace .compact-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  width: 100%;
}

.tiss-complements {
  margin-top: 4px;
}

.tiss-complements .settings-grid {
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

.tiss-complements .compact-form {
  border-left: 3px solid #1687aa;
}

@media (max-width: 1180px) {
  .tiss-workspace .compact-summary {
    grid-template-columns: repeat(3, minmax(145px, 1fr));
  }

  .tiss-workspace .compact-filters {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 700px) {
  .tiss-workspace .compact-summary,
  .tiss-workspace .compact-filters {
    grid-template-columns: 1fr;
  }

  .tiss-workspace .records-header,
  .tiss-workspace .form-actions {
    align-items: stretch;
  }
}

.billing-panel {
  display: grid;
  gap: 18px;
}

.appointment-workspace {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  height: calc(100vh - 230px);
  min-height: 520px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-gradient);
}

.appointment-toolbar,
.appointment-toolbar-controls,
.appointment-toolbar-actions,
.appointment-form-heading,
.appointment-context-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.appointment-toolbar {
  align-items: flex-start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 14%, var(--panel)), color-mix(in srgb, var(--accent) 7%, var(--panel)));
}

.appointment-toolbar-controls { flex: 1 1 620px; min-width: 0; }
.appointment-toolbar-controls > .primary-button { flex: 0 0 auto; white-space: nowrap; }

.appointment-toolbar h2,
.appointment-form-heading h3 {
  margin: 0;
}

.appointment-filters {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 118px 118px minmax(150px, 1fr) minmax(140px, 1fr) auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 3%, var(--panel));
}

/* Agenda Assistencial: filtros e cadastro permanecem no cabeçalho, acima do grid. */
@media (min-width: 1250px) {
  .appointment-workspace { grid-template-rows: auto auto minmax(0, 1fr); }
  .appointment-toolbar { display: grid; grid-template-columns: minmax(170px, .7fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; padding: 8px 12px; }
  .appointment-toolbar > :first-child { min-width: 0; }
  .appointment-toolbar .panel-copy { display: none; }
  .appointment-toolbar-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; }
  .appointment-toolbar-actions { flex: 0 1 auto; gap: 5px; }
  .appointment-toolbar-actions .segmented-tabs { display: flex; gap: 4px; }
  .appointment-toolbar-actions .secondary-button { padding: 7px 9px; white-space: nowrap; }
  .appointment-filters { grid-template-columns: 96px 96px minmax(110px, 1fr) minmax(110px, 1fr) auto; padding: 5px; gap: 5px; min-width: 0; }
  .appointment-filters input,
  .appointment-filters select,
  .appointment-filters button { min-height: 34px; }
  .appointment-editor { grid-column: 1; }
}

.appointment-layout {
  display: grid;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.appointment-editor,
.appointment-board-wrap {
  min-width: 0;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.appointment-editor { padding: 14px; overflow: auto; }
.appointment-board-wrap { padding: 12px; overflow: auto; }

.appointment-editor .compact-form {
  display: grid;
  gap: 9px;
  min-height: 100%;
}

.appointment-editor .compact-form > .form-actions {
  position: sticky;
  bottom: -14px;
  z-index: 2;
  margin: auto -14px -14px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(8px);
}

.appointment-settings:not([open]) { padding: 0; }
.appointment-settings:not([open]) > summary { margin: 0; padding: 10px 12px; }

@media (max-width: 900px) {
  .patient-only-mode .layout.module-content {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .patient-only-mode .entry-panel {
    grid-template-columns: 1fr;
  }

  .patient-only-mode .patient-search-panel {
    grid-template-columns: 1fr;
  }

  .patient-only-mode .patient-form-panel > .form-grid,
  .patient-only-mode .patient-form-panel .guardian-grid,
  .evolution-patient-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .patient-only-mode .records-panel .table-wrap { min-height: 320px; }
  .appointment-workspace { height: auto; min-height: 0; }
  .appointment-layout { min-height: 0; height: auto; overflow: visible; }
}

@media (max-width: 620px) {
  .patient-only-mode .patient-form-panel > .form-grid,
  .patient-only-mode .patient-form-panel .guardian-grid,
  .evolution-patient-summary,
  #evolutionForm {
    grid-template-columns: 1fr;
  }

  #evolutionForm > .form-grid,
  #evolutionForm > label:has(#evolutionProfessionalSelect),
  #evolutionForm > label:has(input[name="professional"]) { grid-column: 1; }
}

.appointment-dashboard,
.appointment-settings,
.anamnesis-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.appointment-dashboard {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.appointment-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 9px;
}

.appointment-kpi {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--border);
  border-top: 3px solid #6c8790;
  border-radius: 7px;
  background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--kpi-color, #6c8790) 10%, var(--panel)));
}

.appointment-kpi strong { color: var(--kpi-color, var(--primary)); font-size: 25px; }
.appointment-kpi span { color: var(--muted); font-size: 12px; }
.appointment-kpi-scheduled { --kpi-color: #3979a8; border-top-color: var(--kpi-color); }
.appointment-kpi-confirmed { --kpi-color: #1687aa; border-top-color: var(--kpi-color); }
.appointment-kpi-attended { --kpi-color: #25825f; border-top-color: var(--kpi-color); }
.appointment-kpi-missed { --kpi-color: #c07a32; border-top-color: var(--kpi-color); }
.appointment-kpi-cancelled { --kpi-color: #a95762; border-top-color: var(--kpi-color); }
.appointment-kpi-first { --kpi-color: #7b5aa6; border-top-color: var(--kpi-color); }
.appointment-kpi-payment { --kpi-color: #b08a25; border-top-color: var(--kpi-color); }

.appointment-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 12px;
}

.appointment-dashboard-grid > article {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 7px;
}

.appointment-dashboard-grid h3 { margin: 0 0 12px; }

.appointment-trend {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 180px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.appointment-trend-item {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  flex: 1 0 22px;
  height: 100%;
  text-align: center;
}

.appointment-trend-item span {
  display: block;
  min-height: 6px;
  border-radius: 4px 4px 0 0;
  background: #1687aa;
}
.appointment-trend-item:nth-child(5n + 2) span { background: #36a18b; }
.appointment-trend-item:nth-child(5n + 3) span { background: #6d83bd; }
.appointment-trend-item:nth-child(5n + 4) span { background: #b58b45; }
.appointment-trend-item:nth-child(5n + 5) span { background: #8b71ad; }

.appointment-trend-item small { padding-top: 4px; color: var(--muted); font-size: 10px; }

.birthday-row {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.birthday-row div { display: grid; }
.birthday-row small { color: var(--muted); }

.appointment-settings {
  padding: 12px 14px;
}

.appointment-settings summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 800;
}

.appointment-settings-toolbar {
  display: flex;
  gap: 10px;
  align-items: end;
  margin: 12px 0;
}

.appointment-settings-toolbar label { display: grid; gap: 5px; }

.appointment-settings-rows {
  display: grid;
  gap: 7px;
  overflow-x: auto;
}

.appointment-setting-row {
  display: grid;
  grid-template-columns: 140px repeat(4, minmax(105px, 1fr)) 80px 80px 90px;
  gap: 7px;
  align-items: end;
}

.appointment-setting-row label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
}

.appointment-setting-active {
  display: flex !important;
  align-items: center;
  min-height: 40px;
  color: var(--text) !important;
  font-weight: 700;
}

.appointment-overbooking-toggle {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.appointment-break {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 9px;
  border: 1px dashed #aebdc1;
  border-radius: 5px;
  background: #f0f2f2;
  color: #60777d;
  font-size: 12px;
}

.appointment-first-visit,
.appointment-overbooking-badge,
.appointment-payment-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px !important;
  font-weight: 800;
}

.appointment-first-visit { background: #efe8fb; color: #62408d !important; }
.appointment-overbooking-badge { background: #fff2cc; color: #7a5300 !important; }
.appointment-payment-badge { background: #f4e5e5; color: #8b3131 !important; }
.appointment-payment-pago,
.appointment-payment-isento { background: #e3f4eb; color: #216a4d !important; }
.appointment-payment-parcial,
.appointment-payment-faturar_convenio { background: #fff2cc; color: #7a5300 !important; }
.appointment-slot-first { box-shadow: inset 0 0 0 2px #8a65b2; }

.appointment-payment-action { min-width: 145px; }

.appointment-history-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  background: #fff;
}

.appointment-history-item {
  display: grid;
  gap: 3px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.appointment-history-item span,
.appointment-history-item p { margin: 0; color: var(--muted); font-size: 12px; }

.anamnesis-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border-left: 4px solid #7b5aa6;
}

.anamnesis-panel form { display: grid; gap: 10px; }
.anamnesis-history { display: grid; gap: 8px; }
.anamnesis-history-item { padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.anamnesis-history-item > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.anamnesis-history-item p { white-space: pre-wrap; }

.appointment-editor {
  position: sticky;
  top: 12px;
}

.appointment-editor .compact-form {
  display: grid;
  gap: 12px;
  margin: 0;
  border-left: 3px solid var(--primary);
}

.appointment-form-heading span,
.appointment-context-heading span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e6f3f1;
  color: #155d58;
  font-size: 12px;
  font-weight: 700;
}

.appointment-context-section {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.appointment-procedure-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px auto;
  gap: 6px;
}

.appointment-procedure-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 62px minmax(210px, .9fr) minmax(0, 1fr) 36px;
  gap: 6px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.appointment-procedure-row > div,
.appointment-slot > div {
  display: grid;
  min-width: 0;
}

.appointment-procedure-row span,
.appointment-slot span,
.appointment-slot small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
}

.appointment-procedure-adjustments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.appointment-procedure-adjustments label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.appointment-procedure-total {
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 9px;
  background: linear-gradient(112deg, color-mix(in srgb, #e7f6f3 82%, var(--panel)), color-mix(in srgb, #e8f2f8 78%, var(--panel)));
  color: var(--primary);
  font-weight: 800;
}

.appointment-board-wrap {
  min-width: 0;
}

.appointment-board {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.appointment-day-roster {
  display: grid;
  gap: 10px;
}

.appointment-day-roster > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--primary) 12%, var(--panel)), color-mix(in srgb, #4b93b1 8%, var(--panel)));
}

.appointment-day-roster > header > div { display: flex; align-items: baseline; gap: 10px; text-transform: capitalize; }
.appointment-day-roster > header > span { color: var(--muted); font-size: 12px; font-weight: 700; }

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

.appointment-roster-card {
  display: grid;
  grid-template-columns: 72px minmax(150px, 1fr) minmax(120px, auto);
  grid-template-areas: "time patient state" "time actions actions";
  gap: 7px 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #6c8790;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--primary) 4%, var(--panel)));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 8%, transparent);
}

.appointment-roster-card.appointment-status-confirmado { border-left-color: #1687aa; }
.appointment-roster-card.appointment-status-realizado,
.appointment-roster-card.appointment-status-evoluido { border-left-color: #25825f; }
.appointment-roster-card.appointment-status-faltou { border-left-color: #c07a32; }
.appointment-roster-card.appointment-status-cancelado { border-left-color: #a95762; opacity: .82; }
.appointment-roster-time { grid-area: time; display: grid; align-content: start; color: var(--primary); font-variant-numeric: tabular-nums; }
.appointment-roster-time strong { font-size: 18px; }
.appointment-roster-time span { color: var(--muted); font-size: 12px; }
.appointment-roster-patient { grid-area: patient; display: grid; min-width: 0; }
.appointment-roster-patient strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appointment-roster-patient span { color: var(--muted); font-size: 12px; }
.appointment-roster-state { grid-area: state; display: grid; justify-items: end; align-content: start; gap: 4px; }
.appointment-roster-state small { color: var(--muted); font-size: 10px; }
.appointment-roster-actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.appointment-roster-actions button { min-height: 28px; padding: 4px 8px; font-size: 11px; }

.appointment-board[data-view="week"] {
  grid-template-columns: repeat(7, minmax(180px, 1fr));
  overflow-x: auto;
  padding-bottom: 8px;
}

.appointment-day {
  min-width: 0;
  border-top: 3px solid #23766f;
}

.appointment-day > header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  text-transform: capitalize;
}

.appointment-board[data-view="week"] .appointment-day > header {
  display: grid;
}

.appointment-day-items {
  display: grid;
  gap: 7px;
  padding-top: 8px;
}

.appointment-slot {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--border);
  border-left: 4px solid #6c8790;
  border-radius: 6px;
  background: #fff;
}

.appointment-board[data-view="week"] .appointment-slot {
  grid-template-columns: 1fr;
}

.appointment-slot time {
  display: grid;
  color: #123f4d;
  font-size: 15px;
  font-weight: 800;
}

.appointment-slot time small {
  font-weight: 500;
}

.appointment-slot-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.appointment-slot-actions button {
  padding: 7px 9px;
  font-size: 12px;
}

.appointment-status-confirmado { border-left-color: #1687aa; }
.appointment-status-chegou { border-left-color: #b27617; }
.appointment-status-em_atendimento { border-left-color: #7b5aa6; }
.appointment-status-evoluido { border-left-color: #25825f; }
.appointment-status-faltou,
.appointment-status-cancelado { border-left-color: #a64040; opacity: .78; }

.appointment-timeline {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.appointment-timeline-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 72px repeat(var(--appointment-days), minmax(0, 1fr));
  min-width: calc(72px + var(--appointment-grid-min-width));
  border-bottom: 1px solid var(--line);
  background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 12%, var(--panel)), color-mix(in srgb, var(--accent) 7%, var(--panel)));
}

.appointment-timeline-header > span,
.appointment-timeline-header > header {
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--line);
}

.appointment-timeline-header > span {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.appointment-timeline-header > header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  text-transform: capitalize;
}

.appointment-timeline-header header span { color: var(--primary); font-weight: 800; }
.appointment-timeline-header header small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }

.appointment-timeline-scroll {
  display: grid;
  grid-template-columns: 72px minmax(var(--appointment-grid-min-width), 1fr);
  min-width: calc(72px + var(--appointment-grid-min-width));
  height: var(--appointment-timeline-height);
  min-height: 540px;
}

.appointment-time-axis {
  position: relative;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, var(--primary));
}

.appointment-time-axis span {
  position: absolute;
  right: 9px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.appointment-timeline-days {
  display: grid;
  grid-template-columns: repeat(var(--appointment-days), minmax(0, 1fr));
}

.appointment-timeline-day {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 39.5px, color-mix(in srgb, var(--line) 72%, transparent) 40.5px);
}

.appointment-timeline-day:nth-child(even) {
  background-color: color-mix(in srgb, var(--primary) 1.5%, var(--panel));
}

.appointment-timeline-break {
  position: absolute;
  z-index: 1;
  left: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 4px 7px;
  border: 1px dashed #9aaeb3;
  background: color-mix(in srgb, var(--panel) 80%, #b9c1c3);
  color: var(--muted);
  font-size: 10px;
  overflow: hidden;
}

.appointment-timeline-card {
  position: absolute;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 1px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line));
  border-left: 4px solid #6c8790;
  border-radius: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 13%, var(--panel)), color-mix(in srgb, var(--accent) 8%, var(--panel)));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 12%, transparent);
  overflow: hidden;
}

.appointment-timeline-card time { color: var(--primary); font-size: 10px; font-weight: 900; }
.appointment-timeline-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.appointment-timeline-card > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.appointment-timeline-card.appointment-status-confirmado { border-left-color: #1687aa; }
.appointment-timeline-card.appointment-status-chegou { border-left-color: #b27617; }
.appointment-timeline-card.appointment-status-em_atendimento { border-left-color: #7b5aa6; }
.appointment-timeline-card.appointment-status-evoluido { border-left-color: #25825f; }
.appointment-timeline-card.appointment-status-faltou,
.appointment-timeline-card.appointment-status-cancelado { border-left-color: #a64040; opacity: .78; }

.appointment-week-planner { display: grid; min-width: 0; height: 100%; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.appointment-week-planner > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(115deg, color-mix(in srgb, #3979a8 12%, var(--panel)), color-mix(in srgb, #36a18b 10%, var(--panel))); }
.appointment-week-planner > header > div { display: grid; }
.appointment-week-planner > header span { color: var(--muted); font-size: 12px; }
.appointment-week-columns { display: grid; grid-template-columns: repeat(7, minmax(190px, 1fr)); min-height: 0; overflow: auto; }
.appointment-week-day { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 98%, var(--primary)); }
.appointment-week-day:nth-child(even) { background: color-mix(in srgb, var(--primary) 2.5%, var(--panel)); }
.appointment-week-day > header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 91%, var(--primary)); text-transform: capitalize; }
.appointment-week-day > header > div { display: grid; min-width: 0; }
.appointment-week-day > header span { color: var(--muted); font-size: 11px; }
.appointment-week-day > header b { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; }
.appointment-week-day > header .appointment-week-day-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.appointment-week-day > header .appointment-week-day-summary b,
.appointment-week-day > header .appointment-week-day-summary span { display: inline-flex; align-items: center; min-width: auto; height: auto; padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, var(--panel)); color: var(--text); font-size: 10px; font-weight: 800; white-space: nowrap; }
.appointment-week-day.is-full > header > div:first-child strong { color: #b43e47; }
.appointment-week-day.is-empty > header > div:first-child strong { color: #25825f; }
.appointment-week-day.is-partial > header > div:first-child strong { color: var(--text); }
.appointment-week-day.is-unavailable > header > div:first-child strong { color: var(--muted); }
.appointment-week-day.is-full > header .appointment-week-day-summary span { background: color-mix(in srgb, #b43e47 12%, var(--panel)); color: #9d3540; }
.appointment-week-day.is-empty > header .appointment-week-day-summary span { background: color-mix(in srgb, #25825f 12%, var(--panel)); color: #1f755b; }
.appointment-week-list { display: grid; align-content: start; gap: 7px; min-height: 0; padding: 8px; overflow-y: auto; }
.appointment-week-card { display: grid; gap: 4px; min-width: 0; padding: 9px; border: 1px solid var(--line); border-left: 4px solid #6c8790; border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, #3979a8 7%, var(--panel)), color-mix(in srgb, #36a18b 5%, var(--panel))); box-shadow: 0 3px 9px color-mix(in srgb, var(--primary) 8%, transparent); }
.appointment-week-card > header { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.appointment-week-card time { color: var(--primary); font-size: 11px; font-weight: 900; }
.appointment-week-card > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.appointment-week-card > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.appointment-week-card > footer { display: flex; justify-content: flex-end; gap: 5px; padding-top: 3px; }
.appointment-week-card > footer button { min-height: 27px; padding: 4px 7px; font-size: 10px; }
.appointment-week-card.appointment-status-confirmado { border-left-color: #1687aa; }
.appointment-week-card.appointment-status-chegou { border-left-color: #b27617; }
.appointment-week-card.appointment-status-em_atendimento { border-left-color: #7b5aa6; }
.appointment-week-card.appointment-status-evoluido { border-left-color: #25825f; }
.appointment-week-card.appointment-status-faltou,
.appointment-week-card.appointment-status-cancelado { border-left-color: #a64040; opacity: .78; }

.appointment-week-free-slot {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 9px;
  border: 1px dashed color-mix(in srgb, #25825f 58%, var(--line));
  border-left: 4px solid #25825f;
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, #25825f 8%, var(--panel)), color-mix(in srgb, #7ac7aa 8%, var(--panel)));
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.appointment-week-free-slot:hover,
.appointment-week-free-slot:focus-visible { background: linear-gradient(135deg, color-mix(in srgb, #25825f 16%, var(--panel)), color-mix(in srgb, #7ac7aa 14%, var(--panel))); outline: 2px solid color-mix(in srgb, #25825f 45%, transparent); outline-offset: 1px; }
.appointment-week-free-slot span { color: #1f755b; font-size: 11px; font-weight: 900; }
.appointment-week-free-slot strong { font-size: 12px; }
.appointment-week-free-slot small { color: var(--muted); font-size: 10px; }

.appointment-slot-birthday {
  border-color: #d39b24;
  background: linear-gradient(135deg, color-mix(in srgb, #f5c451 20%, var(--panel)), color-mix(in srgb, var(--primary) 8%, var(--panel)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d39b24 45%, transparent), 0 6px 14px color-mix(in srgb, #d39b24 15%, transparent);
}

.appointment-birthday-icon { font-size: 12px; }
.appointment-birthday-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff0bd;
  color: #795000;
  font-size: 10px;
  font-weight: 900;
}

.appointment-birthday-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 28px));
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  box-shadow: 0 24px 70px rgba(10, 42, 48, .28);
}

.appointment-birthday-dialog::backdrop {
  background: rgba(7, 32, 38, .48);
  backdrop-filter: blur(3px);
}

.appointment-birthday-dialog-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.appointment-birthday-dialog-card > header,
.appointment-birthday-dialog-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}

.appointment-birthday-dialog-card > header {
  background: linear-gradient(115deg, color-mix(in srgb, #f5c451 22%, var(--panel)), color-mix(in srgb, var(--primary) 12%, var(--panel)));
  border-bottom: 1px solid var(--line);
}

.appointment-birthday-dialog-card h2,
.appointment-birthday-dialog-card h3 { margin: 0; }
.appointment-birthday-dialog-card > footer { justify-content: flex-end; border-top: 1px solid var(--line); }

.appointment-birthday-dialog-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-height: 460px;
  padding: 18px;
  overflow: auto;
}

.appointment-birthday-dialog-content > section {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 3%, var(--panel));
}

.appointment-alerts-dialog {
  width: min(940px, calc(100vw - 30px));
  max-height: min(820px, calc(100dvh - 30px));
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  box-shadow: 0 24px 70px rgba(10, 42, 48, .3);
}

.appointment-recurrence-preview-dialog { width: min(900px, calc(100vw - 28px)); max-height: min(760px, calc(100dvh - 28px)); padding: 0; border: 0; border-radius: 16px; background: transparent; color: var(--text); box-shadow: 0 24px 70px rgba(10,42,48,.28); }
.appointment-recurrence-preview-dialog::backdrop { background: rgba(7,32,38,.42); backdrop-filter: blur(3px); }
.appointment-recurrence-preview-card { display: grid; grid-template-rows: auto minmax(0,1fr) auto; max-height: inherit; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.appointment-recurrence-preview-card > header, .appointment-recurrence-preview-card > footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; }
.appointment-recurrence-preview-card > header { background: linear-gradient(120deg, color-mix(in srgb, #e8f5f2 92%, var(--panel)), color-mix(in srgb, #dceff2 76%, var(--panel))); border-bottom:1px solid var(--line); }
.appointment-recurrence-preview-card h2, .appointment-recurrence-preview-card p { margin:0; }
.appointment-recurrence-preview-card p { color:var(--muted); margin-top:4px; }
.appointment-recurrence-preview-card > footer { justify-content:flex-end; border-top:1px solid var(--line); }
.appointment-recurrence-preview-table-wrap { min-height:0; overflow:auto; padding:18px 22px; }
.appointment-recurrence-preview-table-wrap table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.appointment-recurrence-preview-table-wrap th { background:linear-gradient(120deg, #dcefeb, #eaf5f6); color:var(--text); font-weight:800; text-align:left; }
.appointment-recurrence-preview-table-wrap th, .appointment-recurrence-preview-table-wrap td { padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.appointment-recurrence-preview-table-wrap tr:last-child td { border-bottom:0; }
.appointment-recurrence-preview-table-wrap tbody tr:nth-child(even) { background:color-mix(in srgb, var(--primary) 3%, var(--panel)); }
.appointment-preview-status { display:inline-flex; padding:4px 9px; border-radius:999px; font-size:.82rem; font-weight:800; }
.appointment-preview-status.is-valid { background:#e5f5ed; color:#18724f; }
.appointment-preview-status.is-adjusted { background:#fff4dc; color:#8b641c; }

.appointment-delete-dialog { width: min(680px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 16px; background: transparent; color: var(--text); box-shadow: 0 24px 70px rgba(10,42,48,.28); }
.appointment-delete-dialog::backdrop { background: rgba(7,32,38,.42); backdrop-filter: blur(3px); }
.appointment-delete-dialog-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.appointment-delete-dialog-card > header, .appointment-delete-dialog-card > footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; }
.appointment-delete-dialog-card > header { background: linear-gradient(120deg, color-mix(in srgb, #fff0ed 84%, var(--panel)), color-mix(in srgb, #f8f1dd 70%, var(--panel))); border-bottom:1px solid var(--line); }
.appointment-delete-dialog-card h2, .appointment-delete-dialog-card p { margin:0; }
.appointment-delete-dialog-card > header p { margin-top:4px; color:var(--muted); }
.appointment-delete-dialog-body { padding:14px 22px; color:var(--muted); }
.appointment-delete-dialog-card > footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  justify-content: stretch;
  align-items: stretch;
  border-top:1px solid var(--line);
}
.appointment-delete-dialog-card > footer .secondary-button { grid-column: 1; }
.appointment-delete-dialog-card > footer .delete-button { grid-column: 2; }
.appointment-delete-dialog-card > footer .primary-button { grid-column: 1 / -1; }
.appointment-delete-dialog-card > footer button { width:100%; min-height:42px; white-space:normal; line-height:1.2; }
@media (max-width: 520px) {
  .appointment-delete-dialog-card > footer { grid-template-columns:1fr; }
  .appointment-delete-dialog-card > footer .secondary-button,
  .appointment-delete-dialog-card > footer .delete-button,
  .appointment-delete-dialog-card > footer .primary-button { grid-column:1; }
}

.appointment-alerts-dialog::backdrop { background: rgba(7, 32, 38, .5); backdrop-filter: blur(3px); }
.appointment-alerts-dialog-card { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: min(820px, calc(100dvh - 30px)); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.appointment-alerts-dialog-card > header,
.appointment-alerts-dialog-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; }
.appointment-alerts-dialog-card > header { background: linear-gradient(115deg, color-mix(in srgb, #3979a8 15%, var(--panel)), color-mix(in srgb, #36a18b 12%, var(--panel))); border-bottom: 1px solid var(--line); }
.appointment-alerts-dialog-card > header h2,
.appointment-alerts-dialog-card > header p { margin: 0; }
.appointment-alerts-dialog-card > header p { color: var(--muted); }
.appointment-alerts-dialog-card > footer { justify-content: flex-end; border-top: 1px solid var(--line); }
.appointment-alerts-summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--primary) 3%, var(--panel)); }
.appointment-alerts-summary span { color: var(--muted); }
.appointment-alerts-list { display: grid; align-content: start; gap: 7px; min-height: 180px; padding: 12px 18px; overflow: auto; }
.appointment-alerts-list article { display: grid; grid-template-columns: 105px minmax(220px, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, var(--panel), color-mix(in srgb, #3979a8 4%, var(--panel))); }
.appointment-alerts-list time,
.appointment-alerts-list article > div { display: grid; min-width: 0; }
.appointment-alerts-list time { color: var(--muted); font-size: 11px; }
.appointment-alerts-list time strong { color: var(--primary); font-size: 16px; }
.appointment-alerts-list article > div span,
.appointment-alerts-list article > div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.appointment-alert-unavailable { color: #a95762; font-size: 12px; font-weight: 700; }

.patient-only-mode .records-panel .table-wrap { overflow: auto; }
.patient-only-mode .records-panel table { min-width: 820px; }
.patient-only-mode .records-panel thead { position: sticky; top: 0; z-index: 2; }
.patient-only-mode .records-panel tbody tr:hover { background: color-mix(in srgb, var(--primary) 6%, var(--panel)); }

#appointmentListWrap { height: 100%; overflow: auto; }
#appointmentListWrap table { min-width: 1180px; }
#appointmentListWrap thead { position: sticky; top: 0; z-index: 3; }
#appointmentListWrap td { vertical-align: middle; }
#appointmentListWrap .row-actions { min-width: 430px; align-items: center; }

/* PEP clinical workspace refinement */
:root {
  --clinical-gradient-main: linear-gradient(118deg, color-mix(in srgb, var(--primary) 92%, #3979a8), color-mix(in srgb, var(--accent) 78%, #36a18b));
  --clinical-gradient-soft: linear-gradient(118deg, color-mix(in srgb, var(--primary) 14%, var(--panel)), color-mix(in srgb, var(--accent) 10%, var(--panel)));
  --clinical-gradient-surface: linear-gradient(145deg, color-mix(in srgb, var(--primary) 4%, var(--panel)), color-mix(in srgb, #3979a8 6%, var(--panel)));
  --clinical-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 12%, transparent);
}
[data-module-subnav="prontuario"] {
  display: flex;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 6%, var(--panel)), color-mix(in srgb, var(--accent) 4%, var(--panel)));
}
[data-module-subnav="prontuario"] .feature-tab { flex: 0 0 auto; min-height: 36px; padding: 7px 15px; border-radius: 8px; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
[data-module-subnav="prontuario"] .feature-tab:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--primary) 8%, var(--panel)); }
[data-module-subnav="prontuario"] .feature-tab.active { background: linear-gradient(115deg, var(--primary), color-mix(in srgb, var(--primary) 68%, var(--accent))); color: #fff; box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 22%, transparent); }
[data-module-subnav="prontuario"] .feature-tab:focus-visible,
.appointment-week-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

.patient-center-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.patient-center-heading h2 { margin: 0; }
.patient-active-count { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, #25825f 12%, var(--panel)); color: #25825f; font-size: 12px; font-weight: 800; }
.patient-only-mode .records-panel table { min-width: 980px; }
.patient-only-mode .records-panel tbody tr:nth-child(even) { background: color-mix(in srgb, var(--primary) 2%, var(--panel)); }
.patient-only-mode .records-panel tbody td { padding-block: 11px; }
.patient-only-mode .records-panel th:first-child { width: 31%; }
.patient-only-mode .records-panel th:nth-child(2) { width: 13%; }
.patient-only-mode .records-panel th:last-child { width: 240px; }

#medicalRecordsView:not(.patient-only-mode) .evolution-panel {
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.25fr);
  grid-template-areas: "heading heading" "patient patient" "vivo vivo" "pending pending" "anamnesis evolution" "history history";
  align-content: start;
  gap: 12px;
  padding: 14px;
}
#medicalRecordsView:not(.patient-only-mode) .evolution-workspace-header { grid-area: heading; margin: -14px -14px 0; }
#medicalRecordsView:not(.patient-only-mode) .evolution-patient-summary { grid-area: patient; position: sticky; top: 0; z-index: 7; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(10px); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 8%, transparent); }
#medicalRecordsView:not(.patient-only-mode) .prontuario-vivo-panel { grid-area: vivo; }
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-panel { grid-area: pending; min-width: 0; margin: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line)); border-left: 4px solid var(--accent); border-radius: 9px; background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--accent) 5%, var(--panel))); }
#medicalRecordsView:not(.patient-only-mode) .evolution-panel { grid-template-areas: "heading heading" "patient patient" "vivo vivo" "pending pending" "anamnesis evolution" "history history"; }
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-panel > .records-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-panel h3 { margin: 0; font-size: 15px; }
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-appointment { display: grid; gap: 4px; min-width: 0; padding: 10px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-appointment:hover,
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-appointment.selected { border-color: var(--accent); box-shadow: 0 5px 15px color-mix(in srgb, var(--accent) 14%, transparent); }
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-appointment strong,
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-appointment span,
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-appointment small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-appointment span,
#medicalRecordsView:not(.patient-only-mode) .pending-evolution-appointment small { color: var(--muted); font-size: 11px; }
#medicalRecordsView:not(.patient-only-mode) .anamnesis-consult-message { margin: 12px; padding: 11px; border: 1px solid color-mix(in srgb, #7b5aa6 32%, var(--line)); border-radius: 8px; color: var(--muted); background: color-mix(in srgb, #7b5aa6 7%, var(--panel)); }
#medicalRecordsView:not(.patient-only-mode) .anamnesis-panel { grid-area: anamnesis; min-width: 0; margin: 0; border: 1px solid var(--line); border-left: 4px solid #7b5aa6; border-radius: 9px; background: linear-gradient(145deg, var(--panel), color-mix(in srgb, #7b5aa6 5%, var(--panel))); }
#medicalRecordsView:not(.patient-only-mode) #evolutionForm { grid-area: evolution; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 9px; background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--primary) 4%, var(--panel))); }
#medicalRecordsView:not(.patient-only-mode) #evolutionForm > .form-grid,
#medicalRecordsView:not(.patient-only-mode) #evolutionForm > .evolution-procedures,
#medicalRecordsView:not(.patient-only-mode) #evolutionForm > .form-actions,
#medicalRecordsView:not(.patient-only-mode) #evolutionForm > .message { grid-column: 1 / -1; }
#medicalRecordsView:not(.patient-only-mode) #evolutionForm textarea { min-height: 92px; resize: vertical; }
#medicalRecordsView:not(.patient-only-mode) #evolutionForm .evolution-timing-grid { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
#medicalRecordsView:not(.patient-only-mode) #evolutionForm label:has(textarea[name="summary"]) { grid-column: 1 / -1; }
#medicalRecordsView:not(.patient-only-mode) #evolutionForm > .form-actions,
#medicalRecordsView:not(.patient-only-mode) .anamnesis-panel form > .form-actions { position: sticky; bottom: 0; z-index: 5; margin: 0 -8px -8px; padding: 10px 8px 8px; background: color-mix(in srgb, var(--panel) 91%, transparent); backdrop-filter: blur(9px); border-top: 1px solid var(--line); }
#medicalRecordsView:not(.patient-only-mode) .evolution-history-layout { grid-area: history; display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); max-height: 360px; min-height: 220px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
#medicalRecordsView:not(.patient-only-mode) .evolution-tree-panel,
#medicalRecordsView:not(.patient-only-mode) .evolution-detail { min-height: 0; overflow: auto; }

.appointment-dashboard { min-height: 0; overflow: auto; }
.appointment-dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.appointment-dashboard-grid > article { min-height: 210px; background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--primary) 2.5%, var(--panel))); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 7%, transparent); }
.appointment-dashboard-grid .appointment-chart-wide { grid-column: span 2; }
.appointment-status-chart { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 14px; }
.clinical-donut { display: grid; place-content: center; width: 142px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at center, var(--panel) 0 51%, transparent 52%), conic-gradient(var(--segments)); text-align: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent); }
.clinical-donut strong { font-size: 28px; color: var(--primary); }
.clinical-donut span { color: var(--muted); font-size: 11px; }
.clinical-chart-legend { display: grid; gap: 7px; }
.clinical-chart-legend span { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 7px; font-size: 12px; }
.clinical-chart-legend i { width: 10px; height: 10px; border-radius: 50%; }
.appointment-horizontal-chart { display: grid; align-content: center; gap: 10px; }
.appointment-horizontal-chart > div { display: grid; grid-template-columns: minmax(100px, 140px) minmax(80px, 1fr) 26px; align-items: center; gap: 8px; }
.appointment-horizontal-chart span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.appointment-horizontal-chart i { height: 10px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--primary) 8%, var(--panel)); }
.appointment-horizontal-chart i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3979a8, #36a18b); }
.appointment-visit-chart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: calc(100% - 34px); align-items: center; }
.appointment-visit-chart > div { display: grid; place-content: center; min-height: 120px; padding: 15px; border-radius: 12px; text-align: center; background: linear-gradient(145deg, color-mix(in srgb, #7b5aa6 10%, var(--panel)), color-mix(in srgb, #3979a8 7%, var(--panel))); }
.appointment-visit-chart strong { color: #7b5aa6; font-size: 30px; }
.appointment-visit-chart span { color: var(--muted); font-size: 12px; }
.appointment-upcoming { display: grid; align-content: start; gap: 7px; max-height: 180px; overflow: auto; }
.appointment-upcoming article { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 8px; border-bottom: 1px solid var(--line); }
.appointment-upcoming time,.appointment-upcoming article > div { display: grid; }
.appointment-upcoming time { color: var(--muted); font-size: 10px; }
.appointment-upcoming time strong { color: var(--primary); font-size: 14px; }
.appointment-upcoming article > div span { color: var(--muted); font-size: 11px; }

.appointment-week-columns { grid-template-columns: repeat(7, minmax(240px, 1fr)); width: max(100%, 1680px); }
.appointment-week-day.is-today { box-shadow: inset 0 3px 0 var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--panel)); }
.appointment-week-meta { display: grid; gap: 4px; min-width: 0; }
.appointment-week-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.appointment-week-meta .appointment-payment-badge { margin: 0; }
#appointmentListWrap table { min-width: 1380px; }
#appointmentListWrap td:nth-child(7) { min-width: 170px; }
#appointmentListWrap td:nth-child(7) .appointment-payment-action { display: block; width: 100%; margin-top: 6px; }
#appointmentListWrap .row-actions { min-width: 330px; }

/* Correct the legacy week grid: the planner is one full-width child, not one of seven columns. */
.appointment-board[data-view="week"] { display: grid; grid-template-columns: minmax(0, 1fr) !important; width: 100%; min-width: 0; height: 100%; padding: 0; overflow: hidden; }
.appointment-board[data-view="week"] > .appointment-week-planner { width: 100%; min-width: 0; height: 100%; }
.appointment-week-columns { width: 100%; min-width: 1680px; }
.appointment-week-day > header { background: var(--clinical-gradient-soft); }
.appointment-week-planner > header,
.appointment-day-roster > header,
.appointment-results-heading,
.evolution-workspace-header,
.pep-agenda-settings-panel > header { background: var(--clinical-gradient-soft); }
.appointment-week-card { background: var(--clinical-gradient-surface); }
.appointment-kpi { min-height: 92px; border-top-width: 4px; box-shadow: 0 7px 18px color-mix(in srgb, var(--kpi-color, var(--primary)) 12%, transparent); }
.appointment-kpi-scheduled { background: linear-gradient(145deg, color-mix(in srgb, #3979a8 18%, var(--panel)), color-mix(in srgb, #3979a8 5%, var(--panel))); }
.appointment-kpi-confirmed { background: linear-gradient(145deg, color-mix(in srgb, #1687aa 18%, var(--panel)), color-mix(in srgb, #1687aa 5%, var(--panel))); }
.appointment-kpi-attended { background: linear-gradient(145deg, color-mix(in srgb, #25825f 18%, var(--panel)), color-mix(in srgb, #25825f 5%, var(--panel))); }
.appointment-kpi-missed { background: linear-gradient(145deg, color-mix(in srgb, #c07a32 18%, var(--panel)), color-mix(in srgb, #c07a32 5%, var(--panel))); }
.appointment-kpi-cancelled { background: linear-gradient(145deg, color-mix(in srgb, #a95762 18%, var(--panel)), color-mix(in srgb, #a95762 5%, var(--panel))); }
.appointment-kpi-first { background: linear-gradient(145deg, color-mix(in srgb, #7b5aa6 18%, var(--panel)), color-mix(in srgb, #7b5aa6 5%, var(--panel))); }
.appointment-kpi-payment { background: linear-gradient(145deg, color-mix(in srgb, #b08a25 18%, var(--panel)), color-mix(in srgb, #b08a25 5%, var(--panel))); }

.pep-agenda-settings-panel { display: grid; gap: 14px; padding: clamp(14px, 2vw, 24px); border: 1px solid var(--line); border-radius: 12px; background: var(--clinical-gradient-surface); box-shadow: var(--clinical-shadow); }
.pep-agenda-settings-panel > header { margin: calc(clamp(14px, 2vw, 24px) * -1) calc(clamp(14px, 2vw, 24px) * -1) 0; padding: 16px 20px; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.pep-agenda-settings-panel h2,.pep-agenda-settings-panel p { margin-top: 0; }
.pep-agenda-settings-panel .appointment-settings { border: 0; background: transparent; padding: 0; }
.pep-agenda-settings-panel .appointment-settings > summary { display: none; }
.pep-agenda-settings-panel .appointment-setting-row { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }

@media (max-width: 1180px) {
  #medicalRecordsView:not(.patient-only-mode) .evolution-panel { grid-template-columns: 1fr; grid-template-areas: "heading" "patient" "vivo" "anamnesis" "evolution" "history"; }
  .appointment-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-dashboard-grid .appointment-chart-wide { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .patient-center-heading { align-items: flex-start; flex-direction: column; }
  .appointment-dashboard-grid { grid-template-columns: 1fr; }
  .appointment-dashboard-grid .appointment-chart-wide { grid-column: auto; }
  .appointment-status-chart { grid-template-columns: 1fr; justify-items: center; }
  #medicalRecordsView:not(.patient-only-mode) .evolution-history-layout { grid-template-columns: 1fr; max-height: 520px; }
  #medicalRecordsView:not(.patient-only-mode) .pending-evolution-panel > .records-header { align-items: flex-start; flex-direction: column; }
  #medicalRecordsView:not(.patient-only-mode) .pending-evolution-list { grid-template-columns: 1fr; }
  #medicalRecordsView:not(.patient-only-mode) #evolutionForm .evolution-timing-grid { grid-template-columns: 1fr; }
  #medicalRecordsView:not(.patient-only-mode) .evolution-panel { grid-template-areas: "heading" "patient" "vivo" "pending" "anamnesis" "evolution" "history"; }
}

.appointment-birthday-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.appointment-birthday-person > span { font-size: 21px; }
.appointment-birthday-person > div { display: grid; min-width: 0; }
.appointment-birthday-person small { color: var(--muted); }

@media (max-width: 620px) {
  .appointment-birthday-dialog-content { grid-template-columns: 1fr; }
}

.appointment-timeline-actions {
  position: absolute;
  z-index: 4;
  right: 4px;
  bottom: 4px;
  display: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
  max-width: calc(100% - 8px);
}

.appointment-timeline-card:hover,
.appointment-timeline-card:focus-within {
  z-index: 6;
  min-height: 82px;
  overflow: visible;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 22%, transparent);
}

.appointment-timeline-card:hover .appointment-timeline-actions,
.appointment-timeline-card:focus-within .appointment-timeline-actions { display: flex; }
.appointment-timeline-actions button { min-height: 25px; padding: 3px 6px; font-size: 10px; }

@media (max-width: 1050px) {
  .appointment-toolbar { flex-wrap: wrap; }
  .appointment-toolbar-controls { width: 100%; flex-basis: 100%; }
  .appointment-layout { grid-template-columns: 1fr; }
  .appointment-editor { position: static; }
  .appointment-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-filters button { grid-column: 1 / -1; }
  .appointment-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .appointment-dashboard-grid { grid-template-columns: 1fr; }
  .appointment-roster-grid { grid-template-columns: 1fr; }
  .appointment-alerts-list article { grid-template-columns: 90px minmax(180px, 1fr) auto; }
  .appointment-alerts-list article > :last-child { grid-column: 2 / -1; justify-self: start; }
}

@media (max-width: 700px) {
  .appointment-toolbar,
  .appointment-toolbar-actions { align-items: stretch; flex-direction: column; }
  .appointment-filters { grid-template-columns: 1fr; }
  .appointment-procedure-picker,
  .appointment-procedure-row { grid-template-columns: 1fr; }
  .appointment-slot { grid-template-columns: 62px minmax(0, 1fr); }
  .appointment-slot-actions { grid-column: 1 / -1; justify-content: stretch; }
  .appointment-slot-actions button { flex: 1 1 auto; }
  .appointment-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-roster-card { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "time patient" "state state" "actions actions"; }
  .appointment-roster-state { justify-items: start; }
  .appointment-roster-actions { justify-content: stretch; }
  .appointment-roster-actions button { flex: 1 1 auto; }
  .appointment-alerts-list article { grid-template-columns: 1fr; }
  .appointment-alerts-list article > :last-child { grid-column: 1; }
}

.billing-pending-filters {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 10px;
}

.billing-history-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
  max-width: 980px;
}

.billing-pending-filters label,
.billing-history-filters label,
.billing-generate-bar label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.billing-pending-filters input,
.billing-pending-filters select,
.billing-history-filters input,
.billing-history-filters select,
.billing-generate-bar input {
  width: 100%;
  min-width: 0;
}

.billing-generate-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--border);
  background: #f5fafa;
}

.billing-generate-bar .production-summary {
  padding: 0;
  border: 0;
}

.billing-detail {
  display: grid;
  gap: 16px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 2px solid var(--primary);
}

.billing-detail-header {
  align-items: flex-start;
}

.billing-adjust-input,
.billing-note-input {
  width: 120px;
  min-width: 90px;
}

.billing-note-input {
  width: 190px;
}

@media (max-width: 1180px) {
  .billing-pending-filters {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }

  .billing-generate-bar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .billing-pending-filters,
  .billing-history-filters,
  .billing-generate-bar {
    grid-template-columns: 1fr;
  }
}

/* Portal and primary navigation */
html,
body,
#appShell {
  max-width: 100%;
}

.topbar {
  min-height: 76px;
  gap: 16px;
  padding: 10px clamp(16px, 2.4vw, 32px);
}

.topbar-brand {
  gap: 12px;
  flex: 1 1 auto;
}

.topbar-brand-copy {
  min-width: 0;
}

.system-top-logo {
  width: 88px;
  max-height: 44px;
}

.topbar-brand .eyebrow {
  margin-bottom: 2px;
  font-size: 10px;
}

.brand-line {
  gap: 8px;
  min-width: 0;
}

.brand-line h1 {
  max-width: min(34vw, 460px);
  overflow: hidden;
  font-size: 20px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-company-logo {
  width: 34px;
  height: 34px;
  padding: 3px;
}

.company-context {
  margin-top: 2px;
  font-size: 11px;
}

.multi-company-badge {
  flex: 0 0 auto;
  min-height: 22px;
  border: 1px solid rgba(37, 111, 104, 0.22);
  border-radius: 999px;
  padding: 4px 8px;
  color: #1d625d;
  background: #edf7f5;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.topbar-actions {
  justify-content: flex-end;
  flex: 0 1 auto;
  gap: 7px;
  min-width: 0;
}

.topbar-clock,
.user-badge {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11px;
}

.topbar-clock {
  min-width: 144px;
}

.user-badge {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .secondary-button {
  min-height: 34px;
  padding: 0 11px;
  white-space: nowrap;
}

.topbar-refresh-button {
  min-width: 0;
}

.topbar-menu-button {
  display: none;
}

.module-nav {
  display: flex;
  position: relative;
  z-index: 110;
  width: min(100%, 1360px);
  margin: 0 auto;
  padding: 10px 24px 12px;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid rgba(37, 111, 104, 0.12);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--menu-gradient);
  box-shadow: 0 10px 28px rgba(23, 50, 60, 0.06);
}

.nav-primary-section {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-primary-group {
  flex-wrap: wrap;
  min-width: 0;
}

.module-nav .tab-button {
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.15;
  white-space: normal;
}

.nav-menu {
  position: relative;
  flex: 0 0 auto;
}

.nav-menu summary {
  min-height: 34px;
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  padding: 9px 28px 8px 11px;
  color: #35545e;
  background: var(--control-gradient);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
  line-height: 1.15;
  white-space: normal;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary::after {
  content: "+";
  position: absolute;
  top: 8px;
  right: 11px;
  color: var(--primary);
  font-size: 14px;
}

.nav-menu[open] summary {
  border-color: transparent;
  color: #ffffff;
  background: var(--action-gradient);
  box-shadow: 0 10px 22px rgba(37, 111, 104, 0.18);
}

.nav-menu[open] summary::after {
  content: "-";
  color: #ffffff;
}

.nav-menu-panel {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 200;
  display: grid;
  width: max-content;
  min-width: 210px;
  max-width: min(320px, calc(100vw - 24px));
  gap: 6px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface-gradient);
  box-shadow: 0 18px 44px rgba(13, 49, 61, 0.16);
}

.nav-menu.management-group .nav-menu-panel,
.module-nav > .nav-menu:nth-last-of-type(-n + 2) .nav-menu-panel {
  right: 0;
  left: auto;
}

.nav-menu-panel .tab-button,
.nav-menu-panel .nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  justify-content: flex-start;
  text-align: left;
  text-decoration: none;
}

.portal-layout {
  width: min(100%, 1360px);
  min-height: calc(100vh - 150px);
  margin: 0 auto;
  gap: 16px;
  padding: 18px clamp(14px, 2.4vw, 32px) 40px;
}

.portal-hero {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  min-height: 188px;
  gap: 20px;
  padding: 20px 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 249, 246, 0.96) 55%, rgba(238, 247, 251, 0.96) 100%),
    linear-gradient(90deg, rgba(37, 111, 104, 0.1), rgba(44, 86, 150, 0.08));
  box-shadow: 0 12px 32px rgba(23, 50, 60, 0.08);
}

.portal-company-brand {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
}

.portal-company-logo {
  width: 220px;
  height: 126px;
  padding: 10px;
  box-shadow: 0 12px 28px rgba(23, 50, 60, 0.12);
}

.portal-hero h2 {
  margin: 2px 0 6px;
  font-size: 26px;
}

.portal-hero-panel {
  gap: 7px;
  padding-left: 20px;
}

.portal-active-company {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.portal-active-company img {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(37, 111, 104, 0.16);
  border-radius: 8px;
  padding: 5px;
  object-fit: contain;
  background: #ffffff;
}

.portal-active-company strong {
  overflow: hidden;
  color: #0b435b;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-meta-grid article {
  padding: 8px 10px;
}

.portal-insights {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.portal-insight-card {
  min-height: 86px;
  padding: 11px 12px;
  box-shadow: 0 8px 22px rgba(23, 50, 60, 0.06);
}

.portal-insight-card strong {
  overflow-wrap: anywhere;
  font-size: 16px;
}

.portal-insight-card small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.portal-quick-access {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 4px 2px 12px;
  border-bottom: 1px solid rgba(197, 215, 219, 0.9);
}

.portal-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.portal-quick-button {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  gap: 8px;
  border: 1px solid rgba(197, 215, 219, 0.95);
  border-radius: 6px;
  padding: 7px 10px;
  color: #214d58;
  background: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

.portal-quick-button:hover {
  border-color: rgba(37, 111, 104, 0.38);
  background: #eef7f6;
}

.portal-quick-button span {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 5px;
  color: #ffffff;
  background: linear-gradient(135deg, #256f68, #1687aa);
  font-size: 9px;
  font-weight: 900;
}

.portal-control-panel {
  padding: 11px 12px;
  box-shadow: 0 8px 22px rgba(23, 50, 60, 0.05);
}

@media (max-width: 1240px) {
  .module-nav {
    flex-wrap: wrap;
  }

  .nav-primary-section {
    width: 100%;
    flex-basis: 100%;
  }

  .nav-primary-group {
    flex-wrap: wrap;
  }

  .management-group {
    margin-left: 0;
  }

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

@media (min-width: 761px) and (max-width: 980px) {
  body.mobile-nav-open {
    overflow: hidden;
  }

  .topbar-menu-button {
    display: inline-flex;
    align-items: center;
  }

  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 390;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(8, 28, 38, 0.48);
  }

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

  .module-nav {
    display: none;
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 400;
    width: min(88vw, 390px);
    height: 100dvh;
    margin: 0;
    padding: 18px 16px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: -20px 0 44px rgba(8, 28, 38, 0.2);
    transform: none;
  }

  .mobile-nav-open .module-nav {
    display: flex;
    transform: none;
  }

  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .mobile-nav-header span,
  .mobile-nav-header strong {
    display: block;
  }

  .mobile-nav-close {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #f5f8f9;
  }

  .nav-primary-section,
  .nav-menu {
    width: 100%;
  }

  .nav-primary-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .module-nav .tab-button {
    width: 100%;
    min-height: 42px;
    white-space: normal;
  }

  .nav-menu summary {
    width: 100%;
  }

  .nav-menu-panel {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 7px;
    box-shadow: none;
  }

  .mobile-nav-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  .portal-hero {
    grid-template-columns: 1fr;
  }

  .portal-hero-panel {
    padding: 12px 0 0;
    border-top: 1px solid rgba(37, 111, 104, 0.2);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .module-nav {
    display: none;
    transform: none;
  }

  .mobile-nav-open .module-nav {
    display: flex;
    transform: none;
  }

  .topbar {
    min-height: 0;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto auto;
    width: 100%;
    gap: 5px;
  }

  .topbar-clock,
  .user-badge,
  .topbar-refresh-button {
    display: block;
    width: auto;
    min-width: 0;
  }

  .user-badge {
    max-width: none;
  }

  .multi-company-badge {
    display: none;
  }

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

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

  .portal-hero-panel {
    width: 100%;
    padding: 12px 0 0;
    border-top: 1px solid rgba(37, 111, 104, 0.2);
    border-left: 0;
  }

  .portal-company-brand {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .portal-company-logo {
    width: 160px;
    height: 94px;
  }
}

@media (max-width: 520px) {
  .topbar-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .topbar-clock,
  .user-badge,
  .topbar-refresh-button,
  .topbar-actions .secondary-button {
    width: 100%;
  }

  .portal-layout {
    padding-inline: 10px;
  }

  .portal-company-brand {
    grid-template-columns: 1fr;
  }

  .portal-company-logo {
    width: min(220px, 78vw);
    height: 120px;
  }

  .portal-insights,
  .portal-quick-grid {
    grid-template-columns: 1fr;
  }
}

.commerce-sale-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.commerce-sale-products,
.commerce-sale-cart {
  min-width: 0;
}

.commerce-product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.commerce-product-tile {
  display: grid;
  min-height: 138px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.commerce-product-tile:hover,
.commerce-product-tile:focus-visible {
  border-color: rgba(37, 111, 104, 0.45);
  box-shadow: 0 10px 24px rgba(23, 32, 38, 0.08);
  transform: translateY(-1px);
}

.commerce-product-tile span,
.commerce-product-tile small {
  color: var(--muted);
  font-size: 12px;
}

.commerce-product-tile strong {
  align-self: start;
  line-height: 1.25;
}

.commerce-product-tile em {
  align-self: end;
  color: var(--primary-dark);
  font-style: normal;
  font-weight: 700;
}

.commerce-cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfb;
}

.commerce-cart-total span {
  color: var(--muted);
}

.commerce-cart-total strong {
  font-size: 1.2rem;
}

.commerce-cart-input {
  width: 78px;
  min-width: 78px;
  padding-inline: 8px;
}

.commerce-cart-money {
  width: 86px;
  min-width: 86px;
}

.commerce-payment-summary {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: right;
}

.commerce-order-item-entry {
  align-items: end;
}

.commerce-inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

.commerce-inline-form button {
  min-height: 42px;
}

.records-header .header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.commerce-order-actions {
  min-width: 280px;
}

.commerce-order-actions select,
.commerce-order-actions input {
  min-width: 150px;
}

.commerce-order-actions input {
  max-width: 160px;
}

.commerce-production-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.commerce-production-column {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfb;
}

.commerce-production-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.commerce-production-column h3 {
  margin: 0;
  font-size: 1rem;
}

.commerce-production-column header span {
  color: var(--muted);
  font-weight: 700;
}

.commerce-production-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.commerce-production-card header {
  display: grid;
  gap: 6px;
}

.commerce-production-card p {
  margin: 0;
  color: var(--muted);
}

.commerce-options-grid {
  margin: 8px 0;
}

.settings-subsection {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(37, 111, 104, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.settings-subsection legend {
  padding: 0 8px;
  color: var(--text);
  font-weight: 800;
}

.commerce-tab-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 250, 249, 0.98) 54%, rgba(241, 247, 252, 0.98)),
    var(--panel);
  border-color: rgba(37, 111, 104, 0.18);
  box-shadow: 0 18px 44px rgba(22, 70, 78, 0.08);
}

.commerce-summary-filters {
  grid-template-columns: repeat(4, minmax(140px, 190px)) minmax(190px, 260px) auto;
  align-items: end;
}

.commerce-summary-periods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.commerce-summary-period-card { min-width: 0; }
.commerce-summary-period-card .crm-summary-cards > .dashboard-cards { grid-template-columns: repeat(2, minmax(min(100%, 230px), 1fr)); width: 100%; }
.commerce-summary-period-card .crm-summary-cards > .dashboard-cards article { min-width: 0; overflow: visible; width: 100%; }
.commerce-summary-period-card .crm-summary-cards > .dashboard-cards article strong { white-space: nowrap; font-size: clamp(1.25rem, 2vw, 1.8rem); }
.commerce-summary-period-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.commerce-summary-period-heading h3 { margin: 0; }
.commerce-summary-period-heading span { color: var(--muted-text, #547080); font-size: 0.78rem; }
.commerce-summary-payments { border-top: 1px solid rgba(38, 101, 117, 0.18); margin-top: 14px; padding-top: 12px; }
.commerce-summary-payments h4 { margin: 0 0 8px; }
.commerce-summary-payment { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }

@media (max-width: 820px) {
  .commerce-summary-filters, .commerce-summary-periods, .commerce-summary-period-card .crm-summary-cards > .dashboard-cards { grid-template-columns: 1fr; }
}

.commerce-tab-panel .dashboard-section,
.commerce-tab-panel .chart-section {
  padding: 16px;
  border: 1px solid rgba(37, 111, 104, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 248, 0.98) 62%, rgba(239, 247, 252, 0.98));
  box-shadow: 0 14px 34px rgba(23, 50, 60, 0.07);
}

.commerce-tab-panel .dashboard-section h3,
.commerce-tab-panel .chart-section h3 {
  color: #123f47;
  font-size: 17px;
  font-weight: 850;
}

.commerce-tab-panel .dashboard-cards article {
  border-color: color-mix(in srgb, var(--card-accent, #1687aa) 40%, #d5e5e8);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent-soft, #dff6f0) 28%, #ffffff), #f9fcfb 54%, color-mix(in srgb, var(--card-accent, #1687aa) 8%, #ffffff)),
    var(--panel);
  box-shadow: 0 15px 34px rgba(22, 70, 78, 0.09);
}

.commerce-tab-panel .table-wrap {
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(23, 50, 60, 0.06);
}

.commerce-tabbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.commerce-tabbar .module-tabs {
  min-width: 0;
}

.commerce-settings-subtabs {
  display: flex;
  gap: 6px;
  margin: -2px 0 18px;
  padding: 4px;
  border: 1px solid rgba(37, 111, 104, 0.18);
  border-radius: 8px;
  background: rgba(236, 247, 246, 0.82);
}

.commerce-settings-subtabs .feature-tab {
  flex: 0 1 240px;
  min-height: 40px;
  border-radius: 6px;
}

.commerce-fiscal-rules-panel {
  margin: 0 0 14px;
}

.commerce-fiscal-rules-panel > .panel-copy {
  margin: -4px 0 14px;
}

.commerce-fiscal-operational-panel > .crm-summary-cards {
  margin: 4px 0 16px;
}

.commerce-tab-print-button {
  align-self: stretch;
  min-width: 128px;
  border-radius: 8px;
}

.commerce-products-panel {
  width: min(100%, 1480px);
  margin-inline: auto;
}

.commerce-products-header {
  align-items: start;
  gap: 16px;
}

.commerce-products-header .compact-filters {
  grid-template-columns: minmax(180px, 300px) minmax(170px, 210px) repeat(2, auto);
  align-items: end;
}

.commerce-products-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 14px;
  align-items: start;
}

.commerce-product-editor-card,
.commerce-category-card,
.commerce-technical-card,
.commerce-category-list-card,
.commerce-product-list-card {
  min-width: 0;
}

.commerce-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.commerce-section-title h3 {
  margin: 0;
}

.commerce-section-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.commerce-product-form {
  gap: 10px;
}

.commerce-product-main-grid,
.commerce-product-price-grid,
.commerce-product-fiscal-grid {
  display: grid;
  gap: 10px;
}

.commerce-product-main-grid {
  grid-template-columns: minmax(220px, 1.3fr) minmax(112px, 0.48fr) minmax(160px, 0.72fr) minmax(170px, 0.72fr);
}

.commerce-product-price-grid {
  grid-template-columns: repeat(6, minmax(104px, 1fr));
}

.commerce-product-fiscal-grid {
  grid-template-columns: minmax(84px, 0.55fr) minmax(108px, 0.7fr) minmax(98px, 0.65fr) minmax(112px, 0.75fr) minmax(140px, 0.9fr) minmax(180px, 1.25fr);
}

.commerce-product-form input,
.commerce-product-form select,
.commerce-category-form input {
  min-height: 42px;
}

.commerce-product-options-grid {
  grid-template-columns: repeat(5, minmax(132px, 1fr));
  gap: 8px;
  margin: 2px 0;
}

.commerce-product-options-grid .permission-item {
  min-height: 42px;
  padding: 8px 10px;
}

.commerce-product-form-actions {
  justify-content: flex-start;
}

.commerce-category-form {
  gap: 10px;
}

.commerce-products-bottom-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.commerce-product-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -18px -18px 14px;
  padding: 15px 18px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(100deg, #17645e 0%, #1687aa 54%, #319a70 100%);
  color: #ffffff;
}

.commerce-product-list-card .commerce-product-list-heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  white-space: nowrap;
}

.commerce-product-totalizer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.commerce-product-totalizer span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.commerce-product-totalizer strong {
  color: #ffffff;
  font-size: 13px;
}

.commerce-product-list-card .table-wrap table {
  min-width: 1460px;
  table-layout: fixed;
}

.commerce-products-table th,
.commerce-products-table td {
  padding: 10px 11px;
  vertical-align: middle;
  white-space: nowrap;
}

.commerce-products-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom-color: rgba(23, 100, 94, 0.2);
  background: linear-gradient(180deg, #e2f3f1 0%, #dcecf5 100%);
  color: #174f58;
}

.commerce-products-table tbody tr:nth-child(odd) td {
  background: #ffffff;
}

.commerce-products-table tbody tr:nth-child(even) td {
  background: #f0f8f7;
}

.commerce-products-table tbody tr:hover td {
  background: #e3f3f1;
}

.commerce-products-table th:nth-child(1) { width: 76px; }
.commerce-products-table th:nth-child(2) { width: 310px; }
.commerce-products-table th:nth-child(3) { width: 170px; }
.commerce-products-table th:nth-child(4) { width: 112px; }
.commerce-products-table th:nth-child(5),
.commerce-products-table th:nth-child(6),
.commerce-products-table th:nth-child(7) { width: 112px; }
.commerce-products-table th:nth-child(8) { width: 238px; }
.commerce-products-table th:nth-child(9) { width: 116px; }
.commerce-products-table th:nth-child(10) { width: 220px; }

.commerce-product-code,
.commerce-product-name,
.commerce-product-fiscal {
  overflow: hidden;
  text-overflow: ellipsis;
}

.commerce-product-name strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.commerce-product-code,
.commerce-product-money {
  font-variant-numeric: tabular-nums;
}

.commerce-product-money {
  text-align: right;
}

.commerce-products-table .row-actions {
  text-align: right;
  white-space: normal;
}

.commerce-products-table .row-actions .secondary-button {
  min-width: 58px;
  min-height: 32px;
  padding: 6px 9px;
  margin: 2px;
}

.permission-action-group-label {
  align-self: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.permission-editor-guidance {
  margin: 8px 0 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.commerce-sale-workbench {
  box-sizing: border-box;
  width: min(100%, 1840px);
  margin-inline: auto;
  padding: clamp(18px, 1.7vw, 28px);
  border-color: rgba(37, 111, 104, 0.22);
  background:
    radial-gradient(circle at 14% 10%, rgba(47, 207, 150, 0.16), transparent 34%),
    radial-gradient(circle at 84% 0%, rgba(22, 135, 170, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(235, 250, 246, 0.98) 52%, rgba(238, 247, 252, 0.98));
  box-shadow: 0 28px 72px rgba(14, 52, 62, 0.14);
}

.commerce-sale-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(37, 111, 104, 0.14);
}

.commerce-sale-header h2 {
  font-size: clamp(23px, 1.8vw, 30px);
  letter-spacing: 0;
}

.commerce-sale-reset {
  min-width: 118px;
}

.commerce-workbench-panel {
  min-width: 0;
  padding: clamp(14px, 1.4vw, 22px);
  border: 1px solid rgba(37, 111, 104, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 251, 0.98) 58%, rgba(239, 248, 252, 0.98));
  box-shadow: 0 16px 42px rgba(22, 70, 78, 0.09);
}

.commerce-sale-layout {
  width: 100%;
  margin-inline: auto;
  grid-template-columns: minmax(480px, 0.9fr) minmax(720px, 1.1fr);
  gap: clamp(18px, 1.7vw, 28px);
  justify-content: center;
  align-items: start;
}

.commerce-sale-products {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 251, 247, 0.98)),
    linear-gradient(90deg, rgba(47, 207, 150, 0.08), rgba(22, 135, 170, 0.06));
}

.commerce-sale-cart {
  border-color: rgba(22, 135, 170, 0.24);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(242, 251, 249, 0.98) 52%, rgba(236, 248, 252, 0.98));
  box-shadow: 0 22px 52px rgba(16, 70, 82, 0.13);
}

.commerce-sale-searchbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 170px);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(37, 111, 104, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.commerce-sale-searchbar input,
.commerce-sale-searchbar select {
  min-width: 0;
  min-height: 46px;
  font-size: 15px;
  font-weight: 750;
}

.commerce-product-gallery {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.commerce-sale-products .empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  margin-top: 16px;
  border: 1px dashed rgba(37, 111, 104, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(232, 247, 244, 0.72));
  color: #43656c;
  font-weight: 850;
  text-align: center;
}

.commerce-product-tile {
  position: relative;
  display: grid;
  gap: 8px;
  width: 100%;
  text-align: left;
  min-height: 146px;
  padding: 14px;
  border-color: rgba(37, 111, 104, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 251, 248, 0.98) 58%, rgba(241, 247, 252, 0.98));
  box-shadow: 0 10px 24px rgba(22, 70, 78, 0.06);
}

.commerce-product-tile:hover,
.commerce-product-tile:focus-visible {
  border-color: rgba(22, 135, 170, 0.45);
  box-shadow: 0 18px 36px rgba(22, 70, 78, 0.12);
}

.commerce-product-tile strong {
  color: #102f36;
  font-size: 15px;
}

.commerce-product-tile em {
  color: #126f66;
  font-size: 16px;
}

.commerce-product-price-modes {
  align-self: end;
  color: #5b747c;
  font-weight: 800;
}

.commerce-product-mode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.commerce-product-mode-button {
  min-height: 34px;
  border: 1px solid rgba(37, 111, 104, 0.2);
  border-radius: 8px;
  padding: 7px 10px;
  color: #0c4944;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 247, 244, 0.96)),
    #ffffff;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.commerce-product-mode-button:hover,
.commerce-product-mode-button:focus-visible {
  border-color: rgba(22, 135, 170, 0.48);
  background: linear-gradient(135deg, #176f67, #1687aa);
  color: #ffffff;
  outline: 3px solid rgba(47, 207, 150, 0.18);
}

.commerce-fiscal-production-note {
  display: block;
  max-width: 220px;
  color: var(--danger);
  font-size: 0.78rem;
  line-height: 1.35;
}

.commerce-fiscal-error-message {
  display: block;
  max-width: 520px;
  margin-top: 4px;
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.commerce-sale-form {
  display: grid;
  gap: 12px;
}

.commerce-sale-context-grid {
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
}

.commerce-client-picker {
  position: relative;
  z-index: 30;
  display: grid;
  min-width: 0;
  gap: 7px;
}

.commerce-client-picker-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.commerce-client-picker-heading label {
  display: block;
}

.commerce-unregistered-client-toggle {
  align-self: end;
  min-height: 42px;
}

.commerce-sale-unregistered-fields {
  grid-template-columns: minmax(220px, 0.7fr) minmax(260px, 1fr);
  align-items: end;
}

.commerce-sale-unregistered-fields > label[hidden] {
  display: none;
}

.commerce-sale-context-grid > label[hidden] {
  display: none;
}

.inline-search {
  display: grid;
  gap: 4px;
  min-width: 220px;
}

.commerce-client-new {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
}

.commerce-client-combobox {
  position: relative;
  min-width: 0;
}

.commerce-client-combobox > input {
  padding-right: 38px;
}

.commerce-client-clear {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.commerce-client-clear:hover,
.commerce-client-clear:focus-visible {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.commerce-client-results {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  z-index: 120;
  max-height: min(300px, 42vh);
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 16px 34px rgba(23, 50, 60, 0.18);
}

.commerce-client-result {
  display: grid;
  width: 100%;
  min-height: 48px;
  gap: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.commerce-client-result + .commerce-client-result {
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.commerce-client-result:hover,
.commerce-client-result.active {
  background: var(--control-gradient);
  outline: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
}

.commerce-client-result span,
.commerce-client-result small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.commerce-client-status {
  min-height: 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.commerce-client-status:empty {
  display: none;
}

.commerce-client-status.error {
  color: var(--danger);
}

.commerce-sale-fiscal-grid {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  padding: 12px;
  border: 1px solid rgba(37, 111, 104, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(243, 251, 249, 0.96)),
    linear-gradient(90deg, rgba(47, 207, 150, 0.08), rgba(22, 135, 170, 0.06));
}

.commerce-fiscal-config-panel {
  margin: 14px 0 18px;
  border-color: rgba(37, 111, 104, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(243, 251, 249, 0.98) 58%, rgba(240, 248, 252, 0.98));
}

.commerce-fiscal-config-panel .form-actions {
  justify-content: flex-start;
}

.commerce-settings-subpanel > .dashboard-section {
  padding: 16px 0;
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.commerce-settings-subpanel > .dashboard-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.commerce-fiscal-export-header {
  margin-top: 8px;
}

.commerce-real-emission-toggle {
  align-items: center;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid rgba(37, 111, 104, 0.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.78), rgba(224, 242, 254, 0.72));
  box-shadow: 0 12px 28px rgba(15, 61, 67, 0.08);
}

.commerce-real-emission-toggle input {
  width: 22px;
  height: 22px;
  accent-color: #1687aa;
}

.commerce-real-emission-toggle span {
  display: grid;
  gap: 2px;
}

.commerce-real-emission-toggle small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.commerce-cart-table {
  width: 100%;
  min-width: 0;
  border-color: rgba(37, 111, 104, 0.16);
  background: #ffffff;
}

.commerce-cart-table table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.commerce-cart-table th:nth-child(1),
.commerce-cart-table td:nth-child(1) {
  width: 28%;
}

.commerce-cart-table th:nth-child(2),
.commerce-cart-table td:nth-child(2) {
  width: 68px;
}

.commerce-cart-table th:nth-child(3),
.commerce-cart-table td:nth-child(3) {
  width: 24%;
}

.commerce-cart-table th:nth-child(4),
.commerce-cart-table td:nth-child(4),
.commerce-cart-table th:nth-child(5),
.commerce-cart-table td:nth-child(5),
.commerce-cart-table th:nth-child(6),
.commerce-cart-table td:nth-child(6) {
  width: 82px;
}

.commerce-cart-table th:nth-child(7),
.commerce-cart-table td:nth-child(7) {
  width: 88px;
}

.commerce-cart-table th:nth-child(8),
.commerce-cart-table td:nth-child(8) {
  width: 42px;
}

.commerce-cart-table th {
  color: #31515a;
  background: linear-gradient(180deg, #f3faf8, #eef6f8);
}

.commerce-cart-input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  font-weight: 800;
}

.commerce-cart-mode {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding-inline: 8px;
  font-weight: 800;
}

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

.commerce-sale-details {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(260px, 1.22fr);
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.commerce-sale-details .commerce-adjustment-grid {
  gap: 8px;
}

.commerce-sale-details .commerce-observation-field textarea {
  min-height: 38px;
  height: 38px;
  resize: none;
}

.commerce-sale-total {
  padding: 16px 20px;
  border-color: rgba(18, 111, 102, 0.3);
  background:
    linear-gradient(135deg, #176f67, #1687aa),
    var(--primary);
  color: #ffffff;
  box-shadow: 0 18px 36px rgba(22, 111, 102, 0.2);
}

.commerce-sale-total span,
.commerce-sale-total strong {
  color: #ffffff;
}

.commerce-sale-total strong {
  font-size: clamp(28px, 2.3vw, 40px);
  line-height: 1;
}

.commerce-payment-grid {
  grid-template-columns: minmax(160px, 1fr) minmax(130px, 0.8fr) minmax(190px, 1fr) minmax(150px, 0.9fr);
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(37, 111, 104, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(246, 252, 251, 0.98), rgba(241, 248, 252, 0.98));
}

.commerce-payment-grid button,
.commerce-sale-form .form-actions button {
  min-height: 44px;
}

.commerce-payment-summary {
  padding: 12px 14px;
  border: 1px solid rgba(37, 111, 104, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: #31515a;
  font-weight: 800;
  text-align: left;
}

.commerce-sale-form .form-actions {
  display: grid;
  justify-content: stretch;
  align-items: center;
  min-height: 66px;
  margin-top: 4px;
  padding: 7px;
  border: 1px solid rgba(25, 124, 132, 0.2);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(232, 247, 244, 0.92), rgba(237, 247, 251, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.commerce-sale-form .form-actions button {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(13, 95, 94, 0.34);
  border-radius: 8px;
  font-size: 17px;
  font-weight: 850;
  background: linear-gradient(135deg, #176f67, #1687aa);
  box-shadow: 0 18px 36px rgba(22, 111, 102, 0.2);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.commerce-sale-form .form-actions button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 28px rgba(18, 102, 108, 0.28);
}

#commerceSaleSubmitButton:disabled {
  border-color: rgba(91, 119, 124, 0.2);
  background: linear-gradient(135deg, #dfe9e8, #dce8eb);
  color: #718489;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

#commerceSaleSubmitButton[aria-busy="true"] {
  border-color: rgba(13, 95, 94, 0.34);
  background: linear-gradient(135deg, #176f67, #1687aa);
  color: #ffffff;
  cursor: wait;
  opacity: 0.88;
  box-shadow: 0 8px 18px rgba(18, 112, 119, 0.22);
}

:root[data-theme="dark"] #commerceSaleSubmitButton:disabled:not([aria-busy="true"]) {
  background: linear-gradient(135deg, #26383b, #2d4145);
  border-color: #40565a;
  color: #82979b;
}

.commerce-fiscal-operations-grid {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(37, 111, 104, 0.16);
}

.commerce-fiscal-operations-grid .dashboard-section {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 251, 249, 0.98) 56%, rgba(238, 247, 252, 0.98));
  border-color: rgba(37, 111, 104, 0.18);
  box-shadow: 0 14px 34px rgba(16, 70, 82, 0.08);
}

.commerce-sale-workbench {
  overflow: clip;
  border-width: 2px;
  border-color: rgba(25, 124, 132, 0.34);
}

.commerce-sale-header {
  align-items: center;
  border-bottom-width: 2px;
  border-color: rgba(25, 124, 132, 0.2);
}

.commerce-sale-reset,
.commerce-payment-grid button,
.commerce-product-mode-button {
  border-radius: 12px;
}

.commerce-workbench-panel {
  border-width: 2px;
  border-color: rgba(25, 124, 132, 0.26);
  border-radius: 14px;
}

.commerce-sale-layout {
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(14px, 1.3vw, 22px);
}

.commerce-sale-products {
  padding: clamp(12px, 1vw, 16px);
}

.commerce-sale-cart {
  padding: clamp(14px, 1.2vw, 18px);
}

.commerce-sale-searchbar {
  border-width: 2px;
  border-radius: 14px;
}

.commerce-product-gallery {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.commerce-product-tile {
  min-height: 128px;
  border-width: 2px;
  border-radius: 12px;
}

.commerce-sale-context-grid {
  grid-template-columns: minmax(160px, 0.66fr) minmax(240px, 1fr);
}

.commerce-sale-fiscal-grid,
.commerce-payment-grid {
  border-width: 2px;
  border-radius: 14px;
}

.commerce-sale-fiscal-grid {
  grid-template-columns: minmax(150px, 0.8fr) minmax(170px, 1fr) minmax(150px, 0.82fr) minmax(180px, 1fr);
}

.commerce-cart-table {
  overflow: visible;
  border-width: 2px;
  border-radius: 14px;
}

.commerce-cart-table table {
  min-width: 0 !important;
  border-collapse: collapse;
}

.commerce-cart-table th,
.commerce-cart-table td {
  padding: 10px 8px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.commerce-cart-table th {
  font-size: 12px;
}

.commerce-cart-table td {
  font-size: 13px;
}

.commerce-cart-table th:nth-child(1),
.commerce-cart-table td:nth-child(1) {
  width: 30%;
}

.commerce-cart-table th:nth-child(2),
.commerce-cart-table td:nth-child(2) {
  width: 58px;
}

.commerce-cart-table th:nth-child(3),
.commerce-cart-table td:nth-child(3) {
  width: 18%;
}

.commerce-cart-table th:nth-child(4),
.commerce-cart-table td:nth-child(4),
.commerce-cart-table th:nth-child(5),
.commerce-cart-table td:nth-child(5),
.commerce-cart-table th:nth-child(6),
.commerce-cart-table td:nth-child(6) {
  width: 68px;
}

.commerce-cart-table th:nth-child(7),
.commerce-cart-table td:nth-child(7) {
  width: 78px;
}

.commerce-cart-table th:nth-child(8),
.commerce-cart-table td:nth-child(8) {
  width: 36px;
}

.commerce-cart-money {
  width: 100%;
  min-width: 0;
}

.commerce-sale-total {
  border-width: 2px;
  border-radius: 14px;
}

.commerce-payment-grid {
  grid-template-columns: minmax(145px, 0.85fr) minmax(120px, 0.65fr) minmax(170px, 0.95fr) minmax(140px, 0.8fr);
  gap: 10px;
}

.commerce-payment-table,
.commerce-payment-table table {
  min-width: 0;
}

.commerce-payment-table {
  overflow: visible;
  border-radius: 14px;
}

.commerce-fiscal-operations-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.commerce-fiscal-operational-panel .commerce-fiscal-operations-grid .dashboard-section {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.commerce-fiscal-operations-grid .table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  border-width: 2px;
  border-radius: 12px;
}

.commerce-fiscal-operations-grid table {
  width: 100%;
  min-width: 720px !important;
  table-layout: fixed;
}

.commerce-fiscal-operations-grid th,
.commerce-fiscal-operations-grid td {
  padding: 11px 10px;
  overflow-wrap: anywhere;
  white-space: normal;
  vertical-align: top;
}

.commerce-fiscal-operations-grid th:nth-child(1),
.commerce-fiscal-operations-grid td:nth-child(1) {
  width: 14%;
}

.commerce-fiscal-operations-grid th:nth-child(2),
.commerce-fiscal-operations-grid td:nth-child(2) {
  width: 20%;
}

.commerce-fiscal-operations-grid th:nth-child(4),
.commerce-fiscal-operations-grid td:nth-child(4) {
  width: 12%;
}

.commerce-fiscal-operations-grid th:last-child,
.commerce-fiscal-operations-grid td:last-child {
  width: 30%;
}

.commerce-fiscal-operations-grid .secondary-button,
.commerce-fiscal-operations-grid .delete-button,
.commerce-fiscal-operations-grid select {
  min-width: 0;
  max-width: 100%;
  border-radius: 10px;
  white-space: nowrap;
}

.commerce-fiscal-operations-grid .row-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: visible;
}

.commerce-fiscal-operations-grid .row-actions select {
  flex: 1 1 120px;
  min-width: 112px;
}

.commerce-fiscal-operations-grid .row-actions button {
  flex: 0 0 auto;
  min-width: 62px;
  padding-inline: 12px;
  word-break: normal;
  overflow-wrap: normal;
}

.commerce-fiscal-operations-grid .commerce-fiscal-error-message {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 1500px) {
  .commerce-fiscal-operations-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .commerce-settings-subtabs {
    display: grid;
    grid-template-columns: 1fr;
    position: static;
    top: auto;
    z-index: auto;
    overflow: visible;
  }

  .commerce-settings-subtabs .feature-tab {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 1240px) {
  .commerce-products-workspace,
  .commerce-products-bottom-grid {
    grid-template-columns: 1fr;
  }

  .commerce-product-main-grid,
  .commerce-product-price-grid,
  .commerce-product-fiscal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commerce-sale-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .commerce-tabbar {
    grid-template-columns: 1fr;
  }

  .commerce-tab-print-button {
    width: 100%;
  }

  .commerce-products-header .compact-filters {
    grid-template-columns: 1fr;
  }

  .commerce-product-main-grid,
  .commerce-product-price-grid,
  .commerce-product-fiscal-grid,
  .commerce-product-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commerce-sale-workbench {
    width: 100%;
    padding-inline: 14px;
  }

  .commerce-sale-searchbar,
  .commerce-sale-context-grid,
  .commerce-sale-fiscal-grid,
  .commerce-payment-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .commerce-product-main-grid,
  .commerce-product-price-grid,
  .commerce-product-fiscal-grid,
  .commerce-product-options-grid {
    grid-template-columns: 1fr;
  }

  .commerce-section-title {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Comercial: contrato de toolbar sem sobreposição no Formulário Raiz. */
#commerceView.vasi-root-form .commerce-tab-panel > .records-header:not(.subrecords-header) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 650px);
  align-items: end;
  gap: var(--vasi-shell-space-5);
}
#commerceView.vasi-root-form .commerce-top-filters {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
}
#commerceView.vasi-root-form .commerce-top-filters button,
#commerceView.vasi-root-form .commerce-sale-searchbar button {
  min-width: max-content;
  white-space: nowrap;
}
#commerceView.vasi-root-form .commerce-sale-searchbar {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 170px) auto;
  align-items: center;
}
#commerceView.vasi-root-form .commerce-tab-panel,
#commerceView.vasi-root-form .commerce-sale-workbench,
#commerceView.vasi-root-form .commerce-workbench-panel { min-width: 0; max-width: 100%; }
@media (max-width: 1151px) {
  #commerceView.vasi-root-form .commerce-tab-panel > .records-header:not(.subrecords-header) {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  #commerceView.vasi-root-form .commerce-top-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }
}
@media (max-width: 760px) {
  #commerceView.vasi-root-form .commerce-top-filters,
  #commerceView.vasi-root-form .commerce-sale-searchbar {
    grid-template-columns: minmax(0, 1fr);
  }
  #commerceView.vasi-root-form .commerce-top-filters > *,
  #commerceView.vasi-root-form .commerce-sale-searchbar > * { width: 100%; }
}

/* Dashboard Comercial: indicadores fluidos e legíveis em toda a faixa operacional. */
#commerceView.vasi-root-form [data-commerce-panel="dashboard"] .crm-summary-cards,
#commerceView.vasi-root-form [data-commerce-panel="dashboard"] .dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  min-width: 0;
  width: 100%;
}
#commerceView.vasi-root-form [data-commerce-panel="dashboard"] .crm-summary-cards article,
#commerceView.vasi-root-form [data-commerce-panel="dashboard"] .dashboard-cards article {
  min-width: 0;
  min-height: 126px;
  height: auto;
  overflow: visible;
  padding: clamp(14px, 1.25vw, 20px);
}
#commerceView.vasi-root-form [data-commerce-panel="dashboard"] .crm-summary-cards article strong,
#commerceView.vasi-root-form [data-commerce-panel="dashboard"] .dashboard-cards article strong {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.12;
  white-space: normal;
}
#commerceView.vasi-root-form [data-commerce-panel="dashboard"] .crm-summary-cards article small,
#commerceView.vasi-root-form [data-commerce-panel="dashboard"] .dashboard-cards article small {
  overflow-wrap: anywhere;
}
#commerceView.vasi-root-form [data-commerce-panel="dashboard"] {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  min-width: 0;
  width: 100%;
  padding: clamp(18px, 2vw, 30px);
  border: 1px solid color-mix(in srgb, var(--commerce-teal) 20%, var(--line));
  border-radius: var(--vasi-shell-radius);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,248,246,.92));
  box-shadow: var(--vasi-shell-shadow);
}

/* Nova Venda: cada ação possui uma célula própria e nenhum controle disputa espaço. */
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 190px) auto;
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar > * { min-width: 0; }
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions button,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total,
#commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > * {
  min-width: 0;
  max-width: 100%;
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total strong {
  display: block;
  overflow-wrap: anywhere;
  white-space: normal;
}
@media (max-width: 980px) {
  #commerceView.vasi-root-form [data-commerce-panel="dashboard"] .crm-summary-cards,
  #commerceView.vasi-root-form [data-commerce-panel="dashboard"] .dashboard-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  }
  #commerceView.commerce-sale-active .commerce-sale-searchbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar button { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  #commerceView.vasi-root-form [data-commerce-panel="dashboard"] .crm-summary-cards,
  #commerceView.vasi-root-form [data-commerce-panel="dashboard"] .dashboard-cards,
  #commerceView.commerce-sale-active .commerce-sale-searchbar {
    grid-template-columns: minmax(0, 1fr);
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar button { grid-column: auto; }
}

/* Formulário Raiz VASI: contrato cromático e estrutural compartilhado por todo Comercial. */
:root {
  --vasi-navy: #073b78;
  --vasi-navy-2: #0a2d5d;
  --vasi-blue: #0876d8;
  --vasi-cyan: #09a8d8;
  --vasi-teal: #11b8a5;
  --vasi-green: #11d19b;
  --vasi-ink: #17324a;
  --vasi-ice: #f3fafd;
}

#commerceView.vasi-root-form {
  color: var(--vasi-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--vasi-ice) 72%, white), white 38%);
}

#commerceView.vasi-root-form .commerce-tab-panel,
#commerceView.vasi-root-form .commerce-workbench-panel,
#commerceView.vasi-root-form .commerce-product-editor-card,
#commerceView.vasi-root-form .commerce-category-card,
#commerceView.vasi-root-form .commerce-technical-card,
#commerceView.vasi-root-form .commerce-category-list-card,
#commerceView.vasi-root-form .commerce-product-list-card,
#commerceView.vasi-root-form .commerce-production-column,
#commerceView.vasi-root-form .commerce-fiscal-config-panel,
#commerceView.vasi-root-form .commerce-fiscal-rules-panel,
#commerceView.vasi-root-form .commerce-client-picker,
#commerceView.vasi-root-form .commerce-sale-details {
  min-width: 0;
  max-width: 100%;
  border-color: color-mix(in srgb, var(--vasi-teal) 28%, var(--line));
  color: var(--vasi-ink);
}

#commerceView.vasi-root-form .commerce-tab-panel > .records-header,
#commerceView.vasi-root-form .commerce-section-title,
#commerceView.vasi-root-form .commerce-products-header,
#commerceView.vasi-root-form .commerce-sale-header {
  color: var(--vasi-navy-2);
}

#commerceView.vasi-root-form .commerce-tab-panel > .records-header h2,
#commerceView.vasi-root-form .commerce-section-title h3,
#commerceView.vasi-root-form .commerce-sale-header h2,
#commerceView.vasi-root-form .commerce-products-header h2 {
  color: var(--vasi-navy);
}

#commerceView.vasi-root-form .commerce-tab-panel .compact-filters,
#commerceView.vasi-root-form .commerce-tab-panel .commerce-summary-filters,
#commerceView.vasi-root-form .commerce-tab-panel .commerce-products-header .compact-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--vasi-shell-filter-min)), 1fr));
  gap: var(--vasi-shell-space-3);
  min-width: 0;
  max-width: 100%;
  align-items: end;
}

#commerceView.vasi-root-form .commerce-tab-panel input,
#commerceView.vasi-root-form .commerce-tab-panel select,
#commerceView.vasi-root-form .commerce-tab-panel textarea {
  min-width: 0;
  max-width: 100%;
  border-color: color-mix(in srgb, var(--vasi-blue) 24%, var(--line));
  background: color-mix(in srgb, white 94%, var(--vasi-ice));
  color: var(--vasi-ink);
}

#commerceView.vasi-root-form .commerce-tab-panel input:focus,
#commerceView.vasi-root-form .commerce-tab-panel select:focus,
#commerceView.vasi-root-form .commerce-tab-panel textarea:focus {
  border-color: var(--vasi-cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vasi-cyan) 18%, transparent);
}

#commerceView.vasi-root-form .commerce-tab-panel .primary-button,
#commerceView.vasi-root-form .commerce-tab-panel .secondary-button,
#commerceView.vasi-root-form .commerce-tab-panel .commerce-product-mode-button {
  border-color: color-mix(in srgb, var(--vasi-blue) 38%, var(--line));
  color: var(--vasi-navy-2);
}

#commerceView.vasi-root-form .commerce-tab-panel .primary-button,
#commerceView.vasi-root-form .commerce-tab-panel .commerce-sale-form .form-actions button[type="submit"] {
  background: linear-gradient(135deg, var(--vasi-blue), var(--vasi-cyan));
  color: white;
}

#commerceView.vasi-root-form .commerce-tab-panel .table-wrap,
#commerceView.vasi-root-form .commerce-tab-panel .commerce-cart-table {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  border-color: color-mix(in srgb, var(--vasi-blue) 18%, var(--line));
  background: white;
}

#commerceView.vasi-root-form .commerce-tab-panel table thead th {
  background: linear-gradient(90deg, var(--vasi-navy-2), var(--vasi-navy));
  color: white;
}

#commerceView.vasi-root-form .commerce-tab-panel table tbody tr:hover td {
  background: color-mix(in srgb, var(--vasi-ice) 76%, var(--vasi-cyan));
}

#commerceView.vasi-root-form .commerce-tab-panel .empty-state,
#commerceView.vasi-root-form .commerce-tab-panel .message,
#commerceView.vasi-root-form .commerce-tab-panel .commerce-fiscal-error-message {
  border-color: color-mix(in srgb, var(--vasi-cyan) 26%, var(--line));
  background: color-mix(in srgb, var(--vasi-ice) 80%, white);
  color: var(--vasi-ink);
}

#commerceView.vasi-root-form .commerce-tab-panel .commerce-product-tile,
#commerceView.vasi-root-form .commerce-tab-panel .commerce-production-card,
#commerceView.vasi-root-form .commerce-tab-panel .commerce-sale-total,
#commerceView.vasi-root-form .commerce-tab-panel .commerce-payment-summary {
  border-color: color-mix(in srgb, var(--vasi-teal) 24%, var(--line));
  background: linear-gradient(145deg, white, color-mix(in srgb, var(--vasi-ice) 78%, white));
  color: var(--vasi-ink);
}

@media (max-width: 760px) {
  #commerceView.vasi-root-form .commerce-tab-panel .compact-filters,
  #commerceView.vasi-root-form .commerce-tab-panel .commerce-summary-filters,
  #commerceView.vasi-root-form .commerce-tab-panel .commerce-products-header .compact-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* VASI Command Center */
:root {
  --vasi-primary: #256f68;
  --vasi-secondary: #1687aa;
  --vasi-accent: #2fcf96;
  --vasi-bg: #f5f8f9;
  --vasi-card: #ffffff;
  --vasi-border: #d8e4e7;
  --vasi-text: #172026;
  --vasi-muted: #637983;
  --vasi-success: #1f7a4d;
  --vasi-warning: #a86d17;
  --vasi-danger: #a83f3f;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 18px;
  --space-xl: 28px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --shadow-soft: 0 10px 28px rgba(23, 50, 60, 0.07);
  --shadow-card: 0 14px 34px rgba(23, 50, 60, 0.1);
  --shadow-floating: 0 24px 70px rgba(8, 28, 38, 0.22);
}

.topbar-icon-button {
  display: inline-grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(37, 111, 104, 0.22);
  border-radius: var(--radius-sm);
  color: var(--vasi-primary);
  background: #eef7f6;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.topbar-icon-button:hover,
.topbar-icon-button:focus-visible {
  border-color: rgba(37, 111, 104, 0.5);
  background: #ffffff;
  outline: 3px solid rgba(47, 207, 150, 0.2);
}

/* Camada visual global: menus, telas, campos e cards com degrade leve. */
#appShell {
  background:
    linear-gradient(135deg, rgba(247, 250, 249, 0.98), rgba(239, 247, 246, 0.98) 56%, rgba(247, 250, 252, 0.98));
}

.module-nav,
.mobile-bottom-nav {
  border-bottom: 1px solid var(--accent-border);
  background: var(--menu-gradient);
  box-shadow: 0 12px 30px rgba(23, 50, 60, 0.06);
}

.module-nav {
  padding-bottom: 12px;
}

.topbar,
.module-nav,
.feature-tabs,
.module-tabs,
.nav-menu-panel {
  background: var(--menu-gradient);
}

.tab-button,
.feature-tab,
.nav-menu summary,
.secondary-button,
.topbar-icon-button,
.portal-filter,
.mobile-bottom-action,
.module-favorite-button,
.help-topic-button {
  border-color: var(--accent-border);
  background: var(--control-gradient);
  box-shadow: 0 8px 18px rgba(23, 50, 60, 0.05);
}

.tab-button:hover,
.tab-button:focus-visible,
.feature-tab:hover,
.feature-tab:focus-visible,
.nav-menu summary:hover,
.nav-menu summary:focus-visible,
.secondary-button:hover,
.secondary-button:focus-visible,
.topbar-icon-button:hover,
.topbar-icon-button:focus-visible,
.portal-filter:hover,
.portal-filter:focus-visible,
.mobile-bottom-action:hover,
.mobile-bottom-action:focus-visible,
.module-favorite-button:hover,
.module-favorite-button:focus-visible,
.help-topic-button:hover,
.help-topic-button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, #ffffff), color-mix(in srgb, #1687aa 8%, #edf8f6));
  outline: 3px solid color-mix(in srgb, var(--primary) 14%, transparent);
}

.primary-button,
.tab-button.active,
.feature-tab.active,
.nav-menu[open] summary,
.portal-filter.active,
.mobile-bottom-action.active,
.module-favorite-button.active,
.theme-toggle-button {
  background: var(--action-gradient);
}

.entry-panel,
.records-panel,
.settings-panel,
.dashboard-section,
.chart-section,
.portal-hero,
.portal-control-panel,
.portal-module-section,
.portal-command-center,
.portal-pending-panel,
.portal-assistant-panel,
.permission-module-card,
.commerce-tab-panel,
.commerce-workbench-panel,
.commerce-sale-workbench,
.commerce-sale-fiscal-grid,
.commerce-fiscal-config-panel,
.commerce-payment-grid,
.commerce-payment-summary,
.table-wrap,
.billing-status-card,
.billing-payment-box,
.backup-status-grid article,
.settings-status article {
  border-color: var(--accent-border);
  background: var(--module-gradient);
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 54%, var(--line));
  outline: 0;
  box-shadow: var(--field-focus-shadow);
}

table,
.data-table,
.records-table {
  background: var(--panel);
}

th,
thead td {
  background: var(--table-header-gradient);
  color: color-mix(in srgb, var(--primary-dark) 72%, var(--text));
}

tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}

.portal-layout {
  overflow: visible;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 249, 0.9) 52%, rgba(242, 248, 251, 0.95)),
    linear-gradient(90deg, rgba(37, 111, 104, 0.06), rgba(22, 135, 170, 0.06));
}

.portal-hero {
  align-items: stretch;
  border-color: rgba(37, 111, 104, 0.18);
}

.portal-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.portal-hero-actions .secondary-button {
  width: auto;
  min-height: 36px;
  text-decoration: none;
}

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

.portal-command-center {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.34fr);
  gap: var(--space-md);
  align-items: center;
  border: 1px solid rgba(37, 111, 104, 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.portal-command-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 48px;
  border: 1px solid rgba(197, 215, 219, 0.95);
  border-radius: var(--radius-md);
  padding: 0 var(--space-md);
  color: #2f4f5a;
  background: #fbfcfd;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.portal-command-trigger span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-command-trigger strong {
  flex: 0 0 auto;
  border: 1px solid rgba(37, 111, 104, 0.22);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  color: var(--vasi-primary);
  background: #edf7f5;
  font-size: 11px;
}

.portal-command-scope {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.portal-command-scope span,
.module-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: var(--radius-sm);
  padding: 0 8px;
  color: #315762;
  background: #eef6f6;
  font-size: 11px;
  font-weight: 800;
}

.portal-insights {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 10px;
}

.portal-insight-warning::before {
  background: linear-gradient(90deg, #a86d17, #e0a63f);
}

.portal-favorites {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-sm);
}

.portal-favorite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(174px, 1fr));
  gap: var(--space-sm);
}

.portal-favorite-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
  border: 1px solid rgba(197, 215, 219, 0.95);
  border-radius: var(--radius-md);
  padding: 7px 10px;
  color: #173b45;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
}

.portal-favorite-button span {
  display: grid;
  width: 34px;
  height: 30px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: #ffffff;
  background: linear-gradient(135deg, var(--vasi-primary), var(--vasi-secondary));
  font-size: 10px;
  font-weight: 900;
}

.portal-favorite-button strong {
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.portal-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.module-card {
  min-height: 202px;
  padding: 14px;
  cursor: pointer;
}

.module-card:focus-visible,
.portal-favorite-button:focus-visible,
.portal-quick-button:focus-visible,
.portal-command-trigger:focus-visible,
.command-result-item:focus-visible {
  outline: 3px solid rgba(47, 207, 150, 0.24);
  outline-offset: 2px;
}

.module-card-head {
  position: relative;
  z-index: 1;
}

.module-favorite-button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(37, 111, 104, 0.18);
  border-radius: var(--radius-sm);
  color: var(--vasi-primary);
  background: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}

.module-favorite-button.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--vasi-primary), var(--vasi-secondary));
}

.module-card-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-md);
  min-width: 0;
}

.module-card-action {
  margin-top: 0;
  padding-top: 0;
  max-width: 58%;
  text-align: right;
  overflow-wrap: anywhere;
}

.module-card-clock {
  display: none;
}

.portal-work-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: var(--space-md);
}

.portal-pending-panel,
.portal-assistant-panel {
  display: grid;
  align-content: start;
  gap: var(--space-md);
  border: 1px solid rgba(197, 215, 219, 0.95);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.portal-panel-heading span {
  display: block;
  color: var(--vasi-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-panel-heading h3 {
  margin: 4px 0 0;
  color: #102e3a;
  font-size: 18px;
}

.portal-pending-list,
.portal-assistant-actions {
  display: grid;
  gap: var(--space-sm);
}

.portal-pending-item {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(197, 215, 219, 0.95);
  border-left: 4px solid var(--vasi-secondary);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  color: #233f48;
  background: #ffffff;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.portal-pending-item.warning {
  border-left-color: var(--vasi-warning);
}

.portal-pending-item span,
.portal-assistant-panel p,
.portal-empty-message {
  margin: 0;
  color: var(--vasi-muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.portal-assistant-actions button {
  min-height: 36px;
  border: 1px solid rgba(37, 111, 104, 0.16);
  border-radius: var(--radius-sm);
  color: #214d58;
  background: #eef7f6;
  cursor: pointer;
  font-weight: 800;
}

.portal-footer {
  position: relative;
  z-index: 1;
  color: var(--vasi-muted);
  font-size: 12px;
  text-align: center;
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 3000;
}

.command-palette-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(8, 28, 38, 0.52);
}

.command-palette-dialog {
  position: relative;
  display: grid;
  gap: var(--space-md);
  width: min(760px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 36px));
  margin: 18px auto;
  border: 1px solid rgba(216, 228, 231, 0.95);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: #ffffff;
  box-shadow: var(--shadow-floating);
  overflow: hidden;
}

.command-palette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.command-palette-header span,
.command-palette-search span,
.command-result-group > span {
  display: block;
  color: var(--vasi-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.command-palette-header h2 {
  margin: 3px 0 0;
  color: #102e3a;
  font-size: 22px;
}

.command-palette-search {
  margin: 0;
}

.command-palette-search input {
  min-height: 50px;
  margin-top: 6px;
  border-radius: var(--radius-md);
  font-size: 15px;
}

.command-palette-results {
  display: grid;
  gap: var(--space-md);
  overflow-y: auto;
  padding-right: 4px;
}

.command-result-group {
  display: grid;
  gap: 6px;
}

.command-result-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-height: 58px;
  border: 1px solid rgba(216, 228, 231, 0.95);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  color: #173b45;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
}

.command-result-item.active {
  border-color: rgba(37, 111, 104, 0.42);
  background: #eef7f6;
}

.command-result-item small {
  grid-row: span 2;
  display: grid;
  width: 42px;
  height: 36px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: #ffffff;
  background: linear-gradient(135deg, var(--vasi-primary), var(--vasi-secondary));
  font-size: 10px;
  font-weight: 900;
}

.command-result-item strong,
.command-result-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-result-item span {
  color: var(--vasi-muted);
  font-size: 12px;
}

.command-palette-empty {
  margin: 0;
  border: 1px dashed rgba(37, 111, 104, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  color: var(--vasi-muted);
  text-align: center;
}

body.command-palette-open {
  overflow: hidden;
}

@media (max-width: 980px) {
  .billing-admin-filters,
  .billing-summary-grid,
  .billing-copy-grid {
    grid-template-columns: 1fr;
  }

  .portal-command-center,
  .portal-work-grid {
    grid-template-columns: 1fr;
  }

  .portal-command-scope {
    justify-content: flex-start;
  }

  .portal-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}

@media (max-width: 760px) {
  .topbar-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .topbar-icon-button {
    width: 100%;
  }

  .portal-command-trigger {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
  }

  .portal-meta-grid,
  .portal-assistant-actions {
    grid-template-columns: 1fr;
  }

  .portal-grid,
  .portal-favorite-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .topbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .topbar-clock,
  .user-badge {
    grid-column: span 3;
  }

  .portal-command-center,
  .portal-pending-panel,
  .portal-assistant-panel {
    padding: var(--space-md);
  }

  .command-palette-dialog {
    width: calc(100vw - 16px);
    margin-top: 8px;
    padding: var(--space-md);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10191c;
  --panel: #172226;
  --text: #eef7f5;
  --muted: #a7b8bd;
  --line: #2b3b40;
  --primary: #54c8b8;
  --primary-dark: #95e4d8;
  --danger: #ff9b9b;
  --income: #73d99b;
  --expense: #f2a56f;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  --vasi-primary: #54c8b8;
  --vasi-secondary: #62b8de;
  --vasi-accent: #74e0ac;
  --vasi-bg: #10191c;
  --vasi-card: #172226;
  --vasi-border: #2b3b40;
  --vasi-text: #eef7f5;
  --vasi-muted: #a7b8bd;
  --vasi-success: #73d99b;
  --vasi-warning: #ffd07a;
  --vasi-danger: #ff9b9b;
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.34);
  --shadow-floating: 0 26px 76px rgba(0, 0, 0, 0.52);
  --surface-gradient: linear-gradient(135deg, rgba(23, 34, 38, 0.98), rgba(19, 42, 45, 0.96) 58%, rgba(17, 31, 36, 0.98));
  --control-gradient: linear-gradient(135deg, rgba(30, 48, 52, 0.98), rgba(21, 43, 45, 0.96));
  --input-gradient: linear-gradient(135deg, #10191c, #152326);
  --action-gradient: linear-gradient(135deg, #238a7f, #217fa3);
  --menu-gradient: linear-gradient(135deg, rgba(23, 34, 38, 0.98), rgba(19, 42, 45, 0.96), rgba(17, 31, 36, 0.98));
  --accent-border: color-mix(in srgb, var(--primary) 26%, var(--line));
  --module-gradient: linear-gradient(145deg, rgba(24, 38, 42, 0.98), rgba(18, 34, 38, 0.98) 56%, rgba(20, 43, 47, 0.98));
  --table-header-gradient: linear-gradient(135deg, rgba(28, 51, 56, 0.98), rgba(21, 43, 48, 0.98));
  --field-focus-shadow: 0 0 0 3px rgba(84, 200, 184, 0.2), 0 14px 30px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] #appShell,
:root[data-theme="dark"] .auth-screen {
  background: var(--bg);
  color: var(--text);
}

:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .module-nav,
:root[data-theme="dark"] .feature-tabs,
:root[data-theme="dark"] .module-tabs,
:root[data-theme="dark"] .mobile-bottom-nav,
:root[data-theme="dark"] .mobile-nav-header,
:root[data-theme="dark"] .mobile-nav-footer,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .entry-panel,
:root[data-theme="dark"] .records-panel,
:root[data-theme="dark"] .dashboard-section,
:root[data-theme="dark"] .settings-panel,
:root[data-theme="dark"] .advanced-settings,
:root[data-theme="dark"] .portal-hero,
:root[data-theme="dark"] .portal-hero-panel,
:root[data-theme="dark"] .portal-control-panel,
:root[data-theme="dark"] .portal-module-section,
:root[data-theme="dark"] .portal-command-center,
:root[data-theme="dark"] .portal-pending-panel,
:root[data-theme="dark"] .portal-assistant-panel,
:root[data-theme="dark"] .portal-empty,
:root[data-theme="dark"] .command-palette-dialog,
:root[data-theme="dark"] .system-progress,
:root[data-theme="dark"] .billing-status-card,
:root[data-theme="dark"] .billing-payment-box,
:root[data-theme="dark"] .permission-module-card,
:root[data-theme="dark"] .backup-status-grid article,
:root[data-theme="dark"] .settings-status article,
:root[data-theme="dark"] .billing-summary-grid article,
:root[data-theme="dark"] .billing-copy-grid article,
:root[data-theme="dark"] .portal-meta-grid article,
:root[data-theme="dark"] .portal-insight-card,
:root[data-theme="dark"] .portal-favorite-button,
:root[data-theme="dark"] .portal-quick-button,
:root[data-theme="dark"] .module-card,
:root[data-theme="dark"] .command-result-item,
:root[data-theme="dark"] .commerce-production-card,
:root[data-theme="dark"] .commerce-options-grid,
:root[data-theme="dark"] .help-topic,
:root[data-theme="dark"] .help-screen-preview {
  border-color: var(--line);
  background: var(--module-gradient);
  color: var(--text);
  box-shadow: var(--shadow-soft, var(--shadow));
}

:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .module-nav,
:root[data-theme="dark"] .feature-tabs,
:root[data-theme="dark"] .module-tabs,
:root[data-theme="dark"] .mobile-bottom-nav {
  background: var(--menu-gradient);
}

:root[data-theme="dark"] .portal-layout {
  background:
    linear-gradient(135deg, rgba(16, 25, 28, 0.98), rgba(20, 35, 38, 0.96) 58%, rgba(14, 29, 33, 0.98)),
    linear-gradient(90deg, rgba(84, 200, 184, 0.08), rgba(98, 184, 222, 0.08));
}

:root[data-theme="dark"] .system-progress {
  background:
    linear-gradient(135deg, rgba(23, 34, 38, 0.98), rgba(17, 31, 35, 0.98)),
    linear-gradient(90deg, rgba(84, 200, 184, 0.12), rgba(98, 184, 222, 0.1));
}

:root[data-theme="dark"] .dashboard-intro,
:root[data-theme="dark"] .chart-section {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(25, 39, 43, 0.98), rgba(19, 32, 36, 0.96)),
    linear-gradient(120deg, rgba(84, 200, 184, 0.08), rgba(98, 184, 222, 0.08));
  color: var(--text);
}

:root[data-theme="dark"] .dashboard-cards article {
  border-color: color-mix(in srgb, var(--card-accent, #54c8b8) 42%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent, #54c8b8) 13%, #172226), #132126 62%, #18292d),
    var(--panel);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}

:root[data-theme="dark"] .commerce-tab-panel,
:root[data-theme="dark"] .commerce-sale-workbench,
:root[data-theme="dark"] .commerce-workbench-panel,
:root[data-theme="dark"] .commerce-tab-panel .dashboard-section,
:root[data-theme="dark"] .commerce-tab-panel .chart-section,
:root[data-theme="dark"] .commerce-sale-fiscal-grid,
:root[data-theme="dark"] .commerce-fiscal-config-panel,
:root[data-theme="dark"] .commerce-payment-grid,
:root[data-theme="dark"] .commerce-payment-summary {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(25, 39, 43, 0.98), rgba(18, 31, 35, 0.98) 62%, rgba(16, 34, 38, 0.98)),
    var(--panel);
  color: var(--text);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .commerce-settings-subtabs {
  border-color: var(--line);
  background: rgba(17, 34, 38, 0.92);
}

:root[data-theme="dark"] .commerce-settings-subpanel > .dashboard-section {
  border-color: var(--line);
  background: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] .commerce-tab-print-button,
:root[data-theme="dark"] .commerce-product-editor-card,
:root[data-theme="dark"] .commerce-category-card,
:root[data-theme="dark"] .commerce-technical-card,
:root[data-theme="dark"] .commerce-category-list-card,
:root[data-theme="dark"] .commerce-product-list-card {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(25, 39, 43, 0.98), rgba(18, 31, 35, 0.98) 62%, rgba(16, 34, 38, 0.98)),
    var(--panel);
  color: var(--text);
}

:root[data-theme="dark"] .commerce-section-title span {
  color: var(--muted);
}

:root[data-theme="dark"] .commerce-product-list-heading {
  background: linear-gradient(100deg, #174e4a 0%, #165f78 54%, #286d51 100%);
}

:root[data-theme="dark"] .commerce-products-table thead th {
  border-bottom-color: var(--line);
  background: linear-gradient(180deg, #223f42 0%, #203743 100%);
  color: #d9f4f0;
}

:root[data-theme="dark"] .commerce-products-table tbody tr:nth-child(odd) td {
  background: #17272b;
}

:root[data-theme="dark"] .commerce-products-table tbody tr:nth-child(even) td {
  background: #1b3033;
}

:root[data-theme="dark"] .commerce-products-table tbody tr:hover td {
  background: #244044;
}

:root[data-theme="dark"] .commerce-sale-header {
  border-bottom-color: var(--line);
}

:root[data-theme="dark"] .commerce-sale-searchbar,
:root[data-theme="dark"] .commerce-cart-table,
:root[data-theme="dark"] .commerce-payment-table,
:root[data-theme="dark"] .commerce-tab-panel .table-wrap {
  border-color: var(--line);
  background: rgba(19, 33, 37, 0.96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .commerce-product-tile {
  border-color: var(--line);
  background:
    linear-gradient(145deg, rgba(26, 43, 47, 0.98), rgba(19, 34, 38, 0.98) 64%, rgba(20, 42, 45, 0.98));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .commerce-product-tile strong,
:root[data-theme="dark"] .commerce-tab-panel .dashboard-section h3,
:root[data-theme="dark"] .commerce-tab-panel .chart-section h3 {
  color: var(--text);
}

:root[data-theme="dark"] .commerce-product-tile em {
  color: #78e2d0;
}

:root[data-theme="dark"] .commerce-product-price-modes {
  color: #b8c9ce;
}

:root[data-theme="dark"] .commerce-cart-table th {
  color: #cfe2e5;
  background: linear-gradient(180deg, #1c3338, #162a2f);
}

:root[data-theme="dark"] .commerce-sale-total,
:root[data-theme="dark"] .commerce-sale-form .form-actions button {
  border-color: rgba(120, 226, 208, 0.35);
  background: linear-gradient(135deg, #176f67, #1687aa);
  color: #ffffff;
}

:root[data-theme="dark"] .dashboard-card-warning {
  border-color: rgba(255, 208, 122, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(58, 45, 23, 0.95), rgba(23, 34, 38, 0.96)),
    var(--panel) !important;
}

:root[data-theme="dark"] .dashboard-cards span,
:root[data-theme="dark"] .dashboard-cards small,
:root[data-theme="dark"] .dashboard-cards small.dashboard-card-note-list em,
:root[data-theme="dark"] .erp-ranking-list article > span,
:root[data-theme="dark"] .erp-ranking-list small,
:root[data-theme="dark"] .chart-legend span,
:root[data-theme="dark"] .gradient-bars article div,
:root[data-theme="dark"] .empty-inline {
  color: #b8c9ce;
}

:root[data-theme="dark"] .dashboard-cards strong,
:root[data-theme="dark"] .erp-ranking-list strong,
:root[data-theme="dark"] .erp-ranking-list em,
:root[data-theme="dark"] .chart-legend strong,
:root[data-theme="dark"] .gradient-bars article strong,
:root[data-theme="dark"] .donut-chart strong {
  color: #f4fffd;
}

:root[data-theme="dark"] .donut-chart::after {
  background: #172226;
  box-shadow: inset 0 0 0 1px var(--line);
}

:root[data-theme="dark"] .erp-data-warning {
  border-color: rgba(255, 208, 122, 0.42);
  border-left-color: #ffd07a;
  background:
    linear-gradient(135deg, rgba(68, 50, 24, 0.92), rgba(24, 38, 42, 0.96));
  color: #ffe7b5;
}

:root[data-theme="dark"] .erp-data-warning strong,
:root[data-theme="dark"] .erp-data-warning span {
  color: #ffe7b5;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .portal-search input,
:root[data-theme="dark"] .command-palette-search input {
  border-color: var(--line);
  background: var(--input-gradient);
  color: var(--text);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #82959b;
}

:root[data-theme="dark"] .secondary-button,
:root[data-theme="dark"] .link-button,
:root[data-theme="dark"] .tab-button,
:root[data-theme="dark"] .feature-tab,
:root[data-theme="dark"] .nav-menu summary,
:root[data-theme="dark"] .nav-menu-panel,
:root[data-theme="dark"] .portal-filter,
:root[data-theme="dark"] .portal-command-trigger,
:root[data-theme="dark"] .portal-assistant-actions button,
:root[data-theme="dark"] .topbar-icon-button,
:root[data-theme="dark"] .mobile-bottom-action,
:root[data-theme="dark"] .module-favorite-button,
:root[data-theme="dark"] .help-topic-button {
  border-color: var(--line);
  background: var(--control-gradient);
  color: var(--primary-dark);
}

:root[data-theme="dark"] .secondary-button:hover,
:root[data-theme="dark"] .secondary-button:focus-visible,
:root[data-theme="dark"] .link-button:hover,
:root[data-theme="dark"] .link-button:focus-visible,
:root[data-theme="dark"] .tab-button:hover,
:root[data-theme="dark"] .tab-button:focus-visible,
:root[data-theme="dark"] .feature-tab:hover,
:root[data-theme="dark"] .feature-tab:focus-visible,
:root[data-theme="dark"] .nav-menu summary:hover,
:root[data-theme="dark"] .nav-menu summary:focus-visible,
:root[data-theme="dark"] .portal-filter:hover,
:root[data-theme="dark"] .portal-filter:focus-visible,
:root[data-theme="dark"] .portal-command-trigger:hover,
:root[data-theme="dark"] .portal-command-trigger:focus-visible,
:root[data-theme="dark"] .topbar-icon-button:hover,
:root[data-theme="dark"] .topbar-icon-button:focus-visible,
:root[data-theme="dark"] .mobile-bottom-action:hover,
:root[data-theme="dark"] .mobile-bottom-action:focus-visible,
:root[data-theme="dark"] .help-topic-button:hover,
:root[data-theme="dark"] .help-topic-button:focus-visible {
  border-color: rgba(84, 200, 184, 0.52);
  background: linear-gradient(135deg, rgba(36, 62, 67, 0.98), rgba(25, 51, 57, 0.98));
  color: #d8fbf5;
  outline-color: rgba(116, 224, 172, 0.18);
}

:root[data-theme="dark"] .tab-button.active,
:root[data-theme="dark"] .feature-tab.active,
:root[data-theme="dark"] .nav-menu[open] summary,
:root[data-theme="dark"] .portal-filter.active,
:root[data-theme="dark"] .mobile-bottom-action.active,
:root[data-theme="dark"] .module-favorite-button.active,
:root[data-theme="dark"] .theme-toggle-button {
  border-color: rgba(84, 200, 184, 0.58);
  background: var(--action-gradient);
  color: #e5fffb;
}

:root[data-theme="dark"] .nav-menu summary::after,
:root[data-theme="dark"] .nav-menu[open] summary::after {
  color: currentColor;
}

:root[data-theme="dark"] .theme-toggle-button {
  width: auto;
  min-width: 54px;
  padding-inline: 8px;
  font-size: 10px;
}

:root[data-theme="dark"] .topbar-clock,
:root[data-theme="dark"] .user-badge,
:root[data-theme="dark"] .multi-company-badge,
:root[data-theme="dark"] .portal-command-scope span,
:root[data-theme="dark"] .portal-section-kicker,
:root[data-theme="dark"] .module-status-badge,
:root[data-theme="dark"] .status-pill,
:root[data-theme="dark"] .badge {
  border-color: var(--line);
  background: var(--control-gradient);
  color: var(--primary-dark);
}

/* Shell global: relogio sempre visivel, mesmo em notebooks, sem ocultar informacao operacional. */
#appShell > .topbar { position: sticky; top: 0; z-index: 70; }
#appShell > .topbar .topbar-clock { display: block !important; min-width: 168px; max-width: none; white-space: nowrap; overflow: visible; }
.theme-color-control { display: inline-flex; align-items: center; gap: 6px; }
.theme-color-control input[type="text"] { width: 82px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
.company-theme-custom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  #appShell > .topbar { align-items: flex-start; }
  #appShell > .topbar .topbar-clock { min-width: 0; font-size: 10px; padding: 6px 8px; }
  .company-theme-custom { grid-template-columns: 1fr; }
}

:root[data-theme="dark"] table,
:root[data-theme="dark"] .data-table,
:root[data-theme="dark"] .records-table {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
}

:root[data-theme="dark"] th,
:root[data-theme="dark"] thead td {
  border-color: var(--line);
  background: var(--table-header-gradient);
  color: #dff7f2;
}

:root[data-theme="dark"] td {
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] tr:hover td,
:root[data-theme="dark"] .command-result-item.active {
  background: #1a2a2f;
}

:root[data-theme="dark"] .module-card,
:root[data-theme="dark"] .portal-favorite-button,
:root[data-theme="dark"] .portal-quick-button,
:root[data-theme="dark"] .command-result-item,
:root[data-theme="dark"] .portal-pending-item {
  background: #17252a;
}

:root[data-theme="dark"] .module-card:hover,
:root[data-theme="dark"] .module-card:focus-visible,
:root[data-theme="dark"] .portal-favorite-button:hover,
:root[data-theme="dark"] .portal-favorite-button:focus-visible,
:root[data-theme="dark"] .portal-quick-button:hover,
:root[data-theme="dark"] .portal-quick-button:focus-visible,
:root[data-theme="dark"] .command-result-item:hover,
:root[data-theme="dark"] .command-result-item:focus-visible {
  border-color: rgba(84, 200, 184, 0.5);
  background: #1e3035;
}

:root[data-theme="dark"] .portal-quick-button span,
:root[data-theme="dark"] .portal-favorite-button span,
:root[data-theme="dark"] .module-card-icon,
:root[data-theme="dark"] .command-result-item small,
:root[data-theme="dark"] .portal-command-trigger strong {
  background: linear-gradient(135deg, var(--vasi-primary), var(--vasi-secondary));
  color: #082025;
}

:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .company-context,
:root[data-theme="dark"] .auth-copy,
:root[data-theme="dark"] label,
:root[data-theme="dark"] small,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .portal-section-heading p,
:root[data-theme="dark"] .portal-insight-card span,
:root[data-theme="dark"] .portal-insight-card small,
:root[data-theme="dark"] .portal-pending-item span,
:root[data-theme="dark"] .portal-assistant-panel p,
:root[data-theme="dark"] .portal-empty-message,
:root[data-theme="dark"] .command-result-item span,
:root[data-theme="dark"] .command-palette-header span,
:root[data-theme="dark"] .command-palette-search span,
:root[data-theme="dark"] .command-result-group > span {
  color: var(--muted);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] strong,
:root[data-theme="dark"] .brand-line h1,
:root[data-theme="dark"] .portal-hero h2,
:root[data-theme="dark"] .portal-meta-grid strong,
:root[data-theme="dark"] .portal-insight-card strong,
:root[data-theme="dark"] .portal-favorite-button strong,
:root[data-theme="dark"] .command-palette-header h2 {
  color: var(--text);
}

:root[data-theme="dark"] .message.error,
:root[data-theme="dark"] .danger-text,
:root[data-theme="dark"] .portal-insight-warning strong {
  color: var(--danger);
}

:root[data-theme="dark"] .income,
:root[data-theme="dark"] .status-paid {
  color: var(--income);
}

:root[data-theme="dark"] .expense,
:root[data-theme="dark"] .status-overdue {
  color: var(--expense);
}

:root[data-theme="dark"] .auth-backdrop-brand {
  color: rgba(238, 247, 245, 0.08);
}

:root[data-theme="dark"] .company-choice-card {
  border-color: rgba(37, 111, 104, 0.22);
  background: rgba(251, 253, 254, 0.98);
  color: #172026;
}

:root[data-theme="dark"] .company-choice-card:hover,
:root[data-theme="dark"] .company-choice-card:focus-visible {
  border-color: rgba(37, 111, 104, 0.42);
  background: #ffffff;
}

:root[data-theme="dark"] .company-choice-card.selected {
  border-color: rgba(37, 111, 104, 0.56);
  background: linear-gradient(135deg, rgba(235, 249, 247, 0.99), rgba(245, 252, 253, 0.99));
}

:root[data-theme="dark"] .company-choice-name {
  color: #122c38;
}

:root[data-theme="dark"] .company-choice-document {
  color: #35545e;
}

:root[data-theme="dark"] .company-choice-meta,
:root[data-theme="dark"] .company-choice-alias {
  color: #66747f;
}

:root[data-theme="dark"] .mobile-nav-backdrop,
:root[data-theme="dark"] .command-palette-backdrop {
  background: rgba(2, 7, 9, 0.68);
}

.topbar-icon-button.theme-toggle-button {
  width: auto;
  min-width: 58px;
  padding-inline: 8px;
  font-size: 10px;
}

@media (max-width: 760px) {
  .topbar-icon-button.theme-toggle-button {
    width: 100%;
  }
}

@media (min-width: 981px) {
  body.clinical-workspace-active { overflow: hidden; }
  #medicalRecordsView.clinical-focus-active,
  #appointmentsView.clinical-focus-active { width: 100%; max-width: none; height: 100dvh; min-height: 0; padding: 8px 12px 10px; overflow: hidden; }
  #appointmentsView.clinical-focus-active > .appointment-workspace { display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: 100%; max-width: none; height: 100%; margin: 0; padding: 12px; overflow: hidden; background: var(--clinical-gradient-surface); }
  #appointmentsView.clinical-focus-active .appointment-toolbar { min-height: 0; padding: 8px 10px; background: var(--clinical-gradient-soft); }
  #appointmentsView.clinical-focus-active .appointment-toolbar h2 { margin: 0; font-size: clamp(20px, 1.5vw, 25px); }
  #appointmentsView.clinical-focus-active .appointment-toolbar .panel-copy { margin: 2px 0 0; }
  #appointmentsView.clinical-focus-active .appointment-filters { margin: 7px 0; padding: 7px; }
  #appointmentsView.clinical-focus-active .appointment-layout { height: 100%; min-height: 0; overflow: hidden; }
  #appointmentsView.clinical-focus-active .appointment-editor-collapsed { padding: 7px 10px; }
  #appointmentsView.clinical-focus-active .appointment-board-wrap { height: 100%; min-height: 0; overflow: hidden; }
  #appointmentsView.clinical-focus-active .appointment-board,
  #appointmentsView.clinical-focus-active #appointmentListWrap { height: 100%; min-height: 0; overflow: auto; }
  #appointmentsView.clinical-focus-active .appointment-day-roster { grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; }
  #appointmentsView.clinical-focus-active .appointment-roster-grid { min-height: 0; overflow: auto; }
  #medicalRecordsView.clinical-focus-active > .layout.module-content { height: 100%; overflow: hidden; }
  #medicalRecordsView.clinical-focus-active .records-panel { min-height: 0; overflow: hidden; }
  #medicalRecordsView.clinical-focus-active .medical-grid { height: 100%; min-height: 0; overflow: hidden; }
  #medicalRecordsView.clinical-focus-active .evolution-panel { height: 100%; min-height: 0; overflow: auto; }
  body.clinical-workspace-active { overflow-y: auto; }
  body.clinical-workspace-active #moduleNav { display: none; }

  #medicalRecordsView.clinical-focus-active,
  #appointmentsView.clinical-focus-active {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    padding-top: 8px;
    overflow: visible;
  }

  #medicalRecordsView.clinical-focus-active > .module-tabs,
  #appointmentsView.clinical-focus-active > .module-tabs {
    margin-bottom: 8px;
  }

  #medicalRecordsView.clinical-focus-active > .layout.module-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 10px;
    overflow: visible;
  }

  #medicalRecordsView.clinical-focus-active .entry-panel,
  #medicalRecordsView.clinical-focus-active .records-panel {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  #medicalRecordsView.clinical-focus-active .entry-panel {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(620px, 1.45fr);
    align-items: end;
    gap: 10px 18px;
    padding: 14px 16px;
    align-content: start;
    align-self: start;
  }

  #medicalRecordsView.clinical-focus-active .entry-panel > h2 {
    grid-column: 1 / -1;
    margin: 0;
  }

  #medicalRecordsView.clinical-focus-active .patient-search-panel,
  #medicalRecordsView.clinical-focus-active .record-search-panel {
    margin-top: 0;
  }

  #medicalRecordsView.clinical-focus-active .patient-search-panel {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #medicalRecordsView.clinical-focus-active .patient-search-panel .form-actions,
  #medicalRecordsView.clinical-focus-active .record-search-panel .form-actions {
    flex-wrap: nowrap;
    margin: 0;
  }

  #medicalRecordsView.clinical-focus-active .patient-search-panel .form-actions button {
    width: auto;
    min-width: 132px;
    padding-inline: 14px;
  }

  #medicalRecordsView.clinical-focus-active .record-search-panel {
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) minmax(210px, 0.85fr) auto;
    align-items: end;
    gap: 8px;
    padding: 0;
    border: 0;
  }

  #medicalRecordsView.clinical-focus-active .record-search-panel .form-section-title,
  #medicalRecordsView.clinical-focus-active .record-search-panel .filter-hint {
    grid-column: 1 / -1;
    margin: 0;
  }

  #medicalRecordsView.clinical-focus-active .record-search-panel > .form-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
  }

  #medicalRecordsView.clinical-focus-active .records-panel {
    width: 100%;
    min-width: 0;
  }

  #medicalRecordsView.clinical-focus-active .evolution-panel {
    min-height: calc(100dvh - 260px);
  }

  #appointmentsView.clinical-focus-active > .appointment-workspace {
    width: auto;
    height: calc(100dvh - 82px);
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  #appointmentsView.clinical-focus-active .appointment-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
  }

  #appointmentsView.clinical-focus-active .appointment-editor {
    height: auto;
    max-height: 42vh;
    padding: 12px 14px;
    overflow: auto;
  }

  #appointmentsView.clinical-focus-active .appointment-editor .compact-form {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    align-items: end;
    min-height: 0;
    gap: 8px;
  }

  #appointmentsView.clinical-focus-active .appointment-form-heading,
  #appointmentsView.clinical-focus-active .appointment-context-section,
  #appointmentsView.clinical-focus-active #appointmentOverbookingReasonField,
  #appointmentsView.clinical-focus-active #appointmentMessage {
    grid-column: 1 / -1;
  }

  #appointmentsView.clinical-focus-active .appointment-editor .compact-form > .form-grid {
    display: contents;
  }

  #appointmentsView.clinical-focus-active .appointment-editor label:has(#appointmentPatientSelect),
  #appointmentsView.clinical-focus-active .appointment-editor label:has(#appointmentProfessionalSelect),
  #appointmentsView.clinical-focus-active .appointment-editor label:has(input[name="notify_phone"]) {
    grid-column: span 2;
  }

  #appointmentsView.clinical-focus-active .appointment-editor label:has(textarea[name="notes"]) {
    grid-column: span 3;
  }

  #appointmentsView.clinical-focus-active .appointment-editor .compact-form > .form-actions {
    position: static;
    grid-column: span 2;
    align-self: end;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }

  #appointmentsView.clinical-focus-active .appointment-board-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: auto;
  }

  #appointmentsView.clinical-focus-active .appointment-editor-collapsed {
    padding-block: 10px;
    overflow: visible;
  }

  #appointmentsView.clinical-focus-active .appointment-editor-collapsed .compact-form {
    display: block;
  }

  #appointmentsView.clinical-focus-active .appointment-editor-collapsed .compact-form > :not(.appointment-form-heading) {
    display: none !important;
  }

  #appointmentsView.clinical-focus-active .appointment-form-heading > div {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  #appointmentsView.clinical-focus-active .appointment-results-heading {
    position: sticky;
    top: -12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -12px -12px 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter: blur(8px);
  }

  #appointmentsView.clinical-focus-active .appointment-results-heading span {
    color: var(--muted);
    font-size: 12px;
  }

  body:has(#commerceView.commerce-sale-active:not([hidden])) {
    overflow: hidden;
  }

  #commerceView.commerce-sale-active {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    box-sizing: border-box;
    height: 100dvh;
    min-height: 0;
    padding-top: 8px;
    overflow: hidden;
  }

  #commerceView.commerce-sale-active .commerce-tabbar {
    gap: 8px;
    margin-bottom: 8px;
  }

  #commerceView.commerce-sale-active .commerce-tab-print-button {
    display: none;
  }

  #commerceView.commerce-sale-active .commerce-sale-workbench {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    padding: clamp(10px, 1vw, 14px);
    overflow: auto;
  }

  #commerceView.commerce-sale-active .commerce-sale-header {
    min-height: 0;
    margin-bottom: 6px;
    padding-bottom: 6px;
  }

  #commerceView.commerce-sale-active .commerce-sale-header > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 4px 12px;
  }

  #commerceView.commerce-sale-active .commerce-sale-header h2 {
    margin: 0;
    font-size: clamp(21px, 1.6vw, 27px);
  }

  #commerceView.commerce-sale-active .commerce-sale-header .panel-copy {
    margin: 0;
  }

  #commerceView.commerce-sale-active .commerce-sale-layout {
    height: 100%;
    min-height: 0;
    overflow: visible;
    grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1.45fr);
    gap: 12px;
    align-items: stretch;
  }

  #commerceView.commerce-sale-active .commerce-workbench-panel {
    min-height: 0;
    padding: 12px;
    overflow: visible;
  }

  #commerceView.commerce-sale-active .commerce-sale-products {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  #commerceView.commerce-sale-active .commerce-sale-searchbar {
    grid-template-columns: minmax(0, 1fr) minmax(118px, 148px) auto;
    gap: 8px;
    padding: 8px;
  }

  #commerceView.commerce-sale-active .commerce-sale-searchbar input,
  #commerceView.commerce-sale-active .commerce-sale-searchbar select {
    min-height: 40px;
    font-size: 14px;
  }

  #commerceView.commerce-sale-active .commerce-sale-reset {
    min-width: 0;
    min-height: 40px;
    padding-inline: 10px;
    white-space: nowrap;
  }

  #commerceView.commerce-sale-active .commerce-product-gallery {
    min-height: 0;
    margin-top: 10px;
    overflow: auto;
    overscroll-behavior: contain;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-content: start;
    padding-right: 4px;
  }

  #commerceView.commerce-sale-active .commerce-product-tile {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    height: max-content;
    min-height: max-content;
    padding: 11px;
    gap: 6px;
    overflow: visible;
  }

  #commerceView.commerce-sale-active .commerce-product-mode-actions {
    position: static;
    flex: 0 0 auto;
    gap: 6px;
  }

  #commerceView.commerce-sale-active .commerce-product-mode-button {
    min-height: 30px;
    padding: 5px 8px;
  }

  #commerceView.commerce-sale-active .commerce-sale-products .empty-state {
    min-height: 0;
    height: 100%;
    margin-top: 10px;
  }

  #commerceView.commerce-sale-active .commerce-sale-cart {
    min-height: 0;
  }

  #commerceView.commerce-sale-active .commerce-sale-form {
    position: relative;
    height: auto;
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.72fr);
    grid-template-rows: auto auto minmax(72px, 1fr) auto auto minmax(66px, auto);
    grid-template-areas:
      "context total"
      "fiscal payment"
      "cart cart"
      "details payments"
      "delivery summary"
      "actions actions";
    gap: 8px;
    margin: 0;
    overflow: visible;
  }

  #commerceView.commerce-sale-active .commerce-sale-context-grid {
    grid-area: context;
    grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1fr);
  }

  #commerceView.commerce-sale-active .commerce-sale-fiscal-grid {
    grid-area: fiscal;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px;
    gap: 8px;
  }

  #commerceView.commerce-sale-active .commerce-cart-table {
    grid-area: cart;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #commerceView.commerce-sale-active .commerce-cart-table.has-overflow-items {
    overflow: auto;
  }

  #commerceView.commerce-sale-active .commerce-cart-table th,
  #commerceView.commerce-sale-active .commerce-cart-table td {
    padding: 7px 6px;
    font-size: 12px;
  }

  #commerceView.commerce-sale-active .commerce-cart-input,
  #commerceView.commerce-sale-active .commerce-cart-money,
  #commerceView.commerce-sale-active .commerce-cart-mode {
    min-height: 32px;
    font-size: 12px;
  }

  #commerceView.commerce-sale-active .commerce-sale-details {
    grid-area: details;
    grid-template-columns: minmax(210px, 0.76fr) minmax(240px, 1.24fr);
    gap: 8px;
  }

  #commerceView.commerce-sale-active .commerce-adjustment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #commerceView.commerce-sale-active .commerce-delivery-grid {
    grid-area: delivery;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #commerceView.commerce-sale-active .commerce-sale-total {
    grid-area: total;
    min-height: 64px;
    padding: 12px 16px;
  }

  #commerceView.commerce-sale-active .commerce-sale-total strong {
    font-size: clamp(26px, 2.6vw, 38px);
  }

  #commerceView.commerce-sale-active .commerce-payment-grid {
    grid-area: payment;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.72fr) minmax(0, 0.9fr) minmax(0, 0.86fr);
    padding: 8px;
    gap: 8px;
  }

  #commerceView.commerce-sale-active .commerce-payment-grid label,
  #commerceView.commerce-sale-active .commerce-payment-grid input,
  #commerceView.commerce-sale-active .commerce-payment-grid select,
  #commerceView.commerce-sale-active .commerce-payment-grid button {
    min-width: 0;
  }

  #commerceView.commerce-sale-active .commerce-payment-grid button,
  #commerceView.commerce-sale-active .commerce-sale-form .form-actions button {
    min-height: 38px;
  }

  #commerceView.commerce-sale-active .commerce-observation-field textarea {
    min-height: 38px;
    height: 38px;
    resize: none;
  }

  #commerceView.commerce-sale-active .commerce-payment-table {
    grid-area: payments;
    max-height: 64px;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #commerceView.commerce-sale-active .commerce-payment-table.has-overflow-items {
    overflow: auto;
  }

  #commerceView.commerce-sale-active .commerce-payment-summary {
    grid-area: summary;
    min-height: 42px;
    padding: 8px 10px;
  }

  #commerceView.commerce-sale-active .commerce-sale-actions {
    grid-area: actions;
    margin-top: 0;
    min-height: 60px;
    padding: 5px;
  }

  #commerceView.commerce-sale-active .commerce-sale-actions button {
    min-height: 48px;
    line-height: 1.1;
    white-space: nowrap;
  }

  #commerceView.commerce-sale-active #commerceSaleMessage {
    position: absolute;
    z-index: 4;
    right: 8px;
    bottom: 44px;
    left: 8px;
    min-height: 0;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    box-shadow: 0 8px 22px rgba(12, 54, 61, 0.16);
  }

  #commerceView.commerce-sale-active #commerceSaleMessage:empty {
    display: none;
  }

  #commerceView.commerce-sale-active .commerce-sale-form label {
    gap: 4px;
    font-size: 12px;
  }

  #commerceView.commerce-sale-active .commerce-sale-form input,
  #commerceView.commerce-sale-active .commerce-sale-form select {
    min-height: 38px;
  }
}

@media (min-width: 981px) and (max-height: 820px) {
  #commerceView.commerce-sale-active .commerce-sale-workbench {
    padding: 10px;
  }

  #commerceView.commerce-sale-active .commerce-sale-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  #commerceView.commerce-sale-active .commerce-sale-header .panel-copy {
    display: none;
  }

  #commerceView.commerce-sale-active .commerce-sale-form {
    grid-template-rows: auto auto minmax(56px, 1fr) auto auto minmax(58px, auto);
    gap: 5px;
  }

  #commerceView.commerce-sale-active .commerce-sale-fiscal-grid,
  #commerceView.commerce-sale-active .commerce-payment-grid {
    padding: 7px;
    gap: 6px;
  }

  #commerceView.commerce-sale-active .commerce-sale-total {
    min-height: 56px;
  }

  #commerceView.commerce-sale-active .commerce-observation-field textarea {
    min-height: 32px;
    height: 32px;
  }

  #commerceView.commerce-sale-active .commerce-product-tile { min-height: max-content; }
}

@media (max-width: 980px) {
  .commerce-sale-details {
    grid-template-columns: 1fr;
  }

  .infrastructure-grid,
  .infrastructure-action-item {
    grid-template-columns: 1fr;
  }

  .infrastructure-action-item .row-actions {
    width: 100%;
  }

  .infrastructure-action-item .row-actions button {
    flex: 1 1 140px;
  }
}

:root[data-theme="dark"] .infrastructure-card {
  border-color: rgba(138, 231, 219, 0.24);
  background:
    linear-gradient(135deg, rgba(18, 38, 43, 0.96), rgba(18, 55, 59, 0.86)),
    linear-gradient(90deg, rgba(34, 211, 184, 0.08), rgba(36, 154, 201, 0.1));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .infrastructure-action-item {
  border-color: rgba(138, 231, 219, 0.18);
  background: rgba(12, 27, 31, 0.74);
}

:root[data-theme="dark"] .infrastructure-action-item strong {
  color: #effdfb;
}

.commerce-filter-strip,
.commerce-report-filters {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid var(--border-color, #c8dada);
  background: linear-gradient(120deg, rgba(239, 250, 248, 0.94), rgba(239, 247, 252, 0.9));
}

.commerce-filter-strip {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.commerce-top-filters {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(150px, 180px) minmax(150px, 190px) auto;
  align-items: end;
  gap: 10px;
  width: min(100%, 650px);
  margin: 0;
}

.commerce-top-filters label,
.commerce-finance-filters label,
.commerce-filter-strip label {
  min-width: 0;
}

.commerce-finance-filters {
  grid-template-columns: minmax(150px, 190px) minmax(150px, 190px) minmax(170px, 220px) auto;
  margin-top: 0;
}

.commerce-cash-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  margin: 14px 0;
  padding: 14px 16px;
  border: 2px solid rgba(31, 131, 126, 0.3);
  border-radius: 6px;
  background: linear-gradient(120deg, rgba(230, 248, 244, 0.9), rgba(234, 246, 252, 0.92));
}

.commerce-cash-action {
  grid-template-columns: minmax(180px, 0.7fr) minmax(280px, 1.8fr) auto;
  align-items: end;
  margin-bottom: 18px;
}

.commerce-cash-close {
  margin: 16px 0 22px;
  padding-top: 14px;
  border-top: 2px solid rgba(31, 131, 126, 0.22);
}

.commerce-cash-counted {
  width: 100%;
  min-width: 120px;
}

.commerce-cash-close-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 8px;
  align-self: end;
}

.commerce-cash-close-summary span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--border-color, #c8dada);
  border-radius: 5px;
  background: var(--surface-color, #fff);
}

.commerce-cash-difference,
.commerce-cash-row-difference:not(:empty) {
  color: var(--danger-color, #a93838);
}

.commerce-cash-grid,
.commerce-report-filters + .crm-summary-cards {
  margin-top: 18px;
}

.commerce-payment-chart-slot {
  min-width: 0;
}

.commerce-payment-chart-slot .dashboard-section {
  height: 100%;
}

.commerce-monthly-closing {
  margin: 22px 0;
  padding: 18px 0;
  border-top: 2px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 20%, var(--line));
}

.commerce-monthly-closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
}

.commerce-monthly-closing-actions label {
  display: grid;
  gap: 5px;
  min-width: 170px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.commerce-monthly-closing-actions input,
.commerce-monthly-closing-actions button {
  min-height: 40px;
}

.commerce-monthly-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 8px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-color, #c8dada);
  border-radius: 6px;
  background: linear-gradient(120deg, rgba(239, 250, 248, 0.86), rgba(239, 247, 252, 0.86));
}

.commerce-monthly-meta strong,
.commerce-monthly-meta span {
  display: block;
}

.commerce-monthly-meta span {
  color: var(--muted);
  font-size: 12px;
}

.commerce-monthly-warning {
  color: var(--danger-color, #9d3c46);
  font-weight: 700;
}

.commerce-monthly-sales {
  grid-column: 1 / -1;
}

:root[data-theme="dark"] .commerce-monthly-meta {
  border-color: rgba(131, 218, 208, 0.28);
  background: linear-gradient(120deg, rgba(17, 44, 46, 0.9), rgba(19, 39, 53, 0.9));
}

:root[data-theme="dark"] .commerce-filter-strip,
:root[data-theme="dark"] .commerce-report-filters,
:root[data-theme="dark"] .commerce-cash-status {
  background: linear-gradient(120deg, rgba(17, 44, 46, 0.96), rgba(19, 39, 53, 0.94));
  border-color: rgba(131, 218, 208, 0.28);
}

@media (max-width: 820px) {
  .commerce-filter-strip,
  .commerce-top-filters,
  .commerce-cash-action,
  .commerce-cash-close-summary {
    grid-template-columns: 1fr;
  }

  .commerce-top-filters { width: 100%; }

  .commerce-monthly-closing-actions,
  .commerce-monthly-closing-actions label,
  .commerce-monthly-closing-actions button {
    width: 100%;
  }
}

/* PagBank Checkout: cobranca segura sem captura de dados de cartao no VASI. */
.commerce-online-payment-header {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 2px solid color-mix(in srgb, var(--primary) 24%, var(--line));
}

.commerce-online-payment-list {
  border: 2px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 8px;
}

.commerce-online-payment-list table {
  min-width: 980px;
}

.commerce-online-payment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.commerce-online-payment-actions .secondary-button,
.commerce-online-payment-actions .delete-button,
.commerce-online-payment-actions .icon-button {
  min-width: 0;
  min-height: 36px;
  padding: 8px 10px;
}

.commerce-payment-dialog {
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: auto;
  border: 2px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(6, 35, 39, 0.24);
}

.commerce-payment-dialog::backdrop {
  background: rgba(4, 25, 30, 0.64);
  backdrop-filter: blur(3px);
}

.commerce-variable-value-dialog,
.commerce-fiscal-conflict-dialog {
  width: min(460px, calc(100vw - 28px));
}

.commerce-variable-value-dialog > form,
.commerce-fiscal-conflict-dialog > div {
  gap: 16px;
}

.commerce-variable-value-dialog h2,
.commerce-variable-value-dialog p,
.commerce-fiscal-conflict-dialog h2,
.commerce-fiscal-conflict-dialog p {
  margin: 0;
}

.commerce-variable-value-dialog input {
  min-height: 46px;
  font-size: 1.1rem;
  font-weight: 700;
}

.commerce-payment-dialog > form {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, #d9f4ef), color-mix(in srgb, var(--panel) 94%, #dcecf8));
}

.commerce-payment-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.commerce-payment-metrics span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-left: 4px solid var(--primary);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 92%, #e6f8f4);
}

.commerce-payment-metrics small,
.commerce-payment-customer span {
  color: var(--muted);
}

.commerce-payment-metrics strong {
  font-size: 1.15rem;
}

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

.commerce-payment-surcharge {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2.3fr);
  gap: 10px 14px;
  align-items: end;
  padding: 12px 14px;
  border: 2px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 90%, #e7f7ef), color-mix(in srgb, var(--panel) 94%, #e5f1fb));
}

.commerce-payment-surcharge-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.commerce-payment-surcharge-preview span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.commerce-payment-surcharge-preview small,
.commerce-payment-surcharge > p {
  color: var(--muted);
}

.commerce-payment-surcharge > p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
}

.commerce-payment-customer-fields {
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
}

.commerce-payment-customer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 94%, #edf8f6);
}

.commerce-pagbank-settings {
  margin: 22px 0;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
}

.commerce-pagbank-settings textarea {
  width: 100%;
}

:root[data-theme="dark"] .commerce-payment-dialog > form {
  background: linear-gradient(135deg, rgba(15, 38, 41, 0.98), rgba(16, 34, 48, 0.98));
}

:root[data-theme="dark"] .commerce-payment-metrics span,
:root[data-theme="dark"] .commerce-payment-customer,
:root[data-theme="dark"] .commerce-payment-surcharge {
  background: rgba(17, 44, 46, 0.92);
  border-color: rgba(131, 218, 208, 0.28);
}

@media (max-width: 760px) {
  .commerce-payment-dialog > form {
    padding: 14px;
  }

  .commerce-payment-metrics,
  .commerce-payment-form-grid,
  .commerce-payment-customer-fields,
  .commerce-payment-surcharge,
  .commerce-payment-surcharge-preview {
    grid-template-columns: 1fr;
  }
}
/* Centro de Inteligencia Hospitalar: camada aditiva sobre os paineis ERP existentes. */
.hospital-intelligence-panel {
  border-width: 1px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface, #fff) 94%, #dff7f2), color-mix(in srgb, var(--surface, #fff) 96%, #e6f0ff));
}

.hospital-intelligence-header {
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color, #cbdde0) 78%, transparent);
}

.hospital-intelligence-filters label {
  display: grid;
  gap: 6px;
  min-width: 150px;
  color: var(--muted-text, #557078);
  font-size: 0.78rem;
  font-weight: 700;
}

.hospital-intelligence-filters {
  grid-template-columns: 180px 145px 145px auto auto;
  align-items: end;
  width: auto;
}

.hospital-intelligence-filters select {
  min-width: 180px;
}

.hospital-intelligence-results {
  display: grid;
  gap: 20px;
  margin-top: 18px;
}

.hospital-intelligence-context {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  border: 1px solid var(--border-color, #cbdde0);
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface, #fff) 95%, #dff5f0);
}

.hospital-intelligence-context > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px 15px;
  border-right: 1px solid color-mix(in srgb, var(--border-color, #cbdde0) 70%, transparent);
}

.hospital-intelligence-context > div:nth-child(4) { border-right: 0; }
.hospital-intelligence-context .hospital-intelligence-source {
  grid-column: 1 / -1;
  border-top: 1px solid color-mix(in srgb, var(--border-color, #cbdde0) 70%, transparent);
  border-right: 0;
}

.hospital-intelligence-context span,
.hospital-attention-impact span,
.hospital-attention-action > span {
  color: var(--muted-text, #557078);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hospital-intelligence-context strong {
  overflow-wrap: anywhere;
  color: var(--text-color, #102a31);
  font-size: 0.9rem;
}

.hospital-intelligence-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hospital-intelligence-metric {
  position: relative;
  min-height: 190px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-accent, #258b82) 34%, var(--border-color, #cbdde0));
  border-radius: 8px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface, #fff) 94%, var(--card-accent, #258b82)), var(--surface, #fff));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--card-accent, #258b82) 10%, transparent);
}

.hospital-intelligence-metric::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  content: "";
  background: var(--card-accent, #258b82);
}

.hospital-intelligence-metric.blue { --card-accent: #2f83b8; }
.hospital-intelligence-metric.rose { --card-accent: #b45d72; }
.hospital-intelligence-metric.green { --card-accent: #3f8a67; }
.hospital-intelligence-metric.violet { --card-accent: #7466ad; }
.hospital-intelligence-metric.amber { --card-accent: #b8862f; }

.hospital-intelligence-metric-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.hospital-intelligence-metric-heading > span {
  color: color-mix(in srgb, var(--card-accent) 78%, var(--text-color, #102a31));
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hospital-intelligence-metric-heading small,
.hospital-fact-badge {
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--card-accent, #258b82) 28%, transparent);
  border-radius: 999px;
  color: var(--muted-text, #557078);
  background: color-mix(in srgb, var(--surface, #fff) 86%, var(--card-accent, #258b82));
  font-size: 0.68rem;
  font-weight: 700;
}

.hospital-intelligence-metric > strong {
  display: block;
  margin-top: 18px;
  color: var(--text-color, #102a31);
  font-size: clamp(1.65rem, 2.4vw, 2.35rem);
  line-height: 1.05;
}

.hospital-intelligence-metric > p {
  margin: 10px 0 0;
  color: var(--muted-text, #557078);
  line-height: 1.45;
}

.data-reliability {
  --reliability-color: #2f7d68;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 12px;
  color: var(--text, var(--text-color, #102a31));
  font-size: 0.72rem;
}

.data-reliability-confirmed-zero { --reliability-color: #287f96; }
.data-reliability-no-movement,
.data-reliability-not-applicable,
.data-reliability-unmapped { --reliability-color: #68747c; }
.data-reliability-rule-not-validated,
.data-reliability-stale { --reliability-color: #9a6a18; }
.data-reliability-update-error { --reliability-color: #b23d4a; }
.data-reliability-partial { --reliability-color: #7862a8; }
.data-reliability-reconciliation-required { --reliability-color: #9b5878; }

.data-reliability-badge,
.dashboard-cards .data-reliability-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--reliability-color) 48%, var(--line, #cbdde0));
  border-radius: 999px;
  color: color-mix(in srgb, var(--reliability-color) 84%, var(--text, #102a31));
  background: color-mix(in srgb, var(--reliability-color) 10%, var(--panel, var(--surface, #fff)));
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: none;
}

.data-reliability-badge b {
  min-width: 1.1em;
  text-align: center;
}

.data-reliability-message,
.dashboard-cards .data-reliability-message {
  display: inline;
  margin: 0;
  color: var(--muted, var(--muted-text, #557078));
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
}

.data-reliability small {
  flex-basis: 100%;
  color: var(--muted, var(--muted-text, #557078));
}

.data-reliability-details {
  flex-basis: 100%;
}

.data-reliability-details summary {
  cursor: pointer;
  color: var(--reliability-color);
  font-weight: 700;
}

.data-reliability-details p {
  margin: 6px 0 0;
  color: var(--muted, var(--muted-text, #557078));
  line-height: 1.4;
}

.data-reliability.is-compact {
  align-items: flex-start;
}

:root[data-theme="dark"] .data-reliability-badge {
  color: color-mix(in srgb, var(--reliability-color) 48%, #f2faf8);
  background: color-mix(in srgb, var(--reliability-color) 18%, #17272b);
}

.hospital-intelligence-evidence {
  margin-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--border-color, #cbdde0) 72%, transparent);
  padding-top: 10px;
}

.hospital-intelligence-evidence summary {
  cursor: pointer;
  color: color-mix(in srgb, var(--card-accent, #258b82) 78%, var(--text-color, #102a31));
  font-size: 0.76rem;
  font-weight: 800;
}

.hospital-intelligence-evidence-body {
  margin-top: 8px;
  color: var(--muted-text, #557078);
  font-size: 0.76rem;
}

.hospital-intelligence-drilldown-button { margin-top: 10px; }

.hospital-intelligence-drilldown {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border-color, #cbdde0);
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, #e7f4f2 88%, white), color-mix(in srgb, #f7fbfb 92%, white));
}

.hospital-intelligence-drilldown-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.hospital-intelligence-drilldown-header span {
  color: #27847b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hospital-intelligence-drilldown-header h3 { margin: 4px 0 0; }
.hospital-intelligence-drilldown-context,
.hospital-intelligence-drilldown-source { margin: 0; color: var(--muted-text, #557078); }

.hospital-intelligence-drilldown-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border-color, #cbdde0);
  border-radius: 10px;
  background: color-mix(in srgb, white 72%, transparent);
}

.hospital-intelligence-drilldown-summary b { font-size: 1.25rem; }
.hospital-intelligence-drilldown-summary span { color: #27847b; font-size: 0.8rem; font-weight: 800; }
.hospital-intelligence-drilldown-summary p { grid-column: 1 / -1; margin: 0; color: var(--muted-text, #557078); }

.hospital-intelligence-drilldown-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.hospital-intelligence-drilldown-sections article,
.hospital-intelligence-drilldown-records {
  padding: 12px;
  border: 1px solid var(--border-color, #cbdde0);
  border-radius: 10px;
  background: color-mix(in srgb, white 78%, transparent);
}

.hospital-intelligence-drilldown-sections h4,
.hospital-intelligence-drilldown-records h4 { margin: 0 0 4px; }
.hospital-intelligence-drilldown-sections small { color: var(--muted-text, #557078); }
.hospital-intelligence-drilldown-sections ol,
.hospital-intelligence-drilldown-records ul { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 20px; }
.hospital-intelligence-drilldown-sections li,
.hospital-intelligence-drilldown-records li { display: flex; justify-content: space-between; gap: 12px; }

@media (max-width: 700px) {
  .hospital-intelligence-drilldown-header { flex-direction: column; }
  .hospital-intelligence-drilldown-summary { grid-template-columns: 1fr; }
  .hospital-intelligence-drilldown-summary p { grid-column: auto; }
}

.hospital-intelligence-evidence-body ul { margin: 7px 0; padding-left: 18px; }

.hospital-intelligence-ranking {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.hospital-intelligence-ranking > strong {
  color: var(--text-color, #102a31);
  font-size: 0.74rem;
}

.hospital-intelligence-ranking ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.hospital-intelligence-ranking li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.hospital-intelligence-ranking li span { overflow-wrap: anywhere; }
.hospital-intelligence-ranking li b { color: var(--text-color, #102a31); }

.hospital-intelligence-domain-section {
  border-top: 1px solid var(--border-color, #cbdde0);
  padding-top: 18px;
}

.hospital-intelligence-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hospital-intelligence-domain-grid .hospital-intelligence-metric {
  min-height: 210px;
}

.hospital-attention-section,
.hospital-intelligence-transparency {
  border-top: 1px solid var(--border-color, #cbdde0);
  padding-top: 18px;
}

.hospital-intelligence-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.hospital-intelligence-section-title span {
  color: #27847b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hospital-intelligence-section-title h3 { margin: 4px 0 0; font-size: 1.35rem; }
.hospital-intelligence-section-title small { color: var(--muted-text, #557078); }

.hospital-attention-list { display: grid; gap: 10px; }

.hospital-attention-item {
  --severity-color: #4b8390;
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(180px, 0.55fr) minmax(240px, 0.9fr);
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--severity-color) 32%, var(--border-color, #cbdde0));
  border-left: 5px solid var(--severity-color);
  border-radius: 6px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--surface, #fff) 94%, var(--severity-color)), var(--surface, #fff) 58%);
}

.hospital-attention-item.severity-attention { --severity-color: #c3942f; }
.hospital-attention-item.severity-important { --severity-color: #c36f35; }
.hospital-attention-item.severity-critical { --severity-color: #bd4e5f; }
.hospital-attention-item.severity-emergency { --severity-color: #9c3046; }
.hospital-attention-item.severity-informative { --severity-color: #43899a; }

.portal-announcement-source { display: block; margin-top: .55rem; color: var(--muted-text, #607080); }
.portal-announcement-source a { color: var(--accent, #1e7382); font-weight: 600; }
.portal-official-sources-panel { margin: 0 0 1.25rem; padding: 1rem; border: 1px solid var(--border, #dce5e8); border-radius: 14px; background: color-mix(in srgb, var(--surface, #fff) 94%, var(--accent, #3c8995)); }
.portal-official-sources-list { display: grid; gap: .7rem; }
.portal-official-source-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--border, #dce5e8); }
.portal-official-source-item:first-child { border-top: 0; }
.portal-official-source-item h4 { margin: .15rem 0; }
.portal-official-source-item p, .portal-official-source-item small { margin: 0; color: var(--muted-text, #607080); }
@media (max-width: 720px) { .portal-official-source-item { align-items: flex-start; flex-direction: column; } }

.hospital-attention-title { display: flex; gap: 7px; align-items: center; }
.hospital-severity-badge {
  padding: 4px 7px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--severity-color) 88%, #111);
  background: color-mix(in srgb, var(--surface, #fff) 75%, var(--severity-color));
  font-size: 0.7rem;
  font-weight: 900;
}

.hospital-attention-main h4 { margin: 8px 0 4px; font-size: 1rem; }
.hospital-attention-main p,
.hospital-attention-action p { margin: 0; color: var(--muted-text, #557078); line-height: 1.4; }
.hospital-attention-impact,
.hospital-attention-action { display: grid; gap: 5px; }
.hospital-attention-impact strong { color: var(--text-color, #102a31); font-size: 1.05rem; }
.hospital-attention-impact small { color: var(--muted-text, #557078); }

.hospital-intelligence-transparency h3 { margin-top: 0; }
.hospital-intelligence-transparency > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.hospital-intelligence-transparency p {
  margin: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border-color, #cbdde0) 80%, transparent);
  border-radius: 6px;
  color: var(--muted-text, #557078);
  background: color-mix(in srgb, var(--surface, #fff) 96%, #e3f5f1);
  line-height: 1.4;
}

.data-reliability-summary-list {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  padding-top: 2px;
}

.data-reliability-summary-list .data-reliability {
  margin-top: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--reliability-color) 25%, var(--border-color, #cbdde0));
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface, #fff) 96%, var(--reliability-color));
}

@media (max-width: 1100px) {
  .hospital-intelligence-header { align-items: stretch; flex-direction: column; }
  .hospital-intelligence-filters { grid-template-columns: repeat(2, minmax(150px, 1fr)); width: 100%; }
  .hospital-intelligence-metrics { grid-template-columns: 1fr; }
  .hospital-intelligence-domain-grid { grid-template-columns: 1fr 1fr; }
  .hospital-attention-item { grid-template-columns: 1fr 1fr; }
  .hospital-attention-action { grid-column: 1 / -1; }
  .hospital-intelligence-transparency > div { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .hospital-intelligence-filters { grid-template-columns: 1fr; }
  .hospital-intelligence-context { grid-template-columns: 1fr 1fr; }
  .hospital-intelligence-context > div { border-bottom: 1px solid color-mix(in srgb, var(--border-color, #cbdde0) 70%, transparent); }
  .hospital-intelligence-context .hospital-intelligence-source { grid-column: 1 / -1; }
  .hospital-intelligence-domain-grid { grid-template-columns: 1fr; }
  .hospital-attention-item { grid-template-columns: 1fr; }
  .hospital-attention-action { grid-column: auto; }
  .hospital-intelligence-transparency > div { grid-template-columns: 1fr; }
  .hospital-intelligence-section-title { align-items: start; flex-direction: column; }
}

/* VASI Commerce visual system: scoped to keep every other module unchanged. */
#commerceView {
  --commerce-ink: #15353d;
  --commerce-deep: #123f49;
  --commerce-green: #176d5d;
  --commerce-teal: #168398;
  --commerce-coral: #bf5362;
  --commerce-gold: #ae852d;
  --commerce-line: #bed2d5;
  --commerce-soft: #edf7f5;
  --commerce-warm: #fff7e9;
  --commerce-surface: #ffffff;
  --commerce-shadow: 0 14px 34px rgba(18, 63, 73, 0.09);
  background: linear-gradient(180deg, #edf7f5 0, #f5f9fb 240px, #f8faf9 100%);
}

#commerceView > .commerce-tabbar {
  position: relative;
  padding: 7px;
  border: 1px solid #b5d5ca;
  border-radius: 8px;
  background: linear-gradient(105deg, #e3f2ed 0%, #cfe7dc 55%, #dceee8 100%);
  box-shadow: 0 10px 24px rgba(41, 103, 86, 0.1);
}

#commerceView > .commerce-tabbar::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -1px;
  left: 14px;
  height: 3px;
  background: linear-gradient(90deg, #d88d96, #cbb36b 48%, #8bc6ad);
  pointer-events: none;
}

#commerceView > .commerce-tabbar .module-tabs {
  gap: 5px;
  padding: 0 0 3px;
  background: transparent;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

#commerceView > .commerce-tabbar .feature-tab {
  flex: 0 0 auto;
  min-width: 104px;
  min-height: 41px;
  padding: 8px 12px;
  border: 1px solid rgba(31, 91, 76, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.34);
  color: #245b50;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

#commerceView > .commerce-tabbar .feature-tab:hover,
#commerceView > .commerce-tabbar .feature-tab:focus-visible {
  border-color: #7eae9f;
  background: rgba(255, 255, 255, 0.72);
  color: #153f37;
}

#commerceView > .commerce-tabbar .feature-tab.active {
  border-color: #ffffff;
  background: #ffffff;
  color: #174f44;
  box-shadow: 0 7px 16px rgba(47, 105, 89, 0.15);
}

#commerceView .commerce-tab-panel:not(.commerce-sale-workbench) {
  padding: 22px 4px 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#commerceView .commerce-tab-panel > .records-header:not(.subrecords-header) {
  min-height: 72px;
  margin-bottom: 20px;
  padding: 4px 0 16px 18px;
  border-bottom: 1px solid var(--commerce-line);
  border-left: 5px solid var(--commerce-coral);
}

#commerceView .commerce-tab-panel > .records-header:not(.subrecords-header) h2,
#commerceView .commerce-sale-header h2 {
  margin: 0;
  color: var(--commerce-ink);
  font-size: 28px;
  font-weight: 900;
}

#commerceView .commerce-tab-panel > .records-header:not(.subrecords-header) .panel-copy,
#commerceView .commerce-sale-header .panel-copy {
  max-width: 760px;
  margin-top: 4px;
  color: #587078;
  font-size: 14px;
}

#commerceView .subrecords-header {
  margin: 22px 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--commerce-line);
}

#commerceView .subrecords-header h3,
#commerceView .dashboard-section > h3,
#commerceView .chart-section > h3,
#commerceView .commerce-section-title h3 {
  position: relative;
  margin: 0;
  padding-left: 13px;
  color: var(--commerce-ink);
  font-size: 17px;
  font-weight: 900;
}

#commerceView .subrecords-header h3::before,
#commerceView .dashboard-section > h3::before,
#commerceView .chart-section > h3::before,
#commerceView .commerce-section-title h3::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--commerce-coral), var(--commerce-gold));
}

#commerceView .dashboard-cards article,
#commerceView .crm-summary-cards article {
  min-height: 116px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--commerce-teal)) 36%, var(--commerce-line));
  border-top: 4px solid var(--card-accent, var(--commerce-teal));
  border-radius: 7px;
  background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--card-accent-soft, #e8f6f3) 44%, #ffffff) 100%);
  box-shadow: var(--commerce-shadow);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

#commerceView .dashboard-cards article:hover,
#commerceView .crm-summary-cards article:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(18, 63, 73, 0.14);
}

#commerceView .dashboard-cards article strong,
#commerceView .crm-summary-cards article strong {
  color: var(--commerce-ink);
  font-size: 27px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

#commerceView .dashboard-cards article small,
#commerceView .crm-summary-cards article small {
  color: #587078;
}

#commerceView .dashboard-section,
#commerceView .chart-section,
#commerceView .commerce-product-editor-card,
#commerceView .commerce-category-card,
#commerceView .commerce-technical-card,
#commerceView .commerce-category-list-card,
#commerceView .commerce-product-list-card {
  border: 1px solid var(--commerce-line);
  border-radius: 7px;
  background: var(--commerce-surface);
  box-shadow: var(--commerce-shadow);
}

#commerceView .table-wrap {
  border: 1px solid var(--commerce-line);
  border-radius: 6px;
  background: var(--commerce-surface);
  box-shadow: 0 10px 24px rgba(18, 63, 73, 0.07);
}

#commerceView .table-wrap thead th {
  border-bottom: 1px solid #b6d5ca;
  background: linear-gradient(105deg, #e4f3ee 0%, #cfe7dc 55%, #dceee8 100%);
  color: #245b50;
  font-size: 11px;
  font-weight: 850;
}

#commerceView .table-wrap tbody tr:nth-child(odd) td {
  background: #ffffff;
}

#commerceView .table-wrap tbody tr:nth-child(even) td {
  background: #eef6f5;
}

#commerceView .table-wrap tbody tr:hover td {
  background: var(--commerce-warm);
}

#commerceView .table-wrap td {
  border-bottom-color: #d7e4e5;
}

#commerceView label {
  color: #506a72;
  font-size: 12px;
  font-weight: 800;
}

#commerceView input,
#commerceView select,
#commerceView textarea {
  border-color: #b8cfd2;
  background: #ffffff;
  color: var(--commerce-ink);
}

#commerceView input:focus,
#commerceView select:focus,
#commerceView textarea:focus {
  border-color: var(--commerce-teal);
  outline: 3px solid rgba(22, 131, 152, 0.15);
  box-shadow: none;
}

#commerceView input[type="checkbox"] {
  accent-color: var(--commerce-green);
}

#commerceView .primary-button {
  border-color: #0e655f;
  background: linear-gradient(110deg, var(--commerce-green), var(--commerce-teal));
  color: #ffffff;
  box-shadow: 0 9px 20px rgba(18, 105, 103, 0.2);
}

#commerceView .secondary-button {
  border-color: #9ebfc3;
  background: #ffffff;
  color: #174f58;
}

#commerceView .secondary-button:hover,
#commerceView .secondary-button:focus-visible {
  border-color: var(--commerce-teal);
  background: #e9f5f4;
  color: #103f47;
}

#commerceView .delete-button {
  border-color: #e4aeb6;
  background: #fff1f2;
  color: #a63f50;
}

#commerceView .pill.success { background: #dff5e7; color: #17623e; }
#commerceView .pill.warning { background: #fff1cc; color: #775814; }
#commerceView .pill.danger { background: #fde7ea; color: #96394a; }
#commerceView .pill.status { background: #e4edf4; color: #39566a; }

#commerceView .commerce-product-list-heading {
  border-bottom: 1px solid #afd1c4;
  background: linear-gradient(105deg, #dcefe8 0%, #c5e2d5 55%, #d7ebe4 100%);
  color: #1e564a;
  box-shadow: 0 10px 24px rgba(41, 103, 86, 0.1);
}

#commerceView .commerce-product-list-card .commerce-product-list-heading h3,
#commerceView .commerce-product-totalizer strong {
  color: #1e564a;
}

#commerceView .commerce-product-totalizer span {
  border-color: rgba(30, 86, 74, 0.2);
  background: rgba(255, 255, 255, 0.42);
  color: #32675c;
}

#commerceView .commerce-settings-subtabs {
  border-color: #a8c5c8;
  background: #e8f2f1;
}

#commerceView .commerce-settings-subtabs .feature-tab {
  color: #365961;
}

#commerceView .commerce-settings-subtabs .feature-tab.active {
  border-color: #155e61;
  background: #155e61;
  color: #ffffff;
}

#commerceView .commerce-fiscal-online-payments {
  padding: 2px 0 18px;
  border-bottom: 1px solid var(--commerce-line);
}

#commerceView .commerce-sale-workbench {
  border: 1px solid #9bbfc3;
  border-top: 5px solid var(--commerce-coral);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #eef7f5 58%, #edf4f8 100%);
  box-shadow: 0 24px 58px rgba(15, 62, 71, 0.16);
}

#commerceView .commerce-sale-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#commerceView .commerce-sale-editing-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid #8fb9bd;
  border-left: 4px solid var(--commerce-gold);
  border-radius: 6px;
  background: #e9f4f2;
  color: #164e50;
  font-size: 13px;
  font-weight: 800;
}

#commerceView .commerce-sale-editing-badge[hidden] {
  display: none;
}

#commerceView .commerce-sale-fiscal-status {
  display: block;
  min-height: 24px;
  margin-top: 4px;
  padding: 4px 7px;
  border: 1px solid #9dc7b0;
  border-left-width: 4px;
  border-radius: 5px;
  background: #e8f6ed;
  color: #195d39;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

#commerceView .commerce-sale-fiscal-status[data-tone="warning"] {
  border-color: #d7b25c;
  background: #fff7df;
  color: #765414;
}

#commerceView .commerce-sale-fiscal-status[data-tone="danger"] {
  border-color: #d98c98;
  background: #fff0f2;
  color: #913344;
}

#commerceView .commerce-sale-fiscal-status[data-tone="status"] {
  border-color: #aebfc2;
  background: #eef3f3;
  color: #4c6267;
}

#commerceView #commerceSaleFiscalOption.is-disabled select {
  opacity: 0.72;
}

#commerceView .commerce-workbench-panel,
#commerceView .commerce-sale-products,
#commerceView .commerce-sale-cart {
  border-color: #aec9cc;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(18, 63, 73, 0.09);
}

#commerceView .commerce-sale-searchbar,
#commerceView .commerce-sale-fiscal-grid,
#commerceView .commerce-payment-grid,
#commerceView .commerce-payment-summary {
  border-color: #b7ced1;
  border-radius: 7px;
  background: #f3f8f7;
}

#commerceView .commerce-product-tile {
  border: 1px solid #b8ced1;
  border-left: 4px solid var(--commerce-coral);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(18, 63, 73, 0.07);
}

#commerceView .commerce-product-tile:hover,
#commerceView .commerce-product-tile:focus-visible {
  border-color: var(--commerce-teal);
  border-left-color: var(--commerce-gold);
  box-shadow: 0 14px 30px rgba(18, 63, 73, 0.14);
}

#commerceView .commerce-product-tile em {
  color: #a13f52;
}

#commerceView .commerce-product-mode-button {
  border-color: #a7c4c7;
  border-radius: 6px;
  background: #eff7f5;
  color: #17544f;
}

#commerceView .commerce-product-mode-button:hover,
#commerceView .commerce-product-mode-button:focus-visible {
  border-color: var(--commerce-teal);
  background: #175f68;
  color: #ffffff;
}

#commerceView .commerce-sale-total {
  border-color: #0f5f66;
  border-radius: 7px;
  background: linear-gradient(110deg, #155f57 0%, #117f8f 68%, #2d6e88 100%);
  box-shadow: 0 14px 28px rgba(15, 95, 102, 0.24);
}

#commerceView .commerce-sale-form .form-actions {
  border-color: #a7c5c8;
  border-radius: 7px;
  background: #e9f3f2;
}

#commerceView .commerce-sale-form .form-actions button {
  border-radius: 6px;
  background: linear-gradient(105deg, #155f57 0%, #168398 68%, #2c7188 100%);
  box-shadow: 0 12px 26px rgba(16, 91, 99, 0.24);
}

#commerceView .commerce-cart-table,
#commerceView .commerce-fiscal-operations-grid .table-wrap,
#commerceView .commerce-payment-table {
  border-radius: 6px;
}

:root[data-theme="dark"] #commerceView {
  --commerce-ink: #e7f2f1;
  --commerce-deep: #dff1ee;
  --commerce-line: #35565b;
  --commerce-soft: #1b3034;
  --commerce-warm: #393326;
  --commerce-surface: #18292d;
  --commerce-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  background: linear-gradient(180deg, #12262a 0, #17272c 240px, #141f23 100%);
}

:root[data-theme="dark"] #commerceView .commerce-tab-panel > .records-header:not(.subrecords-header) .panel-copy,
:root[data-theme="dark"] #commerceView .commerce-sale-header .panel-copy,
:root[data-theme="dark"] #commerceView .dashboard-cards article small,
:root[data-theme="dark"] #commerceView .crm-summary-cards article small,
:root[data-theme="dark"] #commerceView label {
  color: #abc0c4;
}

:root[data-theme="dark"] #commerceView .dashboard-cards article,
:root[data-theme="dark"] #commerceView .crm-summary-cards article,
:root[data-theme="dark"] #commerceView .dashboard-section,
:root[data-theme="dark"] #commerceView .chart-section,
:root[data-theme="dark"] #commerceView .commerce-product-editor-card,
:root[data-theme="dark"] #commerceView .commerce-category-card,
:root[data-theme="dark"] #commerceView .commerce-technical-card,
:root[data-theme="dark"] #commerceView .commerce-category-list-card,
:root[data-theme="dark"] #commerceView .commerce-product-list-card,
:root[data-theme="dark"] #commerceView .commerce-workbench-panel,
:root[data-theme="dark"] #commerceView .commerce-sale-products,
:root[data-theme="dark"] #commerceView .commerce-sale-cart,
:root[data-theme="dark"] #commerceView .table-wrap {
  border-color: var(--commerce-line);
  background: var(--commerce-surface);
}

:root[data-theme="dark"] #commerceView .commerce-sale-workbench {
  border-color: #3c666b;
  border-top-color: #d26a78;
  background: linear-gradient(135deg, #192b2f 0%, #15292c 58%, #1b2932 100%);
}

:root[data-theme="dark"] #commerceView .commerce-sale-editing-badge,
:root[data-theme="dark"] #commerceView .commerce-sale-fiscal-status {
  border-color: #55777b;
  background: #20383b;
  color: #d9efeb;
}

:root[data-theme="dark"] #commerceView .commerce-sale-fiscal-status[data-tone="warning"] {
  border-color: #947737;
  background: #3b3525;
  color: #ffe5a1;
}

:root[data-theme="dark"] #commerceView .commerce-sale-fiscal-status[data-tone="danger"] {
  border-color: #945866;
  background: #3c292e;
  color: #ffc4cd;
}

:root[data-theme="dark"] #commerceView .commerce-sale-fiscal-status[data-tone="status"] {
  border-color: #60777b;
  background: #26383c;
  color: #c6d7d9;
}

:root[data-theme="dark"] #commerceView > .commerce-tabbar {
  border-color: #365f5b;
  background: linear-gradient(105deg, #274b49 0%, #315b55 55%, #38565d 100%);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] #commerceView > .commerce-tabbar .feature-tab {
  border-color: rgba(255, 255, 255, 0.17);
  background: rgba(255, 255, 255, 0.06);
  color: #edf8f5;
}

:root[data-theme="dark"] #commerceView > .commerce-tabbar .feature-tab:hover,
:root[data-theme="dark"] #commerceView > .commerce-tabbar .feature-tab:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

:root[data-theme="dark"] #commerceView > .commerce-tabbar .feature-tab.active {
  border-color: #ffffff;
  background: #ffffff;
  color: #174f44;
}

:root[data-theme="dark"] #commerceView .table-wrap thead th {
  border-bottom-color: #496d69;
  background: linear-gradient(105deg, #274b49 0%, #315b55 55%, #38565d 100%);
  color: #f2faf8;
}

:root[data-theme="dark"] #commerceView .commerce-product-list-heading {
  border-bottom-color: #496d69;
  background: linear-gradient(105deg, #274b49 0%, #315b55 55%, #38565d 100%);
  color: #f2faf8;
}

:root[data-theme="dark"] #commerceView .commerce-product-list-card .commerce-product-list-heading h3,
:root[data-theme="dark"] #commerceView .commerce-product-totalizer strong {
  color: #f2faf8;
}

:root[data-theme="dark"] #commerceView .commerce-product-totalizer span {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #e7f2f1;
}

:root[data-theme="dark"] #commerceView .table-wrap tbody tr:nth-child(odd) td { background: #18292d; }
:root[data-theme="dark"] #commerceView .table-wrap tbody tr:nth-child(even) td { background: #1d3336; }
:root[data-theme="dark"] #commerceView .table-wrap tbody tr:hover td { background: #393326; }

:root[data-theme="dark"] #commerceView input,
:root[data-theme="dark"] #commerceView select,
:root[data-theme="dark"] #commerceView textarea,
:root[data-theme="dark"] #commerceView .secondary-button {
  border-color: #45666b;
  background: #1a2e32;
  color: #e6f1f0;
}

:root[data-theme="dark"] #commerceView .commerce-sale-searchbar,
:root[data-theme="dark"] #commerceView .commerce-sale-fiscal-grid,
:root[data-theme="dark"] #commerceView .commerce-payment-grid,
:root[data-theme="dark"] #commerceView .commerce-payment-summary,
:root[data-theme="dark"] #commerceView .commerce-sale-form .form-actions,
:root[data-theme="dark"] #commerceView .commerce-product-tile,
:root[data-theme="dark"] #commerceView .commerce-product-mode-button,
:root[data-theme="dark"] #commerceView .commerce-settings-subtabs {
  border-color: #3b5c61;
  background: #1b3034;
  color: #e7f2f1;
}

@media (max-width: 980px) {
  #commerceView {
    background: #f5f9f8;
  }

  :root[data-theme="dark"] #commerceView {
    background: #142327;
  }

  #commerceView > .commerce-tabbar {
    grid-template-columns: 1fr;
    padding: 6px;
  }

  #commerceView > .commerce-tabbar .feature-tab {
    min-width: 126px;
  }

  #commerceView .commerce-tab-panel:not(.commerce-sale-workbench) {
    padding-inline: 0;
  }
}

@media (max-width: 640px) {
  #commerceView .commerce-tab-panel > .records-header:not(.subrecords-header) {
    min-height: 0;
    padding: 4px 0 14px 12px;
  }

  #commerceView .commerce-tab-panel > .records-header:not(.subrecords-header) h2,
  #commerceView .commerce-sale-header h2 {
    font-size: 24px;
  }

  #commerceView .dashboard-cards article,
  #commerceView .crm-summary-cards article {
    min-height: 104px;
  }
}

/* Nova Venda: fechamento compacto e leitura operacional. */
#commerceView .commerce-sale-payment-panel {
  min-width: 0;
  border: 1px solid #b7ced1;
  border-radius: 7px;
  background: #f3f8f7;
  overflow: hidden;
}

#commerceView .commerce-sale-payment-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 31px;
  padding: 5px 8px;
  border-bottom: 1px solid #c5d9da;
  color: #174f55;
  font-size: 12px;
  gap: 8px;
}

#commerceView .commerce-sale-payment-panel .commerce-payment-grid {
  border: 0;
  border-radius: 0;
  background: transparent;
}

#commerceView .commerce-sale-checkout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 8px;
  align-items: stretch;
  min-height: 0;
}

#commerceView .commerce-payment-review {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

#commerceView .commerce-sale-checkout-side {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(48px, auto) minmax(64px, auto);
  gap: 8px;
}

#commerceView .commerce-sale-checkout .commerce-payment-table {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#commerceView .commerce-sale-checkout .commerce-payment-table.has-overflow-items {
  overflow-x: hidden;
  overflow-y: auto;
}

#commerceView .commerce-sale-checkout .commerce-payment-table thead tr {
  height: 31px;
}

#commerceView .commerce-sale-checkout .commerce-payment-table tbody tr {
  height: 43px;
}

#commerceView .commerce-sale-checkout .commerce-payment-empty td {
  vertical-align: middle;
  white-space: normal;
  font-weight: 600;
}

#commerceView .commerce-sale-checkout .commerce-payment-summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  height: auto;
  margin: 0;
}

#commerceView .commerce-sale-checkout .commerce-sale-actions {
  min-height: 64px;
  height: auto;
  padding: 5px;
  margin: 0;
}

#commerceView .commerce-sale-checkout #commerceSaleSubmitButton {
  display: grid;
  place-content: center;
  gap: 2px;
  width: 100%;
  min-height: 58px;
  padding: 8px 14px;
}

#commerceView .commerce-sale-checkout #commerceSaleSubmitButton span {
  font-size: 15px;
  font-weight: 800;
}

#commerceView .commerce-sale-checkout #commerceSaleSubmitButton strong {
  color: inherit;
  font-size: 18px;
  line-height: 1;
}

:root[data-theme="dark"] #commerceView .commerce-sale-payment-panel,
:root[data-theme="dark"] #commerceView .commerce-sale-payment-heading {
  border-color: #3b5c61;
  background: #1b3034;
  color: #e7f2f1;
}

@media (min-width: 981px) {
  #commerceView.commerce-sale-active .commerce-sale-form {
    grid-template-rows: auto auto minmax(72px, 1.25fr) auto minmax(168px, 0.75fr);
    grid-template-areas:
      "context total"
      "fiscal payment"
      "cart cart"
      "delivery delivery"
      "checkout checkout";
  }

  #commerceView.commerce-sale-active .commerce-sale-payment-panel {
    grid-area: payment;
  }

  #commerceView.commerce-sale-active .commerce-sale-checkout {
    grid-area: checkout;
    min-height: 168px;
  }

  #commerceView.commerce-sale-active .commerce-sale-checkout-side {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
    grid-template-rows: auto minmax(58px, 1fr);
    grid-template-areas:
      "details details"
      "summary actions";
    gap: 6px;
  }

  #commerceView.commerce-sale-active .commerce-sale-checkout-side .commerce-sale-details {
    grid-area: details;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 6px;
  }

  #commerceView.commerce-sale-active .commerce-sale-checkout-side .commerce-payment-summary {
    grid-area: summary;
  }

  #commerceView.commerce-sale-active .commerce-sale-checkout-side .commerce-sale-actions {
    grid-area: actions;
  }

  #commerceView.commerce-sale-active .commerce-sale-checkout-side .commerce-adjustment-grid {
    display: contents;
  }

  #commerceView.commerce-sale-active .commerce-sale-checkout-side .commerce-sale-details {
    grid-template-columns: minmax(92px, 0.55fr) minmax(92px, 0.55fr) minmax(170px, 1.4fr);
  }

  #commerceView.commerce-sale-active .commerce-sale-checkout-side .commerce-observation-field textarea {
    min-height: 34px;
    height: 34px;
  }

  #commerceView.commerce-sale-active .commerce-payment-grid {
    grid-template-columns: minmax(120px, 1fr) minmax(86px, 0.7fr) minmax(100px, 0.82fr) minmax(135px, 0.95fr);
    padding: 6px 8px;
    gap: 6px;
  }

  #commerceView.commerce-sale-active .commerce-sale-fiscal-status {
    min-height: 0;
    margin-top: 3px;
    padding: 3px 6px;
    font-size: 10px;
  }

  #commerceView.commerce-sale-active .commerce-payment-review,
  #commerceView.commerce-sale-active .commerce-payment-table {
    height: 100%;
    max-height: none;
  }
}

@media (min-width: 981px) and (max-height: 820px) {
  #commerceView.commerce-sale-active .commerce-sale-form {
    grid-template-rows: auto auto minmax(48px, 1fr) auto minmax(146px, 0.72fr);
  }

  #commerceView.commerce-sale-active .commerce-sale-form label {
    gap: 2px;
  }

  #commerceView.commerce-sale-active .commerce-sale-form input,
  #commerceView.commerce-sale-active .commerce-sale-form select {
    min-height: 32px;
  }

  #commerceView.commerce-sale-active .commerce-sale-fiscal-grid,
  #commerceView.commerce-sale-active .commerce-payment-grid {
    padding: 4px 6px;
  }

  #commerceView.commerce-sale-active .commerce-observation-field textarea {
    min-height: 28px;
    height: 28px;
  }

  #commerceView.commerce-sale-active .commerce-sale-checkout {
    min-height: 146px;
  }

  #commerceView.commerce-sale-active .commerce-sale-checkout-side {
    grid-template-rows: auto minmax(52px, 1fr);
    gap: 5px;
  }

  #commerceView .commerce-sale-checkout #commerceSaleSubmitButton {
    min-height: 48px;
    padding-block: 4px;
  }

#commerceView .commerce-sale-checkout .commerce-payment-table th,
#commerceView .commerce-sale-checkout .commerce-payment-table td {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.05;
  }
}

/* Nova Venda: no desktop minimo o fluxo reorganiza, nunca oculta ou comprime a operacao. */
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-workbench,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form,
#commerceView.vasi-root-form.commerce-sale-active .commerce-workbench-panel {
  min-width: 0;
  max-width: 100%;
}

#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
  height: auto;
  overflow: visible;
}

#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid,
#commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details,
#commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid {
  min-width: 0;
  max-width: 100%;
}

#commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table {
  max-width: 100%;
  overflow-x: auto;
}

#commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table table {
  min-width: 720px;
}

#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form input,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form select,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form textarea,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form button {
  min-width: 0;
  max-width: 100%;
}

#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side,
#commerceView.vasi-root-form.commerce-sale-active .commerce-payment-review,
#commerceView.vasi-root-form.commerce-sale-active .commerce-payment-table {
  min-width: 0;
  max-width: 100%;
}

#commerceView.vasi-root-form > .commerce-tabbar {
  border-color: color-mix(in srgb, var(--vasi-blue) 42%, var(--line));
  background: linear-gradient(110deg, var(--vasi-navy-2), var(--vasi-navy) 56%, color-mix(in srgb, var(--vasi-cyan) 44%, var(--vasi-navy)));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--vasi-navy) 16%, transparent);
}

#commerceView.vasi-root-form > .commerce-tabbar::after {
  background: linear-gradient(90deg, var(--vasi-blue), var(--vasi-cyan), var(--vasi-green));
}

#commerceView.vasi-root-form > .commerce-tabbar .feature-tab {
  border-color: color-mix(in srgb, white 28%, transparent);
  background: color-mix(in srgb, white 10%, transparent);
  color: white;
}

#commerceView.vasi-root-form > .commerce-tabbar .feature-tab:hover,
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab:focus-visible {
  border-color: var(--vasi-cyan);
  background: color-mix(in srgb, var(--vasi-cyan) 26%, transparent);
  color: white;
}

#commerceView.vasi-root-form > .commerce-tabbar .feature-tab.active {
  border-color: white;
  background: linear-gradient(135deg, var(--vasi-blue), var(--vasi-cyan));
  color: white;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--vasi-blue) 28%, transparent);
}

@media (max-width: 1240px) {
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    overflow: visible;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-workbench-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-product-gallery {
    max-height: 360px;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    gap: var(--vasi-shell-space-4);
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form > * {
    grid-area: auto;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form .form-actions {
    width: 100%;
  }
}

@media (max-width: 760px) {
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-product-gallery {
    max-height: none;
  }
}

@media (max-width: 980px) {
  #commerceView .commerce-sale-checkout {
    grid-template-columns: 1fr;
  }

  #commerceView .commerce-payment-review {
    min-height: 150px;
  }

  #commerceView .commerce-sale-checkout-side {
    grid-template-rows: auto auto auto;
  }

  #commerceView .commerce-sale-checkout-side .commerce-sale-details {
    grid-template-columns: 1fr;
  }

  #commerceView .commerce-sale-checkout .commerce-payment-table,
  #commerceView .commerce-sale-checkout .commerce-payment-summary,
  #commerceView .commerce-sale-checkout .commerce-sale-actions {
    height: auto;
    min-height: 54px;
  }
}

/* VASI Contabil */
.accounting-view {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.accounting-view[hidden] {
  display: none;
}

.accounting-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--accent-border);
  border-left: 5px solid var(--primary);
  border-radius: 8px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 44%),
    var(--surface-gradient);
  box-shadow: var(--shadow);
}

.accounting-hero-copy,
.accounting-hero-context,
.accounting-toolbar-copy,
.accounting-section-heading > div {
  display: grid;
  gap: 4px;
}

.accounting-hero h1,
.accounting-section h2,
.accounting-sidebar h2,
.accounting-create-panel h2 {
  margin: 0;
  letter-spacing: 0;
}

.accounting-hero h1 {
  font-size: 26px;
}

.accounting-hero p,
.accounting-section-heading span,
.accounting-hero-context > span,
.accounting-toolbar-copy span {
  margin: 0;
  color: var(--muted);
}

.accounting-kicker {
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.accounting-hero-context {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.accounting-hero-context strong {
  font-size: 18px;
}

.accounting-hero-actions,
.accounting-toolbar-actions,
.accounting-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.accounting-status-badge,
.accounting-mini-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, var(--panel));
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
}

.accounting-status-badge[data-status="FECHADA"],
.accounting-mini-status[data-status="CANCELADO"] {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
  background: color-mix(in srgb, var(--danger) 9%, var(--panel));
  color: var(--danger);
}

.accounting-status-badge[data-status="PENDENTE"],
.accounting-mini-status[data-status="RASCUNHO"],
.accounting-mini-status[data-status="PENDENTE"] {
  border-color: color-mix(in srgb, #b38217 35%, var(--line));
  background: color-mix(in srgb, #d69e2e 10%, var(--panel));
  color: color-mix(in srgb, #8a5b00 85%, var(--text));
}

.accounting-create-panel,
.accounting-section,
.accounting-sidebar,
.accounting-content {
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  background: var(--module-gradient);
}

.accounting-create-panel {
  padding: 14px;
}

.accounting-inline-form {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) 120px 140px minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.accounting-inline-form label,
.accounting-form label,
.accounting-upload-form label,
.accounting-sidebar label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.accounting-message {
  min-height: 20px;
  margin: 0;
  padding: 0 4px;
  font-weight: 700;
}

.accounting-message[data-type="success"] {
  color: var(--income);
}

.accounting-message[data-type="error"] {
  color: var(--danger);
}

.accounting-workbench {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.accounting-sidebar {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 104px);
  padding: 12px;
  overflow: hidden;
}

.accounting-section-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.accounting-section-heading h2 {
  font-size: 18px;
}

.accounting-sidebar .accounting-section-heading {
  align-items: end;
}

.accounting-sidebar .accounting-section-heading label {
  width: 92px;
}

.accounting-competence-list {
  display: grid;
  gap: 7px;
  overflow-y: auto;
}

.accounting-competence-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.accounting-competence-item:hover,
.accounting-competence-item:focus-visible {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 14%, transparent);
}

.accounting-competence-item.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--panel));
  box-shadow: inset 4px 0 0 var(--primary);
}

.accounting-competence-item > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.accounting-competence-item small,
.accounting-cell-note {
  display: block;
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.accounting-content {
  min-width: 0;
  padding: 13px;
}

.accounting-empty {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 30px;
  color: var(--muted);
  text-align: center;
}

.accounting-empty strong {
  color: var(--text);
  font-size: 20px;
}

.accounting-empty[hidden],
.accounting-panel[hidden],
.accounting-create-panel[hidden],
.is-status-hidden {
  display: none !important;
}

.accounting-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.accounting-toolbar-copy strong {
  color: var(--primary-dark);
}

.accounting-summary-grid,
.accounting-conference-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 9px;
  margin: 12px 0;
}

.accounting-conference-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.accounting-summary-card {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 105px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.accounting-summary-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--primary);
  content: "";
}

.accounting-summary-card[data-tone="rose"]::before { background: #c45d76; }
.accounting-summary-card[data-tone="blue"]::before { background: #3d8ec2; }
.accounting-summary-card[data-tone="amber"]::before { background: #c2952f; }
.accounting-summary-card[data-tone="green"]::before { background: #55a96b; }
.accounting-summary-card[data-tone="violet"]::before { background: #7772c5; }

.accounting-summary-card > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.accounting-summary-card > strong {
  font-size: 20px;
  overflow-wrap: anywhere;
}

.accounting-summary-card > small {
  color: var(--muted);
  line-height: 1.3;
}

.accounting-tabs {
  margin: 0 0 12px;
  overflow-x: auto;
}

.accounting-panel {
  min-width: 0;
}

.accounting-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.accounting-section {
  min-width: 0;
  margin-bottom: 12px;
  padding: 13px;
}

.accounting-form-layout {
  align-items: start;
}

.accounting-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

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

.accounting-upload-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 9px;
  align-items: end;
  margin-top: 12px;
}

.accounting-upload-form .accounting-form-wide {
  grid-column: span 3;
}

.accounting-auto-read-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.accounting-table-wrap {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.accounting-table-wrap table {
  min-width: 680px;
}

.accounting-table-wrap td,
.accounting-table-wrap th {
  vertical-align: top;
}

.accounting-row-muted {
  opacity: 0.58;
}

.accounting-row-actions {
  min-width: 126px;
}

.icon-text-button {
  min-height: 31px;
  padding: 5px 8px;
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  background: var(--control-gradient);
  color: var(--primary-dark);
  font-weight: 800;
  cursor: pointer;
}

.icon-text-button.danger {
  color: var(--danger);
}

.accounting-comment-form {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.accounting-comment-list {
  display: grid;
  gap: 7px;
  max-height: 350px;
  margin-top: 10px;
  overflow-y: auto;
}

.accounting-comment {
  padding: 9px;
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--panel));
}

.accounting-comment p {
  margin: 0 0 5px;
  white-space: pre-wrap;
}

.accounting-comment small {
  color: var(--muted);
}

.accounting-conference-layout {
  align-items: start;
}

.accounting-checklist,
.accounting-blocker-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.accounting-check-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.accounting-check-item > span {
  display: grid;
  gap: 3px;
}

.accounting-check-item small {
  color: var(--muted);
}

.accounting-blocker,
.accounting-ready-state {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, #c2952f 34%, var(--line));
  border-left: 4px solid #c2952f;
  border-radius: 7px;
  background: color-mix(in srgb, #c2952f 7%, var(--panel));
}

.accounting-ready-state {
  border-color: color-mix(in srgb, var(--income) 30%, var(--line));
  border-left-color: var(--income);
  background: color-mix(in srgb, var(--income) 7%, var(--panel));
}

.accounting-review-dialog {
  width: min(620px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.accounting-review-dialog::backdrop {
  background: rgba(12, 27, 31, 0.58);
}

.accounting-review-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.accounting-review-summary {
  margin: 0;
  padding: 9px 11px;
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, var(--panel));
  color: var(--muted);
}

:root[data-theme="dark"] .accounting-hero,
:root[data-theme="dark"] .accounting-create-panel,
:root[data-theme="dark"] .accounting-section,
:root[data-theme="dark"] .accounting-sidebar,
:root[data-theme="dark"] .accounting-content {
  background:
    linear-gradient(145deg, rgba(27, 48, 52, 0.98), rgba(22, 39, 44, 0.98));
}

:root[data-theme="dark"] .accounting-summary-card,
:root[data-theme="dark"] .accounting-competence-item,
:root[data-theme="dark"] .accounting-check-item,
:root[data-theme="dark"] .accounting-review-dialog {
  background: #17292d;
  color: #eef7f6;
}

@media (max-width: 1380px) {
  .accounting-summary-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .accounting-upload-form {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .accounting-upload-form .accounting-form-wide {
    grid-column: span 2;
  }
}

@media (max-width: 1080px) {
  .accounting-hero {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
  }

  .accounting-hero-actions {
    grid-column: 1 / -1;
  }

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

  .accounting-inline-form > div:first-child,
  .accounting-inline-form .accounting-form-wide {
    grid-column: 1 / -1;
  }

  .accounting-workbench {
    grid-template-columns: 1fr;
  }

  .accounting-sidebar {
    position: static;
    max-height: none;
  }

  .accounting-competence-list {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    overflow-x: auto;
  }

  .accounting-toolbar {
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .accounting-view {
    padding: 8px;
  }

  .accounting-hero {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .accounting-hero-context {
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .accounting-workbench,
  .accounting-two-column,
  .accounting-form .form-grid,
  .accounting-inline-form,
  .accounting-upload-form,
  .accounting-summary-grid,
  .accounting-conference-grid {
    grid-template-columns: 1fr;
  }

  .accounting-competence-list {
    grid-template-columns: 1fr;
  }

  .accounting-upload-form .accounting-form-wide,
  .accounting-inline-form > div:first-child,
  .accounting-inline-form .accounting-form-wide {
    grid-column: auto;
  }

  .accounting-toolbar,
  .accounting-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .accounting-toolbar-actions > button,
  .accounting-hero-actions > button {
    flex: 1 1 145px;
  }
}

@media (min-width: 981px) and (max-width: 1380px) {
  #commerceView.commerce-sale-active .commerce-payment-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  }

  #commerceView.commerce-sale-active .commerce-payment-grid > label,
  #commerceView.commerce-sale-active .commerce-payment-grid > button {
    min-width: 0;
  }
}

/* VASI Clinical Premium 2026 - final scoped layer. */
:root {
  --clinical-ink: #123f4d;
  --clinical-blue: #3979a8;
  --clinical-cyan: #1687aa;
  --clinical-green: #25826f;
  --clinical-violet: #735ba6;
  --clinical-amber: #b78025;
  --clinical-danger: #a64d5d;
  --clinical-border: color-mix(in srgb, var(--primary) 24%, var(--line));
  --clinical-elevation: 0 14px 38px rgba(18, 63, 77, .11);
  --clinical-action: linear-gradient(118deg, #176f73 0%, #1687aa 52%, #25826f 100%);
  --clinical-hero: linear-gradient(122deg, color-mix(in srgb, #3979a8 13%, var(--panel)), color-mix(in srgb, #1687aa 9%, var(--panel)) 48%, color-mix(in srgb, #25826f 12%, var(--panel)));
  --clinical-card: linear-gradient(145deg, color-mix(in srgb, #fff 96%, #3979a8), color-mix(in srgb, var(--panel) 94%, #dff5f0));
}

/* Explicit contrast prevents active PEP/Pacientes entries from becoming blank. */
[data-module-subnav="prontuario"] {
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--clinical-border);
  border-radius: 14px;
  background: var(--clinical-hero);
  box-shadow: var(--clinical-elevation);
}

[data-module-subnav="prontuario"] .feature-tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--clinical-border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 88%, #e7f4f5);
  color: var(--clinical-ink);
  font-weight: 800;
  white-space: nowrap;
}

[data-module-subnav="prontuario"] .feature-tab:hover,
[data-module-subnav="prontuario"] .feature-tab:focus-visible {
  border-color: var(--clinical-cyan);
  background: linear-gradient(135deg, color-mix(in srgb, #3979a8 14%, var(--panel)), color-mix(in srgb, #25826f 12%, var(--panel)));
  color: var(--clinical-ink);
}

[data-module-subnav="prontuario"] .feature-tab.active,
[data-module-subnav="prontuario"] .feature-tab.active:hover,
[data-module-subnav="prontuario"] .feature-tab.active:focus-visible {
  border-color: #176f73 !important;
  background-color: #176f73 !important;
  background-image: var(--clinical-action) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  box-shadow: 0 8px 20px rgba(22, 111, 115, .25), inset 0 1px 0 rgba(255, 255, 255, .22);
}

#appointmentsView .appointment-workspace,
#medicalRecordsView .entry-panel,
#medicalRecordsView .records-panel {
  border: 1px solid var(--clinical-border);
  border-radius: 14px;
  background: var(--clinical-card);
  box-shadow: var(--clinical-elevation);
}

#appointmentsView .appointment-toolbar,
#medicalRecordsView .patient-center-heading,
#medicalRecordsView .evolution-workspace-header,
.appointment-results-heading,
.appointment-day-roster > header,
.appointment-week-planner > header {
  border-bottom: 1px solid var(--clinical-border);
  background: var(--clinical-hero);
}

#appointmentsView .appointment-toolbar { padding: 14px 16px; border-radius: 12px; }
#appointmentsView .segmented-tabs { padding: 4px; border: 1px solid var(--clinical-border); border-radius: 10px; background: color-mix(in srgb, var(--panel) 82%, transparent); }
#appointmentsView .segmented-tabs .active { border-color: #176f73; background: var(--clinical-action); color: #fff; box-shadow: 0 6px 16px rgba(22, 111, 115, .22); }
#appointmentsView .appointment-filters { padding: 10px; border: 1px solid var(--clinical-border); border-radius: 12px; background: color-mix(in srgb, var(--panel) 90%, #e6f4f5); }
#appointmentsView .appointment-editor .compact-form { padding: 14px; border: 1px solid var(--clinical-border); border-left: 0; border-radius: 12px; background: var(--clinical-card); box-shadow: 0 9px 24px rgba(18, 63, 77, .08); }
#appointmentsView .appointment-form-heading { margin: -14px -14px 2px; padding: 12px 14px; border-radius: 11px 11px 0 0; background: var(--clinical-hero); }
#appointmentsView .appointment-board-wrap,
#appointmentsView #appointmentListWrap,
#appointmentsView .appointment-dashboard { border-radius: 12px; background: color-mix(in srgb, var(--panel) 96%, #e9f5f5); }

.appointment-roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.appointment-roster-card,
.appointment-week-card { border-radius: 11px; background: var(--clinical-card); box-shadow: 0 6px 18px rgba(18, 63, 77, .08); transition: transform .16s ease, box-shadow .16s ease; }
.appointment-roster-card:hover,
.appointment-week-card:hover,
.appointment-week-card:focus-visible { transform: translateY(-2px); box-shadow: 0 11px 24px rgba(18, 63, 77, .14); }
.appointment-week-planner,
.appointment-day-roster { border-color: var(--clinical-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(18, 63, 77, .07); }
.appointment-week-day > header { min-height: 62px; background: linear-gradient(145deg, color-mix(in srgb, #3979a8 11%, var(--panel)), color-mix(in srgb, #25826f 9%, var(--panel))); }
.appointment-week-day.is-today > header { background: linear-gradient(135deg, color-mix(in srgb, #1687aa 23%, var(--panel)), color-mix(in srgb, #25826f 16%, var(--panel))); }

.appointment-dashboard-grid > article { border: 1px solid var(--clinical-border); border-radius: 12px; background: var(--clinical-card); }
.appointment-kpi { border: 1px solid color-mix(in srgb, var(--kpi-color, var(--primary)) 30%, var(--line)); border-top: 4px solid var(--kpi-color, var(--primary)); border-radius: 12px; }
#appointmentListWrap { border: 1px solid var(--clinical-border); }
#appointmentListWrap thead th { background: var(--clinical-hero); color: var(--clinical-ink); }
#appointmentListWrap tbody tr:nth-child(even),
.patient-only-mode .records-panel tbody tr:nth-child(even) { background: color-mix(in srgb, #1687aa 3.5%, var(--panel)); }
#appointmentListWrap tbody tr:hover,
.patient-only-mode .records-panel tbody tr:hover { background: color-mix(in srgb, #1687aa 8%, var(--panel)); }

#medicalRecordsView .entry-panel { padding: 16px; }
#medicalRecordsView .patient-center-heading { margin: -16px -16px 12px; padding: 14px 16px; border-radius: 13px 13px 0 0; }
#medicalRecordsView .patient-search-panel,
#medicalRecordsView .record-search-panel,
#medicalRecordsView #patientForm { border-radius: 11px; background: color-mix(in srgb, var(--panel) 93%, #e7f4f5); }
#medicalRecordsView .patient-form-tabs { gap: 7px; padding: 6px; border: 1px solid var(--clinical-border); border-radius: 10px; background: var(--clinical-hero); }
#medicalRecordsView .patient-form-tabs button.active { border-color: #176f73; background: var(--clinical-action); color: #fff; box-shadow: 0 6px 16px rgba(22, 111, 115, .2); }
#medicalRecordsView .records-panel > .records-header,
#medicalRecordsView .evolution-workspace-header { padding: 14px 16px; border-radius: 12px 12px 0 0; }
#medicalRecordsView .evolution-patient-summary { border-color: var(--clinical-border); background: linear-gradient(120deg, color-mix(in srgb, #3979a8 10%, var(--panel)), color-mix(in srgb, #25826f 10%, var(--panel))); }
#medicalRecordsView .anamnesis-panel,
#medicalRecordsView #evolutionForm,
#medicalRecordsView .evolution-history-layout { border-radius: 12px; box-shadow: 0 8px 22px rgba(18, 63, 77, .08); }
#medicalRecordsView .anamnesis-panel > .records-header { background: linear-gradient(120deg, color-mix(in srgb, #735ba6 13%, var(--panel)), color-mix(in srgb, #3979a8 9%, var(--panel))); }

#medicalRecordsView input:focus,
#medicalRecordsView select:focus,
#medicalRecordsView textarea:focus,
#appointmentsView input:focus,
#appointmentsView select:focus,
#appointmentsView textarea:focus { border-color: var(--clinical-cyan); outline: 3px solid color-mix(in srgb, var(--clinical-cyan) 17%, transparent); }

:root[data-theme="dark"] { --clinical-ink: #e7faf8; --clinical-border: rgba(95, 194, 184, .3); --clinical-card: linear-gradient(145deg, #172a2f, #13252b); --clinical-hero: linear-gradient(122deg, rgba(39, 88, 104, .82), rgba(23, 82, 83, .82) 52%, rgba(31, 91, 75, .78)); }
:root[data-theme="dark"] [data-module-subnav="prontuario"] .feature-tab { border-color: rgba(95, 194, 184, .28); background: #1b3036; color: #e7faf8; }
:root[data-theme="dark"] [data-module-subnav="prontuario"] .feature-tab:hover,
:root[data-theme="dark"] [data-module-subnav="prontuario"] .feature-tab:focus-visible { background: linear-gradient(135deg, #24454f, #1d403b); color: #fff; }

@media (min-width: 981px) {
  #appointmentsView.clinical-focus-active,
  #medicalRecordsView.clinical-focus-active { height: 100dvh; overflow: hidden; }
  #appointmentsView.clinical-focus-active > .appointment-workspace { grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; overflow: hidden; }
  #appointmentsView.clinical-focus-active .appointment-layout,
  #appointmentsView.clinical-focus-active .appointment-board-wrap,
  #appointmentsView.clinical-focus-active .appointment-dashboard,
  #appointmentsView.clinical-focus-active .appointment-board,
  #appointmentsView.clinical-focus-active #appointmentListWrap { min-height: 0; }
  #medicalRecordsView.clinical-focus-active > .layout.module-content { min-height: 0; overflow: auto; }
}

@media (max-width: 1280px) {
  .appointment-roster-grid { grid-template-columns: 1fr; }
  [data-module-subnav="prontuario"] .feature-tab { padding-inline: 12px; }
}

@media (max-width: 760px) {
  [data-module-subnav="prontuario"] { border-radius: 10px; }
  #appointmentsView .appointment-toolbar { align-items: stretch; }
  .appointment-roster-grid { padding: 8px; }
}

/* Clinical cockpit: same viewport strategy used by Comercial > Nova Venda. */
@media (min-width: 981px) {
  body.clinical-workspace-active {
    height: 100dvh;
    overflow: hidden !important;
  }

  /* Internal clinical screens keep the shared VASI Pulse navigation visible. */
  body.clinical-workspace-active #moduleNav {
    display: flex !important;
  }

  body.clinical-workspace-active #appShell > .topbar {
    display: none !important;
  }

  body.clinical-workspace-active #appShell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active,
  #appointmentsView.clinical-focus-active {
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    height: 100dvh;
    padding: 6px 10px 8px;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active > .module-tabs,
  #appointmentsView.clinical-focus-active > .module-tabs {
    position: static;
    min-height: 0;
    height: 54px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(18, 63, 77, .06);
  }

  #medicalRecordsView.clinical-focus-active > .module-tabs .feature-tab,
  #appointmentsView.clinical-focus-active > .module-tabs .feature-tab {
    min-height: 42px;
    padding: 6px clamp(12px, 1.2vw, 22px);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 94%, var(--primary));
    box-shadow: none;
  }

  #medicalRecordsView.clinical-focus-active > .module-tabs .feature-tab.active,
  #appointmentsView.clinical-focus-active > .module-tabs .feature-tab.active {
    background-color: var(--primary) !important;
    background-image: linear-gradient(100deg, var(--primary), color-mix(in srgb, var(--primary) 88%, #1687aa)) !important;
    color: #fff !important;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--primary) 18%, transparent);
  }

  #appointmentsView.clinical-focus-active > .appointment-workspace {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 7px;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 8px;
    overflow: hidden;
    border-radius: 11px;
    box-shadow: none;
  }

  #appointmentsView.clinical-focus-active .appointment-toolbar {
    min-height: 58px;
    padding: 7px 11px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 95%, var(--primary));
  }

  #appointmentsView.clinical-focus-active .appointment-toolbar h2 {
    font-size: 22px;
  }

  #appointmentsView.clinical-focus-active .appointment-toolbar .eyebrow,
  #appointmentsView.clinical-focus-active .appointment-toolbar .panel-copy {
    line-height: 1.15;
  }

  #appointmentsView.clinical-focus-active .appointment-filters {
    min-height: 48px;
    margin: 0;
    padding: 5px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 97%, var(--primary));
  }

  #appointmentsView.clinical-focus-active .appointment-filters input,
  #appointmentsView.clinical-focus-active .appointment-filters select,
  #appointmentsView.clinical-focus-active .appointment-filters button {
    min-height: 36px;
  }

  #appointmentsView.clinical-focus-active .appointment-layout {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 7px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #appointmentsView.clinical-focus-active .appointment-editor-collapsed {
    min-height: 50px;
    padding: 5px 9px;
    border-radius: 8px;
    overflow: hidden;
  }

  #appointmentsView.clinical-focus-active .appointment-editor-collapsed .appointment-form-heading {
    min-height: 38px;
    margin: 0;
    padding: 5px 8px;
    background: color-mix(in srgb, var(--panel) 94%, var(--primary));
  }

  #appointmentsView.clinical-focus-active .appointment-board-wrap {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #appointmentsView.clinical-focus-active .appointment-board,
  #appointmentsView.clinical-focus-active #appointmentListWrap,
  #appointmentsView.clinical-focus-active .appointment-dashboard {
    height: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  #medicalRecordsView.clinical-focus-active > .layout.module-content {
    display: grid;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode > .layout.module-content {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .entry-panel {
    display: grid;
    grid-template-columns: minmax(230px, .55fr) minmax(520px, 1.45fr);
    gap: 12px;
    min-height: 76px;
    padding: 8px 12px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: none;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .patient-center-heading {
    margin: -8px 0 -8px -12px;
    padding: 9px 12px;
    border: 0;
    border-right: 1px solid var(--clinical-border);
    border-radius: 9px 0 0 9px;
    background: color-mix(in srgb, var(--panel) 94%, var(--primary));
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .patient-search-panel {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding: 0;
    background: transparent;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .record-search-panel,
  #medicalRecordsView.clinical-focus-active.patient-only-mode .records-panel .evolution-panel {
    display: none !important;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .records-panel {
    height: 100%;
    min-height: 0;
    padding: 10px 12px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: none;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .records-panel > .records-header {
    min-height: 42px;
    padding: 5px 8px;
    background: transparent;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .medical-grid,
  #medicalRecordsView.clinical-focus-active.patient-only-mode .medical-grid > .table-wrap {
    height: 100%;
    min-height: 0;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .medical-grid > .table-wrap {
    overflow: auto;
    overscroll-behavior: contain;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .entry-panel {
    max-height: 86px;
    padding: 8px 12px;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .records-panel,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .medical-grid,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .evolution-panel {
    height: 100%;
    min-height: 0;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .evolution-panel {
    overflow: auto;
    overscroll-behavior: contain;
  }
}

@media (min-width: 981px) and (max-height: 800px) {
  #appointmentsView.clinical-focus-active,
  #medicalRecordsView.clinical-focus-active { grid-template-rows: 48px minmax(0, 1fr); gap: 5px; padding: 4px 8px 6px; }
  #appointmentsView.clinical-focus-active > .module-tabs,
  #medicalRecordsView.clinical-focus-active > .module-tabs { height: 48px; padding: 3px; }
  #appointmentsView.clinical-focus-active > .module-tabs .feature-tab,
  #medicalRecordsView.clinical-focus-active > .module-tabs .feature-tab { min-height: 40px; }
  #appointmentsView.clinical-focus-active .appointment-toolbar { min-height: 50px; }
  #appointmentsView.clinical-focus-active .appointment-toolbar .panel-copy { display: none; }
}

/* Clinical vertical density: maximize the operational canvas. */
@media (min-width: 981px) {
  #appointmentsView.clinical-focus-active,
  #medicalRecordsView.clinical-focus-active {
    grid-template-rows: 40px minmax(0, 1fr);
    gap: 4px;
    padding: 2px 6px 4px;
  }

  #appointmentsView.clinical-focus-active > .module-tabs,
  #medicalRecordsView.clinical-focus-active > .module-tabs {
    height: 40px;
    padding: 2px;
    border-radius: 7px;
    box-shadow: none;
  }

  #appointmentsView.clinical-focus-active > .module-tabs .feature-tab,
  #medicalRecordsView.clinical-focus-active > .module-tabs .feature-tab {
    min-height: 34px;
    height: 34px;
    padding-block: 3px;
    border-radius: 6px;
    font-size: 12px;
  }

  #appointmentsView.clinical-focus-active > .appointment-workspace {
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
  }

  #appointmentsView.clinical-focus-active .appointment-toolbar {
    min-height: 44px;
    padding: 4px 8px;
    border-radius: 6px;
  }

  #appointmentsView.clinical-focus-active .appointment-toolbar h2 {
    font-size: 19px;
    line-height: 1.05;
  }

  #appointmentsView.clinical-focus-active .appointment-toolbar .eyebrow {
    font-size: 9px;
  }

  #appointmentsView.clinical-focus-active .appointment-toolbar .panel-copy {
    display: none;
  }

  #appointmentsView.clinical-focus-active .appointment-toolbar-actions,
  #appointmentsView.clinical-focus-active .segmented-tabs {
    gap: 3px;
  }

  #appointmentsView.clinical-focus-active .appointment-toolbar-actions button {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
  }

  #appointmentsView.clinical-focus-active .appointment-filters {
    min-height: 40px;
    padding: 3px;
    gap: 4px;
    border-radius: 6px;
  }

  #appointmentsView.clinical-focus-active .appointment-filters input,
  #appointmentsView.clinical-focus-active .appointment-filters select,
  #appointmentsView.clinical-focus-active .appointment-filters button {
    min-height: 32px;
    height: 32px;
    padding-block: 3px;
    font-size: 12px;
  }

  #appointmentsView.clinical-focus-active .appointment-layout {
    gap: 4px;
  }

  #appointmentsView.clinical-focus-active .appointment-editor-collapsed {
    min-height: 40px;
    padding: 2px 5px;
    border-radius: 6px;
  }

  #appointmentsView.clinical-focus-active .appointment-editor-collapsed .appointment-form-heading {
    min-height: 34px;
    padding: 3px 6px;
    border-radius: 5px;
  }

  #appointmentsView.clinical-focus-active .appointment-editor-collapsed .appointment-form-heading h3 {
    font-size: 14px;
  }

  #appointmentsView.clinical-focus-active .appointment-results-heading,
  #appointmentsView.clinical-focus-active .appointment-day-roster > header,
  #appointmentsView.clinical-focus-active .appointment-week-planner > header {
    min-height: 38px;
    padding: 4px 10px;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode > .layout.module-content {
    gap: 4px;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .entry-panel {
    min-height: 56px;
    padding: 4px 8px;
    border-radius: 7px;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .patient-center-heading {
    margin: -4px 0 -4px -8px;
    padding: 5px 8px;
    border-radius: 6px 0 0 6px;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .patient-center-heading .eyebrow {
    font-size: 9px;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .patient-center-heading h2 {
    font-size: 18px;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .patient-search-panel input,
  #medicalRecordsView.clinical-focus-active.patient-only-mode .patient-search-panel button {
    min-height: 34px;
    height: 34px;
    padding-block: 3px;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .records-panel {
    padding: 5px 8px;
    border-radius: 7px;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .records-panel > .records-header {
    min-height: 34px;
    padding: 2px 5px;
  }

  #medicalRecordsView.clinical-focus-active.patient-only-mode .records-panel > .records-header h2 {
    font-size: 17px;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .entry-panel {
    max-height: 68px;
    padding: 4px 8px;
  }
}

/* Portal: identidade da empresa em primeiro plano */
@media (min-width: 1101px) {
  .portal-company-brand {
    grid-template-columns: 292px minmax(0, 1fr);
    gap: 28px;
  }

  .portal-company-logo-frame {
    width: 292px;
    height: 166px;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--primary) 32%, rgba(255, 255, 255, 0.9));
    border-radius: 14px;
    background:
      radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 1) 0 46%, rgba(240, 250, 248, 0.96) 100%);
    box-shadow:
      0 18px 38px rgba(23, 50, 60, 0.16),
      0 0 0 7px color-mix(in srgb, var(--primary) 7%, transparent);
  }

  .portal-company-logo-frame .portal-company-logo {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    object-position: center;
    background: transparent;
    box-shadow: none;
    transform: scale(1.55);
    transform-origin: center;
  }
}

/* PEP desktop: barra de contexto completa e evolucao usando o restante da viewport */
@media (min-width: 981px) {
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) > .layout.module-content {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .entry-panel {
    display: none;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .patient-center-heading {
    height: 100%;
    margin: -5px 0 -5px -8px;
    padding: 8px 12px;
    border-radius: 9px 0 0 9px;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .patient-search-panel,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .record-search-panel {
    min-width: 0;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .patient-search-panel > *,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .record-search-panel > *,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .record-search-panel .form-grid > * {
    min-width: 0;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .record-search-panel > .form-grid {
    grid-template-columns: minmax(250px, 1.15fr) minmax(190px, .85fr) auto;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .record-search-panel .form-section-title,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .record-search-panel .filter-hint {
    display: none;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .records-panel {
    display: grid;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 0 minmax(0, 1fr);
    height: 100%;
    padding: 4px 6px 6px;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .records-panel > .records-header {
    grid-row: 1;
    display: none;
    min-height: 34px;
    padding: 2px 6px;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .records-panel > .patient-form-host {
    display: none;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .records-panel > .medical-grid {
    grid-row: 2;
    grid-column: 1;
    min-width: 0;
    min-height: 0;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .records-panel > .records-header h2 {
    font-size: 17px;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .medical-grid {
    display: grid;
    grid-template-rows: 0 minmax(0, 1fr);
    gap: 5px;
    height: 100%;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .medical-grid > .table-wrap {
    display: none;
    width: 100%;
    height: 106px;
    max-height: none;
    overflow: auto;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode).patient-results-visible .records-panel {
    grid-template-rows: 34px minmax(0, 1fr);
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode).patient-results-visible .records-panel > .records-header {
    display: flex;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode).patient-results-visible .medical-grid {
    grid-template-rows: 96px minmax(0, 1fr);
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode).patient-results-visible .medical-grid > .table-wrap {
    display: block;
    height: 96px;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .evolution-panel {
    display: grid;
    grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr);
    grid-template-areas: "heading heading" "patient patient" "anamnesis evolution" "history history";
    align-content: start;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 6px 8px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .anamnesis-panel,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .evolution-form,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .evolution-history {
    min-width: 0;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .anamnesis-panel textarea {
    min-height: 180px;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) #evolutionForm > label:has(textarea[name="summary"]) {
    grid-column: 1 / -1;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) #evolutionForm > label:has(textarea[name="conduct"]) {
    grid-column: 1;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) #evolutionForm > label:has(textarea[name="private_notes"]) {
    grid-column: 2;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) #evolutionForm textarea[name="summary"] {
    min-height: 112px;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) #evolutionForm textarea[name="conduct"],
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) #evolutionForm textarea[name="private_notes"] {
    min-height: 72px;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .evolution-history-layout {
    min-height: 150px;
    max-height: 190px;
  }
}

@media (min-width: 1101px) and (max-width: 1450px) {
  .portal-company-brand {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 22px;
  }

  .portal-company-logo-frame {
    width: 250px;
    height: 150px;
  }
}

:root[data-theme="dark"] .portal-company-logo-frame {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.98) 0 48%, rgba(224, 242, 239, 0.96) 100%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.32),
    0 0 0 7px color-mix(in srgb, var(--primary) 13%, transparent);
}

/* Cabecalho: empresa e usuario legiveis em duas linhas */
.topbar-actions .user-badge {
  display: grid;
  align-content: center;
  gap: 1px;
  width: clamp(210px, 18vw, 300px);
  max-width: 300px;
  min-height: 40px;
  padding: 5px 12px;
  overflow: hidden;
  border-radius: 12px;
  line-height: 1.12;
  white-space: normal;
}

.topbar-actions .user-badge strong,
.topbar-actions .user-badge span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions .user-badge strong {
  color: var(--primary-dark);
  font-size: 11px;
}

/* Evolucao clinica: selecao orientada e atendimento integral na viewport. */
@media (min-width: 981px) {
  #medicalRecordsView.clinical-focus-active {
    grid-template-rows: 38px minmax(0, 1fr);
    gap: 3px;
    width: 100%;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    padding: 2px 5px 4px;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active > .module-tabs {
    height: 38px;
    min-height: 0;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active > .module-tabs .feature-tab {
    height: 32px;
    min-height: 32px;
    padding: 2px 10px;
    font-size: 11px;
  }

  #medicalRecordsView.clinical-focus-active > .layout.module-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) .entry-panel {
    display: grid;
    grid-row: 1;
    grid-template-columns: minmax(220px, .45fr) minmax(460px, 1.55fr);
    align-items: center;
    gap: 12px;
    width: min(1120px, calc(100% - 36px));
    min-height: 92px;
    margin: 12px auto 0;
    padding: 10px 14px;
    overflow: visible;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) .patient-center-heading {
    height: 100%;
    margin: -10px 0 -10px -14px;
    padding: 14px 18px;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) .patient-search-panel {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) .record-search-panel,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) .anamnesis-panel,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) #evolutionForm,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) .evolution-history-layout {
    display: none;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) .records-panel {
    grid-row: 2;
    width: min(1120px, calc(100% - 36px));
    height: 100%;
    margin: 0 auto 12px;
    padding: 8px;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) .records-panel > .records-header {
    display: none;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) .medical-grid {
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) .medical-grid > .table-wrap {
    display: block;
    grid-row: 1;
    width: 100%;
    height: auto;
    max-height: 100%;
    overflow: auto;
  }

  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode):not(.has-selected-patient) .evolution-panel {
    display: grid;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "patient";
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 150px;
    padding: 8px;
    overflow: visible;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient:not(.patient-only-mode) > .layout.module-content {
    grid-template-rows: minmax(0, 1fr);
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient:not(.patient-only-mode) .entry-panel,
  #medicalRecordsView.clinical-focus-active.has-selected-patient:not(.patient-only-mode) .records-panel > .records-header,
  #medicalRecordsView.clinical-focus-active.has-selected-patient:not(.patient-only-mode) .medical-grid > .table-wrap,
  #medicalRecordsView.clinical-focus-active.has-selected-patient:not(.patient-only-mode) .records-panel > .patient-form-host {
    display: none;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient:not(.patient-only-mode) .records-panel {
    grid-row: 1;
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient:not(.patient-only-mode) .medical-grid {
    display: grid;
    grid-row: 1;
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient:not(.patient-only-mode) .evolution-panel {
    display: grid;
    grid-row: 1;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
    grid-template-rows: 48px auto minmax(205px, .82fr) minmax(270px, 1.18fr);
    grid-template-areas: "heading heading" "patient history" "anamnesis history" "evolution history";
    align-content: stretch;
    gap: 7px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient .evolution-workspace-header {
    min-height: 48px;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid var(--clinical-border);
    border-radius: 9px;
  }

  #medicalRecordsView.clinical-focus-active .evolution-workspace-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  #medicalRecordsView.clinical-focus-active .evolution-workspace-actions button {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient .evolution-patient-summary {
    position: static;
    grid-area: patient;
    grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(110px, 1fr));
    margin: 0;
    padding: 6px;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient .evolution-patient-summary > article {
    padding: 6px 8px;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient .anamnesis-panel {
    grid-area: anamnesis;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 8px;
    overflow: auto;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient #evolutionForm {
    grid-area: evolution;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 8px;
    overflow: auto;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient .evolution-history-layout {
    grid-area: history;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(220px, 1fr) minmax(130px, .55fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient .evolution-tree-panel,
  #medicalRecordsView.clinical-focus-active.has-selected-patient .evolution-detail {
    min-width: 0;
    min-height: 0;
    overflow: auto;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient #evolutionForm > .form-actions,
  #medicalRecordsView.clinical-focus-active.has-selected-patient .anamnesis-panel form > .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
  }
}

@media (min-width: 981px) and (max-height: 800px) {
  #medicalRecordsView.clinical-focus-active.has-selected-patient:not(.patient-only-mode) .evolution-panel {
    grid-template-rows: 44px auto minmax(175px, .76fr) minmax(235px, 1.24fr);
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient .anamnesis-panel textarea {
    min-height: 110px;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient #evolutionForm textarea[name="summary"] {
    min-height: 90px;
  }
}

@media (max-width: 980px) {
  #medicalRecordsView .evolution-workspace-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}

.topbar-actions .user-badge span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .topbar-actions .user-badge {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 1101px) {
  body:not(.clinical-workspace-active) .topbar-actions {
    flex-wrap: nowrap;
  }

  body:not(.clinical-workspace-active) .topbar-actions .user-badge {
    width: clamp(190px, 15vw, 250px);
  }
}
/* Clinical floating workflow: patient and package forms */
body.clinical-float-open { overflow: hidden !important; }
.clinical-float-overlay {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 32px);
  background: rgba(6, 28, 38, .54);
  backdrop-filter: blur(9px) saturate(115%);
  animation: clinicalOverlayIn .18s ease-out;
}
.clinical-float-overlay[hidden] { display: none !important; }
.clinical-float-panel {
  width: min(1280px, 96vw);
  max-height: min(900px, 94dvh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #47b5aa 48%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 96%, #e7f7f5);
  box-shadow: 0 28px 90px rgba(4, 31, 43, .32), 0 0 0 1px rgba(255,255,255,.38) inset;
  animation: clinicalPanelIn .22s cubic-bezier(.2,.8,.2,1);
}
.clinical-float-panel--package { width: min(1060px, 94vw); }
.clinical-float-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  color: #fff;
  background: linear-gradient(118deg, #103f58 0%, #176f73 48%, #2a927b 100%);
  box-shadow: 0 8px 26px rgba(13, 79, 91, .22);
}
.clinical-float-header h2 { margin: 2px 0 3px; color: inherit; font-size: clamp(21px, 2vw, 30px); }
.clinical-float-header p { margin: 0; color: rgba(255,255,255,.8); }
.clinical-float-header .eyebrow { color: #bdeee7; }
.clinical-float-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}
.clinical-float-close:hover { transform: rotate(4deg) scale(1.04); background: rgba(255,255,255,.22); }
.clinical-float-body { min-height: 0; overflow: auto; padding: 20px 22px 22px; }
.clinical-float-body#patientForm { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; }
.clinical-float-body#patientForm[hidden], .clinical-float-body#pepPackageForm[hidden] { display: none !important; }
.clinical-float-body .patient-form-tabs {
  position: sticky;
  top: -20px;
  z-index: 5;
  padding: 9px;
  border-color: color-mix(in srgb, #2a927b 32%, var(--line));
  background: linear-gradient(120deg, color-mix(in srgb, #dff5f2 86%, var(--panel)), color-mix(in srgb, #dceef6 80%, var(--panel)));
  box-shadow: 0 8px 18px rgba(10, 65, 78, .08);
}
.clinical-float-body .patient-form-tabs button.active,
.clinical-float-body .primary-button {
  border-color: transparent;
  background: linear-gradient(118deg, #176f73, #258a78 58%, #1687aa);
  color: #fff;
  box-shadow: 0 9px 22px rgba(19, 111, 121, .23);
}
.clinical-float-body .patient-form-panel {
  align-self: start;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid color-mix(in srgb, #1687aa 18%, var(--line));
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 97%, #dff5f2), color-mix(in srgb, var(--panel) 96%, #e3eff8));
}
.clinical-float-body > .form-actions {
  position: sticky;
  bottom: -22px;
  z-index: 6;
  justify-content: flex-end;
  margin: 0 -22px -22px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 91%, transparent);
  backdrop-filter: blur(12px);
}
#pepPackagesView > .settings-panel { min-height: calc(100dvh - 150px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
#pepPackagesView .compact-filters { grid-template-columns: minmax(220px, 1.25fr) repeat(4, minmax(150px, .7fr)) auto; }
#pepPackagesView > .settings-panel > .table-wrap { min-height: 300px; overflow: auto; border-radius: 15px; box-shadow: 0 12px 32px rgba(14, 74, 87, .08); }
#pepPackagesView .production-header { padding: 18px 20px; border-radius: 16px; background: linear-gradient(118deg, color-mix(in srgb, #1687aa 11%, var(--panel)), color-mix(in srgb, #2a927b 13%, var(--panel))); }
#pepPackagesView .production-header .primary-button,
#medicalRecordsView .patient-search-panel .primary-button { background: linear-gradient(118deg, #176f73, #258a78 58%, #1687aa); }

.professional-pending-panel { margin: 14px 0; padding: 14px; border: 1px solid color-mix(in srgb, #1687aa 18%, var(--line)); border-radius: 15px; background: color-mix(in srgb, #e8f5f5 68%, var(--panel)); }
.professional-pending-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.professional-pending-columns article { min-width: 0; }
.professional-pending-columns h4 { margin: 0 0 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.professional-pending-list { display: grid; gap: 8px; max-height: 220px; overflow: auto; }
.professional-pending-item { display: grid; gap: 3px; width: 100%; padding: 10px 12px; text-align: left; border: 1px solid color-mix(in srgb, #1687aa 24%, var(--line)); border-radius: 11px; background: var(--panel); color: var(--text); cursor: pointer; }
.professional-pending-item:hover, .professional-pending-item:focus-visible { border-color: #1687aa; box-shadow: 0 4px 14px rgba(22,135,170,.13); }
.professional-pending-item span, .professional-pending-item small { color: var(--muted); font-size: 12px; }
.pending-operational { border-left: 4px solid #1687aa; }
.pending-clinical { border-left: 4px solid #b27b26; }
.previous-session-summary { margin: 12px 0; padding: 13px 15px; border: 1px solid color-mix(in srgb, #7c5bb0 25%, var(--line)); border-left: 4px solid #7c5bb0; border-radius: 13px; background: color-mix(in srgb, #f2edfb 74%, var(--panel)); }
.previous-session-summary .records-header { margin: 0 0 6px; }
.previous-session-summary p { margin: 6px 0 0; color: var(--muted); }
.evolution-workflow-status { display: flex; align-items: center; gap: 9px; margin: 10px 0; min-height: 24px; }
.evolution-workflow-status small { color: var(--muted); }
.status-pill.status-draft { background: #fff1cf; color: #8b5b0c; }
.status-pill.status-completed { background: #dff4e8; color: #1f7047; }
@media (max-width: 760px) {
  .professional-pending-columns { grid-template-columns: 1fr; }
  .professional-pending-panel { padding: 11px; }
  .professional-pending-list { max-height: none; }
}
@keyframes clinicalOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes clinicalPanelIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .clinical-float-overlay { padding: 0; place-items: stretch; }
  .clinical-float-panel { width: 100%; max-height: 100dvh; border-radius: 0; }
  .clinical-float-header { padding: 14px 16px; }
  .clinical-float-body { padding: 14px; }
  #pepPackagesView .compact-filters { grid-template-columns: 1fr 1fr; }
}
html[data-theme="dark"] .clinical-float-panel { background: color-mix(in srgb, var(--panel) 94%, #102e38); }

/* PEP definitive clinical composition — single canvas, no legacy columns. */
@media (min-width: 981px) {
  body:has(#medicalRecordsView.clinical-focus-active:not([hidden])) { height: 100dvh; overflow: hidden !important; }
  #medicalRecordsView.clinical-focus-active { height: calc(100dvh - 76px) !important; grid-template-rows: 44px minmax(0, 1fr) !important; }
  #medicalRecordsView.clinical-focus-active > .layout.module-content {
    display: grid !important; grid-template: 62px minmax(0, 1fr) / minmax(0, 1fr) !important;
    gap: 8px !important; height: 100% !important; min-width: 0; min-height: 0; overflow: hidden !important;
  }
  #medicalRecordsView.clinical-focus-active .entry-panel {
    grid-area: 1 / 1 !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important;
    width: 100% !important; height: 62px !important; min-height: 62px !important; max-height: 62px !important;
    padding: 7px 10px !important; gap: 10px !important; overflow: visible !important;
    border: 1px solid color-mix(in srgb, #1687aa 26%, var(--line)); border-radius: 14px;
    background: linear-gradient(112deg, color-mix(in srgb, #dceff7 82%, var(--panel)), color-mix(in srgb, #ddf4ed 84%, var(--panel)));
    box-shadow: 0 9px 24px rgba(10, 64, 78, .09);
  }
  #medicalRecordsView.clinical-focus-active .patient-center-heading { display: contents !important; }
  #medicalRecordsView.clinical-focus-active .patient-center-heading > div { display: none !important; }
  #medicalRecordsView.clinical-focus-active .patient-active-count { align-self: center; white-space: nowrap; padding: 8px 12px; border-radius: 999px; background: linear-gradient(115deg, #176f73, #2a927b); color: #fff; }
  #medicalRecordsView.clinical-focus-active .patient-search-panel {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: end;
    height: auto !important; padding: 0 !important; gap: 10px !important; background: transparent !important;
  }
  #medicalRecordsView.clinical-focus-active .patient-search-panel input,
  #medicalRecordsView.clinical-focus-active .patient-search-panel button { height: 44px !important; min-height: 44px !important; }
  #medicalRecordsView.clinical-focus-active .record-search-panel,
  #medicalRecordsView.clinical-focus-active .entry-panel > #patientForm,
  #medicalRecordsView.clinical-focus-active .entry-panel > #patientMessage { display: none !important; }
  #medicalRecordsView.clinical-focus-active .records-panel {
    grid-area: 2 / 1 !important; display: block !important; width: 100% !important; height: 100% !important;
    min-width: 0; min-height: 0; padding: 0 !important; overflow: hidden !important; border: 0; background: transparent;
  }
  #medicalRecordsView.clinical-focus-active .records-panel > .records-header,
  #medicalRecordsView.clinical-focus-active .records-panel > .patient-form-host { display: none !important; }
  #medicalRecordsView.clinical-focus-active .medical-grid { display: block !important; width: 100%; height: 100%; min-height: 0; overflow: hidden !important; }
  #medicalRecordsView.clinical-focus-active .evolution-panel {
    display: block !important; width: 100% !important; max-width: none !important; height: 100% !important;
    min-height: 0 !important; padding: 0 16px 36px !important; overflow-x: hidden !important; overflow-y: auto !important;
    scroll-behavior: smooth; background: linear-gradient(180deg, color-mix(in srgb, #dceff7 46%, var(--panel)), var(--panel) 220px);
  }
  #medicalRecordsView.clinical-focus-active .evolution-workspace-header {
    position: sticky !important; top: 0; z-index: 20; margin: 0 -16px 14px !important; padding: 13px 18px !important;
    border: 0; border-radius: 0 0 15px 15px; color: #fff; background: linear-gradient(115deg, #103f58 0%, #176f73 54%, #2a927b 100%);
    box-shadow: 0 10px 26px rgba(8, 55, 70, .19);
  }
  #medicalRecordsView.clinical-focus-active .evolution-workspace-header h2,
  #medicalRecordsView.clinical-focus-active .evolution-workspace-header .eyebrow { color: #fff !important; }
  #medicalRecordsView.clinical-focus-active .evolution-workspace-actions button { color: #fff; border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.13); }
  #medicalRecordsView.clinical-focus-active .evolution-patient-summary {
    position: static !important; display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 8px;
    margin: 0 0 14px !important; padding: 12px !important; overflow: visible !important; border: 1px solid color-mix(in srgb, #2a927b 28%, var(--line));
    border-radius: 15px; background: linear-gradient(112deg, color-mix(in srgb, #1687aa 12%, var(--panel)), color-mix(in srgb, #2a927b 16%, var(--panel)));
  }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel,
  #medicalRecordsView.clinical-focus-active #evolutionForm {
    display: block !important; width: 100% !important; max-width: none !important; min-height: 0 !important;
    margin: 0 0 16px !important; padding: 18px !important; overflow: visible !important;
    border: 1px solid color-mix(in srgb, #1687aa 22%, var(--line)); border-left: 4px solid #176f73; border-radius: 16px;
    background: color-mix(in srgb, var(--panel) 98%, #e8f4f5); box-shadow: 0 10px 28px rgba(10, 65, 80, .08);
  }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel > .records-header,
  #medicalRecordsView.clinical-focus-active .evolution-procedures-header {
    margin: -18px -18px 14px; padding: 13px 17px; border-radius: 14px 14px 0 0;
    background: linear-gradient(112deg, color-mix(in srgb, #1687aa 12%, var(--panel)), color-mix(in srgb, #2a927b 15%, var(--panel)));
  }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel form > .form-grid { grid-template-columns: minmax(190px,.35fr) minmax(280px,.65fr); }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel textarea { min-height: 180px !important; width: 100%; }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel .form-actions,
  #medicalRecordsView.clinical-focus-active #evolutionForm > .form-actions { position: static !important; margin: 12px 0 0 !important; padding: 0 !important; border: 0; background: transparent; }
  #medicalRecordsView.clinical-focus-active #evolutionForm > .form-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  #medicalRecordsView.clinical-focus-active #evolutionForm > label { display: block; margin-top: 12px; }
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea { width: 100%; resize: vertical; }
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea[name="summary"] { min-height: 220px !important; }
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea[name="conduct"] { min-height: 150px !important; }
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea[name="private_notes"] { min-height: 120px !important; }
  #medicalRecordsView.clinical-focus-active .evolution-procedures { margin: 18px 0 0; padding: 18px; border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, #e3f1f7 70%, var(--panel)), color-mix(in srgb, #e4f5ef 72%, var(--panel))); }
  #medicalRecordsView.clinical-focus-active .evolution-procedure-totals { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; }
  #medicalRecordsView.clinical-focus-active .evolution-procedure-totals span { padding: 12px; border-left: 4px solid #2a927b; border-radius: 10px; background: var(--panel); }

  .clinical-float-overlay { overflow: auto; align-items: start; }
  .clinical-float-panel--patient { width: min(1500px, 97vw); max-height: none; margin: auto; overflow: visible; }
  .clinical-float-panel--patient .clinical-float-body { overflow: visible; padding: 14px 20px 0; }
  .clinical-float-panel--patient .clinical-float-body#patientForm { display: grid; grid-template-rows: auto auto auto; gap: 12px; }
  .clinical-float-panel--patient .patient-form-tabs { position: static; top: auto; display: flex; flex-wrap: wrap; }
  .clinical-float-panel--patient .patient-form-panel { padding: 14px 18px; }
  .clinical-float-panel--patient .patient-form-panel > .form-grid { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
  .clinical-float-panel--patient .guardian-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; }
  .clinical-float-panel--patient .clinical-float-body > .form-actions { position: sticky; bottom: 0; margin: 0 -20px; padding: 12px 20px; }

  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) {
    position: fixed !important; inset: 3dvh 2vw !important; z-index: 2700; width: 96vw !important; max-width: 1540px; height: auto !important;
    max-height: 94dvh !important; margin: auto; padding: 0 !important; overflow: auto !important;
    border: 1px solid color-mix(in srgb, #47b5aa 48%, var(--line)); border-radius: 22px;
    background: var(--panel); box-shadow: 0 28px 90px rgba(4,31,43,.36);
  }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) .compact-form {
    display: grid !important; grid-template-columns: repeat(4, minmax(180px, 1fr)) !important; gap: 12px !important; padding: 0 20px 16px !important;
  }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) .appointment-form-heading {
    grid-column: 1 / -1; margin: 0 -20px 4px; padding: 18px 22px; color: #fff; border-radius: 20px 20px 0 0;
    background: linear-gradient(118deg, #103f58, #176f73 52%, #2a927b); box-shadow: 0 8px 24px rgba(10,65,78,.18);
  }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) .appointment-form-heading h3 { color: #fff; }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) .compact-form > .form-grid { display: contents; }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) label:has(#appointmentPatientSelect),
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) label:has(#appointmentProfessionalSelect) { grid-column: span 2; }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) .appointment-context-section,
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) label:has(textarea[name="notes"]),
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) .compact-form > .message { grid-column: 1 / -1; }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) .compact-form > .form-actions {
    position: sticky !important; bottom: -16px; z-index: 5; grid-column: 1 / -1; justify-content: flex-end;
    margin: 4px -20px -16px !important; padding: 12px 20px !important; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(12px);
  }
}

html[data-theme="dark"] #medicalRecordsView.clinical-focus-active .evolution-panel,
html[data-theme="dark"] #medicalRecordsView.clinical-focus-active .entry-panel { background-color: #13272e; }

/* Final cascade for the rewritten linear evolution workspace. */
@media (min-width: 981px) {
  #medicalRecordsView.clinical-focus-active .records-panel > .medical-grid { grid-template-rows: minmax(0, 1fr) !important; }
  #medicalRecordsView.clinical-focus-active .evolution-panel { display: block !important; height: 100% !important; padding: 0 14px 28px !important; overflow-x: hidden !important; overflow-y: auto !important; background: linear-gradient(180deg, color-mix(in srgb, #dff2f4 42%, var(--panel)), var(--panel) 150px); }
  #medicalRecordsView.clinical-focus-active .evolution-workspace-header { position: sticky; top: 0; z-index: 12; margin: 0 -14px 12px; padding: 12px 18px; background: linear-gradient(112deg, #123f58, #176f73 58%, #2a927b); color: #fff; box-shadow: 0 10px 24px rgba(11,61,75,.16); }
  #medicalRecordsView.clinical-focus-active .evolution-workspace-header h2,
  #medicalRecordsView.clinical-focus-active .evolution-workspace-header .eyebrow { color: #fff; }
  #medicalRecordsView.clinical-focus-active .evolution-workspace-actions { display: flex; gap: 7px; flex-wrap: wrap; }
  #medicalRecordsView.clinical-focus-active .evolution-workspace-actions button { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
  #medicalRecordsView.clinical-focus-active .evolution-patient-summary { position: static !important; margin: 0 0 14px; padding: 12px; border-radius: 14px; background: linear-gradient(115deg, color-mix(in srgb, #1687aa 12%, var(--panel)), color-mix(in srgb, #2a927b 15%, var(--panel))); }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel,
  #medicalRecordsView.clinical-focus-active #evolutionForm { display: block !important; width: 100%; margin: 0 0 16px !important; padding: 18px !important; overflow: visible !important; border: 1px solid color-mix(in srgb, #1687aa 20%, var(--line)); border-left: 4px solid #176f73; border-radius: 15px; background: var(--panel); box-shadow: 0 9px 25px rgba(12,65,78,.07); }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel > .records-header { margin: -18px -18px 14px; padding: 12px 16px; border-radius: 14px 14px 0 0; background: linear-gradient(110deg, color-mix(in srgb, #1687aa 10%, var(--panel)), color-mix(in srgb, #2a927b 12%, var(--panel))); }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel form,
  #medicalRecordsView.clinical-focus-active #evolutionForm { min-height: 0; max-height: none; }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel textarea,
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea { width: 100%; min-height: 130px !important; resize: vertical; background: var(--input-bg, #fff); }
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea[name="summary"] { min-height: 180px !important; }
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea[name="conduct"] { min-height: 120px !important; }
  #medicalRecordsView.clinical-focus-active #evolutionForm textarea[name="private_notes"] { min-height: 96px !important; }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel .form-actions,
  #medicalRecordsView.clinical-focus-active #evolutionForm > .form-actions { position: static !important; margin: 12px 0 0 !important; padding: 0 !important; border: 0; background: transparent; backdrop-filter: none; }
}
.clinical-float-panel--search { width: min(1180px, 94vw); }
.clinical-float-panel--history { width: min(1320px, 96vw); }
.patient-modal-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin-bottom: 14px; }
.patient-modal-search input, .patient-modal-search button { min-height: 46px; }
.patient-search-results { max-height: min(620px,67dvh); overflow: auto; border: 1px solid var(--line); border-radius: 13px; }
.patient-search-results thead { position: sticky; top: 0; z-index: 2; }
.clinical-float-panel--history .clinical-float-body { overflow: hidden; }
.clinical-float-panel--history .evolution-history-layout { height: min(680px,72dvh); min-height: 0; max-height: none; }

/* PEP full canvas: one horizontal search rail and the clinical workspace below. */
@media (min-width: 981px) {
  body:has(#medicalRecordsView.clinical-focus-active:not([hidden])) {
    height: 100dvh;
    overflow: hidden !important;
  }

  body:has(#medicalRecordsView.clinical-focus-active:not([hidden])) #moduleNav {
    display: none !important;
  }

  body:has(#medicalRecordsView.clinical-focus-active:not([hidden])) #appShell > .topbar {
    display: flex !important;
  }

  #medicalRecordsView.clinical-focus-active {
    grid-template-rows: 44px minmax(0, 1fr) !important;
    gap: 5px !important;
    height: calc(100dvh - 76px) !important;
    padding: 3px 6px 5px !important;
  }

  #medicalRecordsView.clinical-focus-active > .module-tabs {
    height: 44px !important;
    padding: 3px !important;
  }

  #medicalRecordsView.clinical-focus-active > .layout.module-content,
  #medicalRecordsView.clinical-focus-active.patient-only-mode > .layout.module-content,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) > .layout.module-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 66px minmax(0, 1fr) !important;
    gap: 5px !important;
    min-width: 0;
    min-height: 0;
    height: 100% !important;
    overflow: hidden !important;
  }

  #medicalRecordsView.clinical-focus-active .entry-panel,
  #medicalRecordsView.clinical-focus-active.patient-only-mode .entry-panel,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .entry-panel {
    grid-row: 1;
    display: grid !important;
    grid-template-columns: minmax(220px, .34fr) minmax(620px, 1.66fr) !important;
    align-items: stretch;
    gap: 0 !important;
    width: 100%;
    min-height: 66px !important;
    max-height: 66px !important;
    margin: 0;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px;
    box-shadow: 0 7px 18px rgba(13, 71, 83, .08);
  }

  #medicalRecordsView.clinical-focus-active .patient-center-heading,
  #medicalRecordsView.clinical-focus-active.patient-only-mode .patient-center-heading,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .patient-center-heading {
    height: 66px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: 0;
    border-right: 1px solid var(--clinical-border);
    border-radius: 9px 0 0 9px !important;
    background: linear-gradient(120deg, color-mix(in srgb, #1687aa 10%, var(--panel)), color-mix(in srgb, #2a927b 12%, var(--panel)));
  }

  #medicalRecordsView.clinical-focus-active .patient-center-heading .eyebrow { font-size: 9px; }
  #medicalRecordsView.clinical-focus-active .patient-center-heading h2 { font-size: 18px; line-height: 1; }

  #medicalRecordsView.clinical-focus-active .patient-search-panel,
  #medicalRecordsView.clinical-focus-active.patient-only-mode .patient-search-panel,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .patient-search-panel {
    display: grid !important;
    grid-template-columns: minmax(340px, 1fr) auto !important;
    align-items: end;
    gap: 8px;
    min-width: 0;
    height: 66px;
    padding: 7px 10px !important;
    background: linear-gradient(105deg, color-mix(in srgb, var(--panel) 97%, #dfeff6), color-mix(in srgb, var(--panel) 96%, #dff4ee));
  }

  #medicalRecordsView.clinical-focus-active .patient-search-panel label { min-width: 0; margin: 0; }
  #medicalRecordsView.clinical-focus-active .patient-search-panel input,
  #medicalRecordsView.clinical-focus-active .patient-search-panel button {
    height: 38px !important;
    min-height: 38px !important;
  }
  #medicalRecordsView.clinical-focus-active .patient-search-panel .form-actions { margin: 0; flex-wrap: wrap; min-width: 0; }
  #medicalRecordsView.clinical-focus-active .record-search-panel,
  #medicalRecordsView.clinical-focus-active .entry-panel > #patientForm,
  #medicalRecordsView.clinical-focus-active .entry-panel > #patientMessage { display: none !important; }

  #medicalRecordsView.clinical-focus-active .records-panel,
  #medicalRecordsView.clinical-focus-active.patient-only-mode .records-panel,
  #medicalRecordsView.clinical-focus-active:not(.patient-only-mode) .records-panel {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-rows: 0 minmax(0, 1fr) !important;
    width: 100%;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px;
  }

  #medicalRecordsView.clinical-focus-active .records-panel > .records-header,
  #medicalRecordsView.clinical-focus-active .records-panel > .patient-form-host { display: none !important; }
  #medicalRecordsView.clinical-focus-active .records-panel > .medical-grid {
    grid-row: 2;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 5px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #medicalRecordsView.clinical-focus-active .medical-grid > .table-wrap {
    width: 100%;
    max-height: 190px;
    overflow: auto;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient .records-panel > .medical-grid {
    grid-template-rows: 0 minmax(0, 1fr) !important;
  }

  #medicalRecordsView.clinical-focus-active.has-selected-patient .medical-grid > .table-wrap {
    display: none !important;
  }

  #medicalRecordsView.clinical-focus-active .evolution-panel,
  #medicalRecordsView.clinical-focus-active.patient-only-mode .records-panel .evolution-panel {
    display: grid !important;
    width: 100%;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    overflow: auto;
  }
}

/* Keep the shared VASI Pulse sidebar available in the Evolution workspace. */
@media (min-width: 981px) {
  body:has(#medicalRecordsView.clinical-focus-active:not([hidden])) #moduleNav {
    display: flex !important;
  }
}

/* Absolute final PEP layout contract. Keep this block last. */
@media (min-width: 981px) {
  #medicalRecordsView.clinical-focus-active > .layout.module-content { grid-template: 62px minmax(0,1fr) / minmax(0,1fr) !important; gap: 8px !important; }
  #medicalRecordsView.clinical-focus-active .entry-panel {
    grid-row: 1 !important; grid-template-columns: auto minmax(0,1fr) !important; height: 62px !important; min-height: 62px !important; max-height: 62px !important;
    padding: 7px 10px !important; gap: 10px !important; overflow: visible !important;
  }
  #medicalRecordsView.clinical-focus-active .patient-center-heading { display: contents !important; }
  #medicalRecordsView.clinical-focus-active .patient-center-heading > div { display: none !important; }
  #medicalRecordsView.clinical-focus-active .patient-active-count { align-self: center; height: auto !important; padding: 8px 12px !important; color: #fff; background: linear-gradient(115deg,#176f73,#2a927b); }
  #medicalRecordsView.clinical-focus-active .patient-search-panel { grid-template-columns: minmax(0,1fr) !important; height: auto !important; padding: 0 !important; background: transparent !important; }
  #medicalRecordsView.clinical-focus-active .records-panel { grid-row: 2 !important; display: block !important; height: 100% !important; overflow: hidden !important; }
  #medicalRecordsView.clinical-focus-active .records-panel > .medical-grid { display: block !important; height: 100% !important; overflow: hidden !important; }
  #medicalRecordsView.clinical-focus-active .evolution-panel { display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; }
  #medicalRecordsView.clinical-focus-active .anamnesis-panel,
  #medicalRecordsView.clinical-focus-active #evolutionForm { display: block !important; width: 100% !important; max-width: none !important; overflow: visible !important; }
  #medicalRecordsView.clinical-focus-active .evolution-history-layout { max-height: none !important; }
  #patientFormOverlay { overflow: hidden !important; align-items: center !important; }
  .clinical-float-panel--patient {
    width: min(1500px,97vw) !important; height: min(760px,94dvh) !important; max-height: 94dvh !important;
    grid-template-rows: auto minmax(0,1fr) !important; overflow: hidden !important;
  }
  .clinical-float-panel--patient .clinical-float-body {
    display: grid !important; grid-template-rows: auto minmax(0,1fr) auto !important;
    min-height: 0 !important; overflow: hidden !important;
  }
  .clinical-float-panel--patient .patient-form-tabs { flex: 0 0 auto; }
  .clinical-float-panel--patient .patient-form-panel {
    align-self: stretch !important; min-height: 0 !important; overflow: visible !important;
  }
  .clinical-float-panel--patient .clinical-float-body > .form-actions {
    position: static !important; align-self: end; margin: 0 -20px -14px !important;
  }
  #appointmentsView.clinical-focus-active .appointment-editor:not(.appointment-editor-collapsed) { position: fixed !important; inset: 3dvh 2vw !important; width: 96vw !important; max-width: 1540px !important; max-height: 94dvh !important; z-index: 2700 !important; }
  #medicalRecordsView.clinical-focus-active:not(.has-selected-patient) .medical-grid,
  #medicalRecordsView.clinical-focus-active:not(.has-selected-patient) .evolution-panel { display: block !important; height: 100% !important; }
  #medicalRecordsView.clinical-focus-active:not(.has-selected-patient) .anamnesis-panel,
  #medicalRecordsView.clinical-focus-active:not(.has-selected-patient) #evolutionForm { display: block !important; opacity: .72; }
  #medicalRecordsView.clinical-focus-active:not(.has-selected-patient) .evolution-workspace-header { position: sticky !important; top: 0; }
  #medicalRecordsView.clinical-focus-active:not(.has-selected-patient) .evolution-patient-summary { display: block !important; }
  #medicalRecordsView.clinical-focus-active:not(.has-selected-patient) .evolution-procedures { display: none !important; }
  .clinical-float-panel--search .patient-search-results { overflow-x: hidden !important; }
  .clinical-float-panel--search .patient-search-results table { width: 100% !important; min-width: 0 !important; table-layout: fixed; }
  .clinical-float-panel--search .patient-search-results th:first-child { width: 22%; }
  .clinical-float-panel--search .patient-search-results th:nth-child(2) { width: 12%; }
  .clinical-float-panel--search .patient-search-results th:nth-child(3) { width: 12%; }
  .clinical-float-panel--search .patient-search-results th:nth-child(4) { width: 17%; }
  .clinical-float-panel--search .patient-search-results th:nth-child(5) { width: 14%; }
  .clinical-float-panel--search .patient-search-results th:last-child { width: 23%; }
  .clinical-float-panel--search .patient-search-results td { overflow-wrap: anywhere; }
  .clinical-float-panel--search .patient-search-results .table-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
  .clinical-float-panel--search .patient-search-results tbody tr { height: auto !important; }
  .clinical-float-panel--search .patient-search-results td { vertical-align: middle; }
  .clinical-float-panel--search .patient-search-results .table-actions button { min-height: 38px; white-space: nowrap; }
}

/* Global collapsed navigation contract: bounded geometry and discoverable destinations. */
@media (min-width: 761px) {
  #moduleNav { box-sizing: border-box; min-width: 0; }
  .portal-area-nav .tab-button { position: relative; min-width: 0; box-sizing: border-box; }
  body.nav-collapsed #moduleNav {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    overflow: visible;
  }
  body.nav-collapsed .portal-sidebar-brand {
    position: relative;
    box-sizing: border-box;
    justify-content: center;
    min-width: 0;
    padding-inline: 6px;
  }
  body.nav-collapsed .portal-sidebar-brand-copy { display: none; }
  body.nav-collapsed .portal-sidebar-logo { width: 36px; height: 36px; }
  body.nav-collapsed .nav-collapse-button {
    position: absolute;
    top: 8px;
    right: 4px;
    width: 24px;
    height: 24px;
    margin: 0;
    font-size: 18px;
  }
  body.nav-collapsed .portal-area-nav .tab-button[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    z-index: 1000;
    display: none;
    width: max-content;
    max-width: min(260px, calc(100vw - 96px));
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    background: #063c62;
    color: #fff;
    box-shadow: 0 8px 22px rgba(3, 48, 64, .24);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    pointer-events: none;
    transform: translateY(-50%);
    white-space: normal;
  }
  body.nav-collapsed .portal-area-nav .tab-button[data-tooltip]:hover::after,
  body.nav-collapsed .portal-area-nav .tab-button[data-tooltip]:focus-visible::after { display: block; }
}

/* Permanent PEP clinical canvas. Keep last to bypass legacy grid state rules. */
@media (min-width: 981px) {
  #medicalRecordsView.clinical-focus-active > .layout.module-content {
    display: flex !important;
    flex-direction: column !important;
    grid-template: none !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #medicalRecordsView.clinical-focus-active .entry-panel {
    position: relative !important;
    flex: 0 0 62px !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #medicalRecordsView.clinical-focus-active .records-panel {
    position: relative !important;
    flex: 1 1 auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #medicalRecordsView.clinical-focus-active .records-panel > .medical-grid {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #medicalRecordsView.clinical-focus-active .evolution-panel {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* Responsive shell consolidation: dynamic rail height and tenant context sizing. */
@media (min-width: 761px) {
  .portal-sidebar-brand {
    min-height: 82px;
    padding: 12px 10px;
    gap: 10px;
  }

  .portal-sidebar-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
  }

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

  #moduleNav {
    box-sizing: border-box;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
  }

  #moduleNav > .portal-area-nav {
    min-height: 0;
  }

  body.nav-collapsed #moduleNav {
    overflow-x: visible;
    overflow-y: visible;
  }

  body.nav-collapsed .portal-sidebar-brand {
    overflow: visible;
  }

  body.nav-collapsed .portal-sidebar-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
  }

  body.nav-collapsed .nav-collapse-button {
    top: 8px;
    right: 3px;
  }

  .active-company-logo {
    width: 56px;
    height: 56px;
    padding: 5px;
  }

  .portal-company-logo-frame {
    width: 64px !important;
    height: 64px !important;
  }

  .portal-company-logo-frame .portal-company-logo {
    width: 56px !important;
    height: 56px !important;
    padding: 5px !important;
  }
}
/* Relatorio interno de tabela de precos */
.pep-report-heading,.pep-report-toolbar,.pep-report-meta{display:flex;align-items:center;justify-content:space-between;gap:18px}.pep-report-heading{padding:4px 0 18px;border-bottom:1px solid #dbe8ea}.pep-report-heading h3{margin:4px 0}.pep-report-heading p{margin:0}.pep-report-readonly{border:1px solid #b8d8d6;border-radius:999px;padding:7px 12px;color:#176f73;font-size:.8rem;font-weight:700}.eyebrow{color:#176f73;font-size:.72rem;font-weight:800;letter-spacing:.08em}.pep-report-filter-card{margin:18px 0;padding:18px;border:1px solid #d8e7e8;border-radius:12px;background:linear-gradient(135deg,#f8fcfc,#eef7f7)}.pep-report-section-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}.pep-report-section-title span,.pep-report-meta span{color:#60777d;font-size:.88rem}.pep-report-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pep-report-toolbar{padding:14px 0;border-bottom:1px solid #d8e7e8}.pep-report-toolbar>div{display:flex;flex-wrap:wrap;gap:8px}.pep-report-results{margin-top:16px;background:#fff}.pep-report-meta{padding:14px 0}.pep-report-meta strong,.pep-report-meta span{display:block}.pep-report-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 18px}.pep-report-summary>div{padding:13px;border:1px solid #dbe8ea;border-radius:10px;background:#f7fbfb}.pep-report-summary span,.pep-report-summary strong{display:block}.pep-report-summary span{color:#60777d;font-size:.78rem}.pep-report-summary strong{margin-top:4px;color:#145c62;font-size:1.05rem}.pep-report-group{break-inside:avoid;margin:0 0 22px}.pep-report-group h4{margin:0;padding:10px 12px;border-left:4px solid #1d8888;background:#eaf5f5;color:#145c62}.pep-report-group table{width:100%;border-collapse:collapse}.pep-report-group th{background:#174e59;color:#fff;text-align:left;font-size:.78rem}.pep-report-group th,.pep-report-group td{padding:9px 8px;border-bottom:1px solid #e4eeee}.pep-report-group tbody tr:nth-child(even){background:#f7fbfb}.pep-report-group .is-code{text-align:center}.pep-report-group .is-money{text-align:right;white-space:nowrap}
.pep-report-company-header{display:flex;align-items:center;gap:12px;margin:4px 0 12px;padding:10px 12px;border-radius:10px;background:linear-gradient(110deg,#f4fbfa,#e6f4f1);color:#145c62}.pep-report-company-header strong,.pep-report-company-header span{display:block}.pep-report-company-header span{font-size:.82rem;color:#60777d}.pep-report-company-logo{width:58px;height:42px;object-fit:contain;border-radius:6px;background:#fff;padding:4px;border:1px solid #d5e7e4}.pep-report-company-mark{display:grid;place-items:center;width:58px;height:42px;border-radius:6px;background:linear-gradient(135deg,#3a9b89,#74c5a4);color:#fff;font-weight:800;letter-spacing:.08em}
@media (max-width:980px){.pep-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pep-report-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.pep-report-group{overflow-x:auto}.pep-report-group table{min-width:980px}}
@page{size:A4 landscape;margin:9mm}@media print{html,body{height:auto!important;min-height:0!important;overflow:visible!important;background:#fff!important}body *{visibility:hidden!important}.pep-price-reports-panel,.pep-price-reports-panel *{visibility:visible!important}.pep-price-reports-panel{position:static!important;display:block!important;width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important}.pep-price-reports-panel~*{display:none!important}#reportsView{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;padding:0!important;margin:0!important;background:#fff!important}#reportsView>.settings-panel{display:block!important;width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important}.module-tabs,#reportsView>.settings-panel>.records-header,#standardReportPanel,[data-report-mode]{display:none!important}.pep-report-filter-card,.pep-report-toolbar,.pep-report-heading .pep-report-readonly{display:none!important}.pep-report-heading{display:flex!important;border:0!important;padding:0 0 5mm!important;margin:0!important}.pep-report-heading:before{content:"VASI";display:block!important;margin-right:10px;padding:7px 10px;background:linear-gradient(135deg,#155c64,#53a994);color:#fff;border-radius:5px;font-weight:800;letter-spacing:.08em}.pep-report-results{display:block!important;overflow:visible!important}.pep-report-meta{padding:0 0 4mm!important}.pep-report-summary{grid-template-columns:repeat(6,1fr)!important;gap:4mm!important;margin-bottom:5mm!important}.pep-report-summary>div{padding:3mm!important}.pep-report-group{break-inside:auto!important;overflow:visible!important;margin-bottom:5mm!important}.pep-report-group h4{break-after:avoid!important}.pep-report-group table{width:100%!important;min-width:0!important;table-layout:fixed!important;font-size:7.2pt}.pep-report-group th,.pep-report-group td{padding:1.8mm 1.2mm!important;overflow-wrap:break-word!important;word-break:normal!important;white-space:normal!important;vertical-align:top!important}.pep-report-group th:nth-child(1){width:8%}.pep-report-group th:nth-child(2){width:22%}.pep-report-group th:nth-child(3){width:13%}.pep-report-group th:nth-child(4){width:11%}.pep-report-group th:nth-child(5){width:8%}.pep-report-group th:nth-child(6){width:10%}.pep-report-group th:nth-child(7){width:10%}.pep-report-group th:nth-child(8){width:8%}.pep-report-group th:nth-child(9){width:5%}.pep-report-group th:nth-child(10){width:5%}.pep-report-group th{background:#1f6970!important;color:#fff!important;white-space:normal!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.pep-report-group tr{break-inside:avoid!important}}
/* Identidade da empresa no relatorio */
.pep-report-company-header{min-height:96px!important}.pep-report-company-logo,.pep-report-company-mark{width:112px!important;height:72px!important}

/* Arvore de permissoes: edicao binaria, legivel e sem sobreposicao. */
.permission-tree-pane{min-width:0;overflow:visible!important}
.permission-tree{display:block!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:10px!important;background:var(--panel)!important}
.permission-tree-module{display:block!important;overflow:visible!important;margin:0 0 12px!important;padding:4px!important;border:1px solid var(--line)!important;border-radius:10px!important}
.permission-tree-row,.permission-tree-group-row{display:grid!important;grid-template-columns:32px 32px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;min-height:44px!important;padding:8px!important}
.permission-tree-group-row{grid-template-columns:32px 32px minmax(0,1fr)!important;margin:4px 0!important;background:color-mix(in srgb,var(--primary) 4%,var(--panel))!important}
.permission-tree-row button,.permission-tree-group-row button{min-width:0}
.permission-checkbox{width:22px;height:22px;margin:0;accent-color:var(--primary);cursor:pointer}
.permission-checkbox:disabled{cursor:not-allowed;opacity:.45}
.permission-tree-label,.permission-tree-group{display:flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:4px 6px!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere!important}
.permission-tree-label span,.permission-tree-group span{min-width:0;font-weight:800}
.permission-tree-group b{display:block!important;flex:0 0 auto;color:var(--muted);font-size:11px;white-space:nowrap}
.permission-tree-permissions{display:grid!important;grid-column:1 / -1!important;gap:4px!important;padding:4px 0 8px 72px!important}
.permission-tree-permission-row{display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;min-height:40px!important;padding:6px 10px!important;border:1px solid var(--line)!important;border-left:3px solid var(--line)!important;border-radius:7px!important;background:var(--panel)!important;cursor:pointer}
.permission-tree-permission-row.allowed{border-left-color:var(--income)!important;background:color-mix(in srgb,var(--income) 6%,var(--panel))!important}
.permission-tree-permission-row.denied{border-left-color:var(--danger)!important}
.permission-tree-permission-copy{min-width:0;display:block!important;overflow-wrap:anywhere}
.permission-tree-permission-copy strong{display:block;font-size:13px;line-height:1.25;white-space:normal!important}
.permission-tree-permission-copy small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.permission-inline-actions,.permission-tree-group-actions{display:none!important}
.permission-effective-badge{white-space:nowrap;font-size:11px;font-weight:800}
@media(max-width:760px){.permission-tree-row,.permission-tree-group-row{grid-template-columns:28px 28px minmax(0,1fr)!important}.permission-effective-badge{grid-column:3}.permission-tree-permissions{padding-left:28px!important}.permission-tree-group b{white-space:normal}}

/* Agenda Assistencial: filtros, contagem e agenda com hierarquia mais compacta. */
/* Correcoes finais de legibilidade da lista e do cadastro. */
#appointmentsView .appointment-toolbar { min-width: 0; }
#appointmentsView .appointment-toolbar-controls { min-width: 0; }
#appointmentsView .appointment-filters { grid-template-columns: minmax(132px, 140px) minmax(132px, 140px) minmax(190px, 1fr) minmax(170px, 1fr) auto; }
#appointmentsView .appointment-filters input,
#appointmentsView .appointment-filters select { min-width: 0; width: 100%; }
#appointmentsView .appointment-form-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: max-content; }
#appointmentsView .appointment-form-heading-actions button { display: inline-flex; white-space: nowrap; }
#appointmentsView #appointmentListWrap { overflow: auto; }
#appointmentsView #appointmentListWrap table { width: max-content; min-width: 1480px; table-layout: fixed; }
#appointmentsView #appointmentListWrap th,
#appointmentsView #appointmentListWrap td { overflow-wrap: anywhere; }
#appointmentsView #appointmentListWrap th:nth-child(1), #appointmentsView #appointmentListWrap td:nth-child(1) { width: 128px; }
#appointmentsView #appointmentListWrap th:nth-child(2), #appointmentsView #appointmentListWrap td:nth-child(2) { width: 132px; }
#appointmentsView #appointmentListWrap th:nth-child(3), #appointmentsView #appointmentListWrap td:nth-child(3) { width: 240px; }
#appointmentsView #appointmentListWrap th:nth-child(4), #appointmentsView #appointmentListWrap td:nth-child(4) { width: 190px; }
#appointmentsView #appointmentListWrap th:nth-child(5), #appointmentsView #appointmentListWrap td:nth-child(5) { width: 220px; }
#appointmentsView #appointmentListWrap th:nth-child(6), #appointmentsView #appointmentListWrap td:nth-child(6) { width: 150px; }
#appointmentsView #appointmentListWrap th:nth-child(7), #appointmentsView #appointmentListWrap td:nth-child(7) { width: 190px; }
#appointmentsView #appointmentListWrap th:nth-child(8), #appointmentsView #appointmentListWrap td:nth-child(8) { width: 360px; }
#appointmentsView #appointmentListWrap .row-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 340px; white-space: normal; }
#appointmentsView #appointmentListWrap .row-actions button,
#appointmentsView #appointmentListWrap .row-actions select { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 1240px) {
  #appointmentsView .appointment-toolbar { display: grid; grid-template-columns: 1fr; }
  #appointmentsView .appointment-toolbar-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  #appointmentsView .appointment-filters { grid-template-columns: repeat(2, minmax(132px, 1fr)) minmax(180px, 1.3fr) minmax(170px, 1.2fr) auto; }
}
@media (max-width: 760px) {
  #appointmentsView .appointment-toolbar-controls { grid-template-columns: 1fr; }
  #appointmentsView .appointment-filters { grid-template-columns: 1fr 1fr; }
  #appointmentsView .appointment-filters select { grid-column: span 2; }
  #appointmentsView .appointment-form-heading-actions button { padding: 6px 8px; font-size: 11px; }
}
@media (min-width:981px){
  #appointmentsView.clinical-focus-active>.appointment-workspace{grid-template-rows:auto auto minmax(0,1fr);gap:4px;padding-top:4px}
  #appointmentsView.clinical-focus-active .appointment-toolbar{min-height:44px}
  #appointmentsView.clinical-focus-active .appointment-layout{grid-template-rows:40px minmax(0,1fr);gap:4px}
  #appointmentsView.clinical-focus-active .appointment-editor-collapsed{min-height:40px}
  #appointmentsView.clinical-focus-active .appointment-results-heading{min-height:36px;padding:3px 10px}
  #appointmentsView.clinical-focus-active .appointment-board .pill.status{padding:5px 10px;font-size:12px;font-weight:900;letter-spacing:.01em}
}

/* Login final: override legacy cascade so the authentication viewport remains intentional. */
.auth-screen,
:root[data-theme="dark"] .auth-screen {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: clamp(20px, 3.5vw, 48px);
  background:
    radial-gradient(circle at 8% 92%, rgba(17, 177, 185, 0.18), transparent 30%),
    radial-gradient(circle at 8% 8%, rgba(21, 117, 220, 0.14), transparent 28%),
    linear-gradient(135deg, #f9fcff 0%, #eef7fc 54%, #fafdff 100%);
  color: #18354f;
}
.auth-screen::before { inset: auto auto -24vw -17vw; width: 66vw; height: 66vw; border-radius: 50%; background: linear-gradient(145deg, rgba(18,107,221,.84), rgba(31,207,151,.7)); opacity: .72; clip-path: ellipse(58% 48% at 42% 58%); }
.auth-screen::after { inset: 0 0 0 auto; width: 42%; height: 100%; background: radial-gradient(circle at 70% 25%, rgba(255,255,255,.92), transparent 54%); opacity: .76; }
.auth-backdrop-brand { color: #143a5b; text-shadow: none; }
.auth-backdrop-brand strong { background: linear-gradient(135deg,#106ed7,#1ccf98); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.auth-backdrop-brand span { color: #536b7e; }
.auth-card { max-height: calc(100dvh - 40px); overflow-y: auto; border-color: rgba(184,206,224,.62); box-shadow: 0 24px 70px rgba(27,76,119,.14), 0 2px 0 rgba(255,255,255,.85) inset; }
@media (max-width:900px) { .auth-screen { height:100dvh; padding:14px; } .auth-card { max-height:calc(100dvh - 28px); padding:24px 20px 20px; } .auth-logo { margin-bottom:16px; } }
@media (max-width:560px) {
  .auth-screen { align-content:center; overflow:clip; }
  .auth-screen::before { inset:auto auto 0 -14vw; width:48vw; height:30vh; clip-path:ellipse(62% 58% at 42% 58%); }
  .auth-card { padding:20px 18px 18px; }
  .auth-card h1 { font-size:25px; }
  .auth-copy { margin-bottom:16px; }
  .auth-credit { bottom:8px; }
}

body:has(#authScreen:not([hidden])) { overflow: hidden; }

/* Login Hero V2: composição fluida com elementos independentes, sem banner fechado. */
.auth-screen { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .8fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.auth-backdrop-brand {
  display: grid !important;
  align-self: center;
  justify-self: stretch;
  width: 100% !important;
  min-height: min(560px, calc(100dvh - 96px));
  max-height: calc(100dvh - 64px);
  padding: clamp(28px, 5vw, 68px) clamp(22px, 5vw, 72px) !important;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(145deg, #073b78 0%, #0a4e8a 48%, #0876d8 100%);
  box-shadow: 0 26px 70px rgba(7,59,120,.22);
  color: #fff;
  pointer-events: none;
}
.auth-backdrop-brand::before { inset: auto -16% -34% 16%; width: auto; height: 68%; background: radial-gradient(circle at 35% 35%, rgba(17,209,155,.72), transparent 46%), linear-gradient(145deg, transparent, rgba(9,168,216,.34)); opacity: .9; }
.auth-backdrop-brand::after { inset: 0; height: auto; background: radial-gradient(circle at 82% 18%, rgba(143,238,224,.18), transparent 24%), repeating-radial-gradient(ellipse at 86% 78%, transparent 0 22px, rgba(143,238,224,.12) 23px 24px, transparent 25px 42px); opacity: .65; }
.auth-backdrop-brand .auth-brand-lockup { align-self: start; }
.auth-backdrop-brand .auth-brand-symbol { width: clamp(70px, 8vw, 108px); height: clamp(70px, 8vw, 108px); }
.auth-backdrop-brand .auth-brand-wordmark img { width: min(280px, 32vw); }
.auth-backdrop-brand .auth-brand-copy { align-self: center; margin-top: clamp(30px, 5vh, 64px); max-width: 30rem; }
.auth-backdrop-brand .auth-brand-copy h2 { margin: 0; font-size: clamp(2rem, 3.7vw, 4rem); line-height: 1.08; letter-spacing: -.045em; }
.auth-backdrop-brand .auth-brand-copy strong { font-size: inherit; line-height: inherit; letter-spacing: inherit; background: none; color: #9af4d6; text-shadow: none; }
.auth-backdrop-brand .auth-brand-copy > span { max-width: 34ch; margin-top: 16px; color: rgba(255,255,255,.8); font-size: clamp(13px, 1.2vw, 16px); letter-spacing: 0; line-height: 1.5; }
.auth-backdrop-brand .auth-brand-wordmark span { margin-top: 0; color: #8feee0; font-size: 12px; letter-spacing: .22em; }
.auth-backdrop-brand .auth-brand-wordmark small { margin-top: 0; color: rgba(255,255,255,.72); font-size: 10px; letter-spacing: .14em; }
.auth-card { width: min(100%, 390px); justify-self: center; }
@media (max-width: 900px) {
  .auth-screen { grid-template-columns: 1fr; gap: 14px; padding: 20px; overflow-y: auto; }
  .auth-backdrop-brand { min-height: 220px; max-height: 38vh; padding: 24px !important; }
  .auth-backdrop-brand .auth-brand-copy { margin-top: 18px; }
  .auth-backdrop-brand .auth-brand-copy h2 { font-size: clamp(1.8rem, 6vw, 2.8rem); }
  .auth-card { width: min(100%, 390px); }
}
@media (max-width: 560px) {
  .auth-screen { gap: 8px; padding: 12px; overflow-y: auto; }
  .auth-backdrop-brand { display: block !important; min-height: 72px; max-height: 96px; padding: 8px 10px !important; border-radius: 18px; background: transparent; box-shadow: none; }
  .auth-backdrop-brand::before, .auth-backdrop-brand::after, .auth-backdrop-brand .auth-pulse-orbit, .auth-backdrop-brand .auth-pulse-lines { display: none; }
  .auth-backdrop-brand .auth-brand-lockup { justify-content: center; align-items: center; gap: 9px; }
  .auth-backdrop-brand .auth-brand-symbol { width: 46px; height: 46px; }
  .auth-backdrop-brand .auth-brand-wordmark img { width: 158px; filter: none; }
  .auth-backdrop-brand .auth-brand-wordmark span { color: #0876d8; font-size: 8px; }
  .auth-backdrop-brand .auth-brand-wordmark small { color: #5b7487; font-size: 7px; }
  .auth-backdrop-brand .auth-brand-copy { display: none; }
  .auth-card { width: 100%; }
}

/* Portal V2: a navegação lateral por áreas substitui a barra superior legada. */
#moduleNav > .nav-section,
#moduleNav > details { display: none !important; }
.portal-area-nav { display: grid; gap: 4px; padding: 16px 14px 12px; }
.portal-area-nav .nav-title { margin: 0 10px 8px; color: #6a7d87; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.portal-area-nav .tab-button { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 11px; background: transparent; color: #385764; text-align: left; }
.portal-area-nav .tab-button:hover, .portal-area-nav .tab-button:focus-visible, .portal-area-nav .tab-button.active { background: linear-gradient(135deg, rgba(20,118,208,.12), rgba(31,191,151,.14)); color: #0b5571; outline: none; }
.area-nav-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(22,118,208,.1); color: #1476d0; font-size: 15px; font-weight: 900; }
.portal-area-nav .tab-button small { color: #1476d0; font-size: 8px; font-weight: 900; }
.portal-area-nav-divider { height: 1px; margin: 12px 8px 8px; background: rgba(78,113,128,.18); }
.portal-area-nav + .mobile-nav-header { display: none; }
.module-nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 80; width: 246px; overflow-y: auto; border-right: 1px solid rgba(78,113,128,.16); background: rgba(249,253,255,.96); box-shadow: 8px 0 24px rgba(27,76,119,.06); }
.nav-collapse-button { position: absolute; top: 10px; right: 12px; z-index: 2; }
#appShell > .topbar { margin-left: 246px; }
#appShell > .portal-layout, #appShell > main:not(.portal-layout) { margin-left: 246px; }
body.nav-collapsed .module-nav { width: 74px; }
body.nav-collapsed #appShell > .topbar, body.nav-collapsed #appShell > .portal-layout, body.nav-collapsed #appShell > main:not(.portal-layout) { margin-left: 74px; }
body.nav-collapsed .portal-area-nav .nav-title, body.nav-collapsed .portal-area-nav .tab-button span:not(.area-nav-icon), body.nav-collapsed .portal-area-nav .tab-button small { display: none; }
body.nav-collapsed .portal-area-nav .tab-button { grid-template-columns: 1fr; justify-items: center; padding-inline: 6px; }
body.nav-collapsed .portal-area-nav-divider { margin-inline: 12px; }
.portal-hero { padding: 22px 24px; }
.portal-meta-grid article { padding: 10px 12px; }
.portal-control-panel { margin-top: 8px; }
.portal-favorites { margin-top: 14px; }

@media (max-width: 760px) {
  #moduleNav { position: fixed; width: min(300px, 88vw); }
  #appShell > .topbar, #appShell > .portal-layout, #appShell > main:not(.portal-layout) { margin-left: 0; }
  body.nav-collapsed #appShell > .topbar, body.nav-collapsed #appShell > .portal-layout, body.nav-collapsed #appShell > main:not(.portal-layout) { margin-left: 0; }
  .portal-area-nav { padding-top: 18px; }
}

.portal-area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.portal-area-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  min-height: 152px;
  padding: 20px;
  border: 1px solid rgba(37,111,104,.14);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,249,250,.94));
  box-shadow: 0 12px 28px rgba(27,76,119,.08);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.portal-area-card:hover, .portal-area-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(31,164,148,.48);
  box-shadow: 0 16px 32px rgba(27,76,119,.13);
  outline: 3px solid rgba(47,207,150,.14);
}
.portal-area-platform { background: linear-gradient(145deg, rgba(235,247,255,.98), rgba(239,252,247,.96)); }
.portal-area-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: linear-gradient(135deg, #1676d0, #22bf99);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}
.portal-area-copy { min-width: 0; }
.portal-area-copy strong { display: block; margin: 4px 0 7px; color: #173f58; font-size: 18px; line-height: 1.18; }
.portal-area-copy p { margin: 0; color: #607783; font-size: 13px; line-height: 1.42; }
.portal-area-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: auto; color: #6b7f89; font-size: 11px; font-weight: 800; }
.portal-area-foot b { color: #1676d0; font-size: 18px; }
.portal-control-panel .portal-filter-group { display: none; }
.portal-insights, .portal-quick-access { display: none !important; }
.portal-control-panel { display: none; }
.portal-command-scope { display: none; }
.portal-hero-panel { display: none; }
.portal-hero { min-height: 0; padding: 11px 20px; }
.portal-company-copy .eyebrow { margin-bottom: 4px; }
.portal-company-copy h2 { margin-block: 0 4px; font-size: clamp(24px, 2.3vw, 34px); }
.portal-company-copy p { margin-block: 0; }
.portal-company-logo-frame { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(20,118,208,.18); border-radius: 15px; background: #f4fafb; }
.portal-company-logo-frame .portal-company-logo { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 6px; }
.portal-hero-actions { display: none; }
#appShell > .portal-layout { width: auto; max-width: none; min-width: 0; overflow-x: hidden; }
#appShell > .topbar { gap: 10px; padding-inline: 14px 18px; }
#appShell > .topbar .topbar-actions { gap: 6px; min-width: 0; }
#appShell > .topbar .topbar-brand-copy { min-width: 0; }
#appShell > .topbar .topbar-brand-copy .eyebrow { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#appShell > .topbar #topbarAssistantButton { display: none; }

@media (max-width: 1180px) { .portal-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .portal-area-grid { grid-template-columns: 1fr; gap: 12px; }
  .portal-area-card { min-height: 132px; padding: 16px; border-radius: 16px; }
  .portal-area-copy strong { font-size: 16px; }
}

/* Refinos finais do seletor Master e do rodape do Login. */
.company-choice-card {
  position: relative;
  grid-template-columns: 1fr;
  min-height: 72px;
  padding: 13px 42px 13px 16px;
  border-color: rgba(37,111,104,.16);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.company-choice-card:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(37,111,104,.1); }
.company-choice-card.selected { border-color: #27a995; box-shadow: 0 8px 20px rgba(37,111,104,.14), inset 3px 0 0 #27a995; }
.company-choice-mark {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid #a8bac2;
  border-radius: 7px;
  background: #fff;
}
.company-choice-card.selected .company-choice-mark {
  display: grid;
  place-items: center;
  border: 0;
  background: linear-gradient(135deg,#1478d1,#24bf96);
}
.company-choice-card.selected .company-choice-mark::after {
  content: "✓";
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.auth-credit {
  right: 0;
  bottom: 10px;
  left: 0;
  width: fit-content;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  padding: 6px 14px;
  background: transparent;
  box-shadow: none;
  color: #5d7889;
  font-size: 12px;
  font-weight: 700;
  text-shadow: none;
}

/* Final pilot-shell override: tabs own their horizontal overflow. */
.vasi-module-tabs {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: color-mix(in srgb, var(--accent) 58%, transparent) transparent;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.vasi-module-tabs .feature-tab {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  scroll-snap-align: start;
}

.vasi-module-tabs .feature-tab:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, #fff);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .vasi-module-tabs { gap: 6px; scrollbar-width: none; }
  .vasi-module-tabs::-webkit-scrollbar { display: none; }
  .vasi-module-tabs .feature-tab { min-height: 44px; padding-inline: 14px; }
}

/* PEP catalog migration: compose existing catalog controls with the frozen shell. */
#pepCatalogView > .vasi-page-header { padding-bottom: 2px; }
#pepCatalogView > .vasi-data-region {
  display: grid;
  gap: var(--vasi-shell-space-4);
  min-width: 0;
}
#pepCatalogView .pep-catalog-heading {
  align-items: flex-end;
  margin: 0;
  padding: 0 0 var(--vasi-shell-space-3);
  border-bottom: 1px solid var(--vasi-shell-divider);
}
#pepCatalogView .pep-catalog-heading > div:first-child { min-width: 0; }
#pepCatalogView .pep-catalog-heading h2 { margin-bottom: 4px; }
#pepCatalogView .pep-catalog-heading .segmented-tabs {
  flex: 0 1 auto;
  max-width: 100%;
  justify-content: flex-end;
}
#pepCatalogView .segmented-tabs .secondary-button {
  min-height: 38px;
  white-space: nowrap;
}
#pepCatalogView .vasi-filter-bar {
  min-width: 0;
  padding: var(--vasi-shell-space-2);
  border: 1px solid var(--vasi-shell-divider);
  border-radius: var(--vasi-shell-radius);
  background: color-mix(in srgb, var(--panel) 82%, var(--vasi-shell-divider));
}
#pepCatalogView .vasi-form-section {
  min-width: 0;
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  background: color-mix(in srgb, var(--panel) 94%, var(--accent));
}
#pepCatalogView .table-wrap,
#pepCatalogView [data-pep-catalog-panel] { min-width: 0; }
#pepCatalogView [data-pep-catalog-panel] > .records-header,
#pepCatalogView .pep-price-items > .records-header { min-width: 0; }

@media (max-width: 900px) {
  #pepCatalogView .pep-catalog-heading { align-items: stretch; }
  #pepCatalogView .pep-catalog-heading .segmented-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  #pepCatalogView .pep-catalog-heading .segmented-tabs .secondary-button { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  #pepCatalogView > .vasi-data-region { padding: var(--vasi-shell-space-3); }
  #pepCatalogView .pep-catalog-heading { gap: var(--vasi-shell-space-3); }
  #pepCatalogView .vasi-filter-bar { grid-template-columns: minmax(0, 1fr); }
  #pepCatalogView .vasi-filter-bar > * { min-width: 0; width: 100%; }
}

/* Session packages migration: reuse the frozen internal shell contract. */
#pepPackagesView > .vasi-page-header { padding-bottom: 2px; }
#pepPackagesView > .vasi-data-region {
  display: grid;
  gap: var(--vasi-shell-space-4);
  min-width: 0;
}
#pepPackagesView .production-header {
  min-width: 0;
  margin: 0;
}
#pepPackagesView .production-header > div:first-child { min-width: 0; }
#pepPackagesView .vasi-filter-bar {
  min-width: 0;
  padding: var(--vasi-shell-space-2);
  border: 1px solid var(--vasi-shell-divider);
  border-radius: var(--vasi-shell-radius);
  background: color-mix(in srgb, var(--panel) 82%, var(--vasi-shell-divider));
}
#pepPackagesView .vasi-filter-bar > * { min-width: 0; }
#pepPackagesView > .vasi-data-region > .table-wrap {
  min-width: 0;
  max-width: 100%;
}
#pepPackagesView .vasi-form-section {
  min-width: 0;
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

@media (max-width: 1180px) {
  #pepPackagesView .vasi-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  #pepPackagesView > .vasi-data-region { padding: var(--vasi-shell-space-3); }
  #pepPackagesView .vasi-filter-bar { grid-template-columns: minmax(0, 1fr); }
  #pepPackagesView .vasi-filter-bar > * { width: 100%; }
}

/* Production migration: keep the existing data workflow inside the frozen shell. */
#pepProductionView > .vasi-page-header { padding-bottom: 2px; }
#pepProductionView > .vasi-data-region {
  display: grid;
  gap: var(--vasi-shell-space-4);
  min-width: 0;
}
#pepProductionView .production-header {
  min-width: 0;
  margin: 0;
}
#pepProductionView .production-header > div:first-child { min-width: 0; }
#pepProductionView .production-header-actions {
  flex: 0 1 auto;
  min-width: 0;
}
#pepProductionView .vasi-filter-bar {
  min-width: 0;
  padding: var(--vasi-shell-space-2);
  border: 1px solid var(--vasi-shell-divider);
  border-radius: var(--vasi-shell-radius);
  background: color-mix(in srgb, var(--panel) 82%, var(--vasi-shell-divider));
}
#pepProductionView .vasi-filter-bar > label { min-width: 0; }
#pepProductionView .production-summary { min-width: 0; }
#pepProductionView > .vasi-data-region > .table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 1180px) {
  #pepProductionView .vasi-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #pepProductionView .production-header-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  #pepProductionView > .vasi-data-region { padding: var(--vasi-shell-space-3); }
  #pepProductionView .vasi-filter-bar { grid-template-columns: minmax(0, 1fr); }
#pepProductionView .vasi-filter-bar > label,
#pepProductionView .vasi-filter-bar > * { width: 100%; }

/* Formulário Raiz VASI — contrato compartilhado pelos pilotos internos. */
.vasi-root-form {
  --vasi-form-control-min: var(--vasi-shell-filter-min);
  min-width: 0;
  max-width: 100%;
}
.vasi-root-form > * { min-width: 0; max-width: 100%; }
.vasi-root-form .module-tabbar,
.vasi-root-form .feature-tabs { min-width: 0; max-width: 100%; }
.vasi-root-form .feature-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.vasi-root-form .records-header,
.vasi-root-form .accounting-toolbar,
.vasi-root-form .vasi-toolbar { min-width: 0; max-width: 100%; }
.vasi-root-form .filters,
.vasi-root-form .vasi-filter-bar { min-width: 0; max-width: 100%; }
.vasi-root-form .filters > *,
.vasi-root-form .vasi-filter-bar > * { min-width: 0; max-width: 100%; }
.vasi-root-form .table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; }
.vasi-root-form table { min-width: 100%; }
.vasi-root-form .crm-summary-cards,
.vasi-root-form .accounting-summary-grid { min-width: 0; max-width: 100%; }
.vasi-root-form .accounting-workbench { min-width: 0; max-width: 100%; }
.vasi-root-form .accounting-content,
.vasi-root-form .accounting-sidebar { min-width: 0; }
@media (max-width: 1151px) {
  .vasi-root-form .vasi-page-header { flex-wrap: wrap; }
  .vasi-root-form .records-header,
  .vasi-root-form .accounting-toolbar { flex-wrap: wrap; }
  .vasi-root-form .filters,
  .vasi-root-form .vasi-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .vasi-root-form { gap: var(--vasi-shell-space-3); }
  .vasi-root-form .filters,
  .vasi-root-form .vasi-filter-bar { grid-template-columns: minmax(0, 1fr); }
  .vasi-root-form .filters > *,
  .vasi-root-form .vasi-filter-bar > * { width: 100%; }
  .vasi-root-form .accounting-workbench { grid-template-columns: minmax(0, 1fr); }
}
  #pepProductionView .production-header-actions { width: 100%; }
  #pepProductionView .production-header-actions > button { flex: 1 1 0; }
}

/* Production tabs: the shared component owns its overflow and never wraps. */
#pepProductionView > .vasi-module-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-self: start;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: 56px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
#pepProductionView > .vasi-module-tabs > .feature-tab {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

/* Shell hotfix: preserve sidebar geometry without masking global overflow. */
@media (min-width: 761px) {
  #appShell > main:not(.portal-layout) {
    box-sizing: border-box;
    width: calc(100% - 184px);
    max-width: calc(100% - 184px);
    min-width: 0;
  }

  body.nav-collapsed #appShell > main:not(.portal-layout) {
    width: calc(100% - 68px);
    max-width: calc(100% - 68px);
  }

  #medicalRecordsView.clinical-focus-active,
  #jornadaView {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .active-company-logo {
    width: 52px;
    height: 52px;
    padding: 5px;
  }

  .portal-company-logo-frame {
    width: 58px !important;
    height: 58px !important;
  }

  .portal-company-logo-frame .portal-company-logo {
    width: 50px !important;
    height: 50px !important;
    padding: 5px !important;
  }

  .nav-collapse-button {
    width: 28px;
    height: 28px;
    border-color: rgba(143, 238, 224, .46);
    border-radius: 9px;
    background: linear-gradient(135deg, #0a4e8a, #0f9f9c);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 5px 12px rgba(3, 49, 83, .25);
  }

  .nav-collapse-button:hover,
  .nav-collapse-button:focus-visible {
    border-color: #9af4d6;
    color: #fff;
    outline: 3px solid rgba(143, 238, 224, .24);
  }

  #moduleNav,
  #moduleNav .portal-area-nav,
  #moduleNav .portal-area-nav .tab-button {
    overflow: visible;
  }

  body.nav-collapsed .portal-area-nav .tab-button[data-tooltip]::after {
    width: max-content;
    max-width: min(300px, calc(100vw - 100px));
    padding: 8px 11px;
    border: 1px solid rgba(143, 238, 224, .4);
    border-radius: 9px;
    background: linear-gradient(135deg, #063f67, #075d79);
    color: #fff;
    box-shadow: 0 10px 24px rgba(3, 49, 83, .28);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
  }
}

/* Final shell geometry: rail and workspace share the same width contract. */
@media (min-width: 761px) {
  #moduleNav { width: 184px; height: 100dvh; max-height: 100dvh; min-height: 0; overflow-x: clip; overflow-y: auto; }
  #appShell > .topbar,
  #appShell > .portal-layout,
  #appShell > main:not(.portal-layout) { box-sizing: border-box; min-width: 0; max-width: calc(100% - 184px); }
  #appShell > .portal-layout { width: calc(100% - 184px); overflow-x: visible; }
  body.nav-collapsed #moduleNav { width: 74px; overflow-x: visible; overflow-y: visible; }
  body.nav-collapsed #appShell > .topbar,
  body.nav-collapsed #appShell > .portal-layout,
  body.nav-collapsed #appShell > main:not(.portal-layout) { width: calc(100% - 74px); max-width: calc(100% - 74px); }
}

/* Viewport contract: compactar o shell antes de reorganizar a operacao. */
@media (min-width: 981px) {
  #commerceView.vasi-root-form.commerce-sale-active {
    height: calc(100dvh - 64px);
    min-height: 0;
    grid-template-rows: 22px 38px 42px minmax(0, 1fr);
    gap: 6px;
    padding: 4px 8px 8px;
    overflow: hidden;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-context-bar { min-height: 0; height: 22px; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header { min-height: 0; height: 38px; padding: 0 0 4px; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header h1 { margin: 0; font-size: 1.35rem; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header .panel-copy { display: none; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-tabbar { min-height: 0; height: 42px; padding: 4px; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench { min-height: 0; height: 100%; overflow: auto; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-header { margin: 0 0 4px; padding-bottom: 4px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-header .panel-copy { display: none; }
}

/* Nova Venda e tabs Comerciais: contrato final de reorganizacao sem perda funcional. */
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-workbench,
#commerceView.vasi-root-form.commerce-sale-active .commerce-workbench-panel,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart { min-width: 0; max-width: 100%; }
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form { height: auto; overflow: visible; }
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-workbench,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side,
#commerceView.vasi-root-form.commerce-sale-active .commerce-payment-review,
#commerceView.vasi-root-form.commerce-sale-active .commerce-payment-summary,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions {
  height: auto;
  min-height: 0;
  overflow: visible;
}
@media (min-width: 981px) {
  /* A operacao rola dentro do workspace; nunca corta o fechamento nem cria scroll global. */
  body:has(#commerceView.commerce-sale-active:not([hidden])) { overflow: hidden; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench {
    min-height: 0;
    height: 100%;
    overflow: auto !important;
  }
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { display: grid; }
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout { grid-template-columns: minmax(0, 1fr); }
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: none;
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side > * { grid-area: auto; }
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side .commerce-sale-details {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions { position: static; width: 100%; }
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form input,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form select,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form textarea,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form button { min-width: 0; max-width: 100%; }
#commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table { max-width: 100%; overflow-x: auto; }
#commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table table { min-width: 720px; }
#commerceView.vasi-root-form > .commerce-tabbar {
  border-color: color-mix(in srgb, var(--vasi-blue) 42%, var(--line));
  background: linear-gradient(110deg, var(--vasi-navy-2), var(--vasi-navy) 56%, color-mix(in srgb, var(--vasi-cyan) 44%, var(--vasi-navy)));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--vasi-navy) 16%, transparent);
}
#commerceView.vasi-root-form > .commerce-tabbar::after { background: linear-gradient(90deg, var(--vasi-blue), var(--vasi-cyan), var(--vasi-green)); }
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab { border-color: color-mix(in srgb, white 28%, transparent); background: color-mix(in srgb, white 10%, transparent); color: white; }
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab:hover,
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab:focus-visible { border-color: var(--vasi-cyan); background: color-mix(in srgb, var(--vasi-cyan) 26%, transparent); color: white; }
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab.active { border-color: white; background: linear-gradient(135deg, var(--vasi-blue), var(--vasi-cyan)); color: white; }

/* Autoridade visual final do Comercial: superficies claras e degradês de baixa intensidade. */
#commerceView.vasi-root-form > .commerce-tabbar,
#commerceView.vasi-root-form > .commerce-tabbar .module-tabs {
  background: var(--vasi-gradient-surface);
  border-color: var(--vasi-border-soft);
  box-shadow: var(--vasi-shadow-soft);
}
#commerceView.vasi-root-form > .commerce-tabbar::after { background: linear-gradient(90deg, var(--vasi-blue), var(--vasi-cyan), var(--vasi-green)); }
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab { border-color: var(--vasi-border-soft); background: transparent; color: var(--vasi-text); box-shadow: none; }
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab:hover,
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab:focus-visible { border-color: var(--vasi-accent); background: color-mix(in srgb, var(--vasi-accent) 8%, white); color: var(--vasi-primary-hover); box-shadow: var(--vasi-focus); }
#commerceView.vasi-root-form > .commerce-tabbar .feature-tab.active { border-color: transparent; background: var(--vasi-gradient-active); color: white; box-shadow: 0 5px 14px rgba(8, 118, 216, .18); }
#commerceView.vasi-root-form .commerce-tab-panel,
#commerceView.vasi-root-form .commerce-workbench-panel,
#commerceView.vasi-root-form .commerce-sale-checkout,
#commerceView.vasi-root-form .commerce-payment-review,
#commerceView.vasi-root-form .commerce-payment-summary { border-color: var(--vasi-border); background: var(--vasi-gradient-surface); box-shadow: var(--vasi-shadow-soft); }
#commerceView.vasi-root-form input,
#commerceView.vasi-root-form select,
#commerceView.vasi-root-form textarea { border-color: var(--vasi-border); background: var(--vasi-surface); color: var(--vasi-text); }
#commerceView.vasi-root-form input:focus,
#commerceView.vasi-root-form select:focus,
#commerceView.vasi-root-form textarea:focus { border-color: var(--vasi-accent); box-shadow: var(--vasi-focus); }
#commerceView.vasi-root-form .primary-button { background: var(--vasi-gradient-primary); color: white; }
#commerceView.vasi-root-form .table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; border-color: var(--vasi-border); }
#accountingView.vasi-root-form > .vasi-module-tabs,
#accountingView.vasi-root-form > .vasi-module-tabs .feature-tab { border-color: var(--vasi-border-soft); background: var(--vasi-gradient-surface); color: var(--vasi-text); }
#accountingView.vasi-root-form > .vasi-module-tabs .feature-tab.active { background: var(--vasi-gradient-active); color: white; }
@media (max-width: 1240px) {
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout { grid-template-columns: minmax(0, 1fr); }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-workbench-panel { height: auto; overflow: visible; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-product-gallery { max-height: 360px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: var(--vasi-shell-space-4); }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form > * { grid-area: auto; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
}

/* Nova Venda — autoridade final da variante Tela Cheia Operacional. */
@media (min-width: 981px) {
  html:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) { height: 100%; overflow: hidden; }
  body:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) { height: 100dvh; overflow: hidden; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench { min-height: 0; height: 100%; overflow: hidden !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout { min-height: 0; height: 100%; overflow: hidden; grid-template-columns: minmax(260px, .38fr) minmax(0, 1fr); gap: 8px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart { min-height: 0; height: 100%; overflow: hidden; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form { min-height: 0; height: 100%; overflow: hidden; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); grid-template-rows: auto auto minmax(0, 1fr) auto minmax(150px, auto); grid-template-areas: "context total" "fiscal payment" "cart cart" "delivery delivery" "checkout checkout"; gap: 6px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid { grid-area: context; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid { grid-area: fiscal; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table { grid-area: cart; min-height: 0; overflow: auto; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total { grid-area: total; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel { grid-area: payment; min-width: 0; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid { grid-area: delivery; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout { grid-area: checkout; min-height: 0; height: 150px; overflow: hidden; grid-template-columns: minmax(0, 1fr); grid-template-rows: 50px 100px; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side {
    min-height: 0; overflow: hidden;
    grid-template-columns: minmax(180px, 1fr) 180px 180px;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "details summary actions";
    align-items: stretch;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details { grid-area: details; min-width: 0; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-summary { grid-area: summary; min-width: 0; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions { grid-area: actions; min-width: 150px; height: 100%; }
  #commerceView.vasi-root-form.commerce-sale-active #commerceSaleMessage { grid-column: 1 / -1; }
}
@media (min-width: 761px) and (max-width: 1240px) {
  #commerceView.vasi-root-form.commerce-sale-active { height: calc(100dvh - 64px) !important; min-height: 0 !important; overflow: hidden !important; grid-template-rows: 22px 38px 42px minmax(0, 1fr) !important; }
}

/* P0: a estação Nova Venda deve renderizar o formulário completo; somente o
   workspace pode rolar quando o conteúdo exceder a altura disponível. */
#commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header {
  display: flex !important;
  min-height: 38px !important;
  height: 38px !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 4px !important;
}
#commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header > div { display: none; }
#commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench:not([hidden]) { display: block !important; }
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form { visibility: visible !important; opacity: 1 !important; }
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
  display: grid !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
#commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

@media (min-width: 761px) and (max-width: 980px) {
  #commerceView.vasi-root-form.commerce-sale-active { grid-template-rows: 18px 28px 30px minmax(0, 1fr) !important; gap: 3px !important; padding: 2px 4px 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-context-bar { height: 18px !important; min-height: 0 !important; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header { height: 28px !important; min-height: 0 !important; padding: 0 !important; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header .panel-copy { display: none !important; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-tabbar { height: 30px !important; min-height: 0 !important; padding: 2px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
    position: fixed; top: auto !important; right: 4px !important; bottom: 0 !important; left: 428px !important;
    width: auto !important; height: 150px; min-height: 150px; z-index: 20;
  }
}

@media (min-width: 761px) and (max-width: 1240px) {
  html:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) { height: 100%; overflow: hidden; }
  body:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) { height: 100dvh; overflow: hidden; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px;
    min-height: 0;
    height: 58px;
    overflow: visible;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid label { min-width: 0; gap: 2px; font-size: .68rem; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid select { min-width: 0; height: 32px; padding: 4px 6px; font-size: .72rem; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench { height: 100%; min-height: 0; overflow: hidden !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout { height: 100%; min-height: 0; overflow: hidden; grid-template-columns: minmax(240px, .38fr) minmax(0, 1fr); }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart { height: 100%; min-height: 0; overflow: hidden; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form { position: relative; height: 100%; min-height: 0; overflow: hidden; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout { position: absolute; top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; grid-area: auto !important; margin: 0 !important; z-index: 5; height: 150px; min-height: 150px; background: var(--vasi-surface); }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { grid-template-columns: minmax(160px, 1fr) 150px 160px; }
  @media (min-width: 761px) and (max-width: 980px), (min-width: 761px) and (max-width: 1240px) and (max-height: 600px) {
    #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 4px;
      min-height: 0;
      height: 58px;
      overflow: visible;
    }
    #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid label {
      min-width: 0;
      gap: 2px;
      font-size: .68rem;
    }
    #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid input,
    #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid select {
      min-width: 0;
      height: 32px;
      padding: 4px 6px;
      font-size: .72rem;
    }
    #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
      position: fixed; top: auto !important; right: 4px !important; bottom: 0 !important; left: 428px !important;
      width: auto !important; height: 84px; min-height: 84px; z-index: 20;
    }
    #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { grid-template-columns: minmax(130px, 1fr) 140px 210px; }
    #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout { grid-template-rows: 26px 58px; }
    #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions {
      height: 58px !important;
      min-height: 0;
      overflow: hidden;
      align-self: stretch;
    }
    #commerceView.vasi-root-form.commerce-sale-active #commerceSaleSubmitButton {
      position: relative;
      top: -4px;
      height: 48px;
      min-height: 48px;
    }
  }
}
@media (max-width: 760px) {
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid { grid-template-columns: minmax(0, 1fr); }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-product-gallery { max-height: none; }
}

/* P0 final tail: this is the authoritative geometry layer and must remain
   after the historical Commerce breakpoint rules above. */
@media (min-width: 761px) {
  #commerceView.vasi-root-form.commerce-sale-active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    grid-template-rows: none !important;
    gap: 4px !important;
    padding: 4px 8px 8px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-context-bar,
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-tabbar { display: none !important; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header {
    display: flex !important;
    flex: 0 0 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 0 2px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 8px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout {
    display: grid !important;
    flex: 1 1 auto !important;
    grid-template-columns: minmax(240px, .38fr) minmax(0, 1.62fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    gap: 8px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products { display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-product-gallery { min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart { padding: 8px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px 58px minmax(120px, 1fr) 40px 104px auto 118px auto !important;
    grid-template-areas: "context" "fiscal" "cart" "total" "payment" "delivery" "checkout" "message" !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    scrollbar-gutter: stable;
    gap: 4px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid { grid-area: context !important; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr) !important; gap: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid { grid-area: fiscal !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; padding: 4px 6px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table { grid-area: cart !important; min-height: 120px !important; max-height: none !important; overflow: auto !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-delivery-grid { grid-area: delivery !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important; min-height: 62px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total { grid-area: total !important; min-height: 0 !important; padding: 4px 10px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel { grid-area: payment !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout {
    display: grid !important;
    grid-area: checkout !important;
    grid-template-columns: minmax(110px, .68fr) minmax(0, 1.32fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-review,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-review { overflow: auto !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(84px, .82fr) minmax(110px, 1.18fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "details summary actions" !important; gap: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details { display: grid !important; grid-area: details !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; min-width: 0 !important; gap: 3px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-adjustment-grid { display: contents !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details > label { min-width: 0 !important; gap: 2px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details textarea { min-width: 0 !important; width: 100% !important; height: 32px !important; min-height: 32px !important; padding: 4px 5px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details textarea { resize: none !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-observation-field { grid-column: 1 / -1 !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-summary { grid-area: summary !important; min-width: 0 !important; overflow: hidden !important; padding: 6px 7px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions { display: grid !important; grid-area: actions !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 4px !important; overflow: hidden !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions button { width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 46px !important; height: 46px !important; padding: 3px 6px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 31px minmax(0, 1fr) !important;
    grid-template-areas: "heading" "payment" !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-heading,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel > .commerce-payment-grid { grid-column: 1 !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-heading { grid-area: heading !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel > .commerce-payment-grid { grid-area: payment !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-items: stretch !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label {
    display: grid !important;
    grid-template-rows: 14px 32px minmax(0, 1fr) !important;
    align-content: stretch !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > button {
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding-block: 4px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > .commerce-sale-fiscal-status {
    min-width: 0 !important;
    max-height: 18px !important;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid label { min-width: 0 !important; gap: 2px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid button { min-width: 0 !important; width: 100% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form > * { min-width: 0 !important; max-width: 100% !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table table { width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: fixed !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td { min-width: 0 !important; padding: 4px !important; overflow-wrap: anywhere !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table button { min-width: 0 !important; width: 100% !important; padding-inline: 3px !important; }
}

/* Hotfix Nova Venda: reservar a terceira linha do campo fiscal antes do
   fechamento, evitando que o aviso de nota invada o checkout. */
@media (min-width: 761px) and (min-height: 621px) {
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form,
  #commerceView.commerce-sale-active .commerce-sale-form {
    grid-template-rows: 52px 58px minmax(120px, 1fr) 40px 104px auto 118px auto !important;
    grid-template-areas: "context" "fiscal" "cart" "total" "payment" "delivery" "checkout" "message" !important;
    overflow: auto !important;
    scrollbar-gutter: stable;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel,
  #commerceView.commerce-sale-active .commerce-sale-payment-panel {
    height: auto !important;
    min-height: 116px !important;
    overflow: visible !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid,
  #commerceView.commerce-sale-active .commerce-payment-grid {
    height: auto !important;
    min-height: 82px !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    grid-template-rows: auto !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label,
  #commerceView.commerce-sale-active .commerce-payment-grid > label {
    height: auto !important;
    min-height: 74px !important;
    min-width: 0 !important;
    grid-template-rows: 14px 32px minmax(24px, auto) !important;
    overflow: visible !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > button,
  #commerceView.commerce-sale-active .commerce-payment-grid > label > input,
  #commerceView.commerce-sale-active .commerce-payment-grid > label > select,
  #commerceView.commerce-sale-active .commerce-payment-grid > label > button {
    width: 100% !important;
    min-width: 0 !important;
  }

  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-status,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > .commerce-sale-fiscal-status,
  #commerceView.commerce-sale-active .commerce-sale-fiscal-status,
  #commerceView.commerce-sale-active .commerce-payment-grid > label > .commerce-sale-fiscal-status {
    display: block !important;
    min-height: 24px !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    padding: 2px 4px !important;
    line-height: 1.1 !important;
  }
}

/* A busca do catálogo preserva o fluxo aprovado da coluna esquerda: produto,
   categoria, limpeza e lista, sem dividir os controles em uma faixa horizontal. */
@media (min-width: 761px) {
  #commerceView.commerce-sale-active .commerce-sale-searchbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    align-items: stretch !important;
  }

  #commerceView.commerce-sale-active .commerce-sale-reset {
    grid-column: auto !important;
  }
}

@media (min-width: 761px) and (max-height: 620px) {
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar { min-height: 0 !important; padding: 5px 8px !important; gap: 4px !important; flex-wrap: nowrap !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 20px 40px !important;
    grid-template-areas: "heading" "payment" !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-heading,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel > .commerce-payment-grid { grid-column: 1 !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-heading { grid-area: heading !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel > .commerce-payment-grid { grid-area: payment !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    grid-template-rows: 40px !important;
    padding: 0 !important;
    gap: 3px !important;
    overflow: visible !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label {
    display: grid !important;
    grid-template-rows: 10px 24px 6px !important;
    align-content: start !important;
    min-height: 40px !important;
    height: 40px !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > button {
    align-self: start !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 3px !important;
  }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid > label > .commerce-sale-fiscal-status {
    max-height: 6px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-brand { flex: 0 1 44% !important; min-width: 0 !important; gap: 4px !important; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .system-top-logo { width: 34px !important; height: 34px !important; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-brand-copy { min-width: 0 !important; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-brand-copy .eyebrow { margin: 0 !important; font-size: 8px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .brand-line h1 { font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .company-context { margin: 0 !important; font-size: 9px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-actions { flex: 1 1 56% !important; min-width: 0 !important; flex-wrap: nowrap !important; gap: 3px !important; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-actions > * { min-width: 0 !important; }
  #appShell:has(#commerceView.vasi-root-form.commerce-sale-active:not([hidden])) > .topbar .topbar-actions button { min-height: 28px !important; height: 28px !important; padding: 3px 6px !important; font-size: 11px !important; }
  #commerceView.vasi-root-form.commerce-sale-active > .vasi-page-header { flex-basis: 26px !important; height: 26px !important; min-height: 26px !important; }
  #commerceView.vasi-root-form.commerce-sale-active > .commerce-sale-workbench { padding: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-layout { gap: 4px !important; grid-template-columns: minmax(210px, .36fr) minmax(0, 1.64fr) !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-products,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-cart { padding: 5px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar { gap: 3px !important; padding: 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-searchbar button { height: 28px !important; min-height: 28px !important; padding-block: 2px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form { grid-template-rows: 38px 42px minmax(42px, 1fr) 28px 62px 82px auto !important; gap: 3px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-context-grid { gap: 3px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-fiscal-grid { gap: 3px !important; padding: 2px 4px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form label { gap: 1px !important; font-size: .62rem !important; line-height: 1 !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form select { height: 24px !important; min-height: 24px !important; padding: 2px 4px !important; font-size: .68rem !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-form textarea { height: 24px !important; min-height: 24px !important; padding: 2px 4px !important; font-size: .68rem !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-total { padding: 2px 6px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-heading { min-height: 20px !important; height: 20px !important; padding: 2px 4px !important; font-size: .68rem !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-payment-panel { height: 62px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-payment-grid { gap: 3px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout { grid-template-columns: minmax(90px, .62fr) minmax(0, 1.38fr) !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-checkout-side { grid-template-columns: minmax(0, 1.25fr) minmax(68px, .8fr) minmax(92px, 1.2fr) !important; gap: 3px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details { gap: 2px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-details textarea { height: 24px !important; min-height: 24px !important; padding: 2px 3px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions { padding: 2px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions button { height: 40px !important; min-height: 40px !important; padding: 2px 4px !important; font-size: 10px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-sale-actions button strong { font-size: 13px !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table th,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table td { padding: 2px 3px !important; font-size: .64rem !important; }
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table input,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table select,
  #commerceView.vasi-root-form.commerce-sale-active .commerce-cart-table button { height: 22px !important; min-height: 22px !important; padding: 1px 2px !important; font-size: .62rem !important; }
}

/* Ajuste pontual do modal "Localizar paciente": a tabela conserva a composição
   aprovada, mas mantém colunas formais e ações inteiras em um scroll interno
   natural quando a largura disponível não comporta a soma mínima. */
.clinical-float-panel--search .patient-search-results {
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
}

.clinical-float-panel--search .patient-search-results table {
  width: 100% !important;
  min-width: 1140px !important;
  table-layout: fixed !important;
}

.clinical-float-panel--search .patient-search-results th:nth-child(1) { width: 20% !important; }
.clinical-float-panel--search .patient-search-results th:nth-child(2) { width: 10% !important; }
.clinical-float-panel--search .patient-search-results th:nth-child(3) { width: 11% !important; }
.clinical-float-panel--search .patient-search-results th:nth-child(4) { width: 16% !important; }
.clinical-float-panel--search .patient-search-results th:nth-child(5) { width: 10% !important; }
.clinical-float-panel--search .patient-search-results th:nth-child(6) { width: 9% !important; }
.clinical-float-panel--search .patient-search-results th:nth-child(7) { width: 24% !important; }

.clinical-float-panel--search .patient-search-results th,
.clinical-float-panel--search .patient-search-results td { vertical-align: middle; }

.clinical-float-panel--search .patient-search-results td:nth-child(2),
.clinical-float-panel--search .patient-search-results td:nth-child(3),
.clinical-float-panel--search .patient-search-results td:nth-child(5),
.clinical-float-panel--search .patient-search-results td:nth-child(6) {
  white-space: nowrap;
  overflow-wrap: normal;
}

.clinical-float-panel--search .patient-search-results td:nth-child(1),
.clinical-float-panel--search .patient-search-results td:nth-child(4) { overflow-wrap: anywhere; }

.clinical-float-panel--search .patient-search-results .table-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.clinical-float-panel--search .patient-search-results .table-actions button {
  flex: 0 0 auto;
  min-height: 38px;
  width: auto !important;
  min-width: 0;
  padding-inline: 12px;
  white-space: nowrap;
}

.clinical-float-panel--search .patient-search-results .table-actions .select-patient { min-width: 132px; }
.clinical-float-panel--search .patient-search-results .table-actions .edit-patient { min-width: 74px; }
.clinical-float-panel--search .patient-search-results .table-actions .delete-patient,
.clinical-float-panel--search .patient-search-results .table-actions .reactivate-patient { min-width: 92px; }
[data-commerce-panel="food"] > .records-header{display:flex!important;grid-template-columns:none!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important}
[data-commerce-panel="food"] > .records-header>div{min-width:0!important;flex:1!important}
[data-commerce-panel="food"] #commerceFoodKitchenBody,
[data-commerce-panel="food"] #commerceFoodKitchenBody ~ *{min-width:0}
[data-commerce-panel="food"] #commerceFoodKitchenBody{font-size:.86rem}
[data-commerce-panel="food"] #commerceFoodKitchenBody td:nth-child(3){overflow-wrap:anywhere}
[data-commerce-panel="food"] #commerceFoodKitchenBody .commerce-food-kitchen-action{padding:7px 10px;white-space:nowrap}
[data-commerce-panel="food"] .commerce-food-kitchen-table{min-width:100%!important;width:100%!important;table-layout:fixed!important}
[data-commerce-panel="food"] .commerce-food-kitchen-table th:nth-child(1){width:11%}
[data-commerce-panel="food"] .commerce-food-kitchen-table th:nth-child(2){width:13%}
[data-commerce-panel="food"] .commerce-food-kitchen-table th:nth-child(3){width:31%}
[data-commerce-panel="food"] .commerce-food-kitchen-table th:nth-child(4){width:13%}
[data-commerce-panel="food"] .commerce-food-kitchen-table th:nth-child(5){width:17%}
[data-commerce-panel="food"] .commerce-food-kitchen-table th:nth-child(6){width:15%}