:root {
  --background: #f5f7ff;
  --surface: #f9f9ff;
  --surface-low: #eef2ff;
  --surface-high: #dee8ff;
  --surface-strong: #d5e3ff;
  --surface-card: #ffffff;
  --sidebar-start: #dbe6ff;
  --sidebar-end: #d8e2fb;
  --text: #0f2f5c;
  --text-muted: #5977a6;
  --text-soft: #7d94b8;
  --primary: #1353d8;
  --primary-dark: #0b48bf;
  --border: rgba(100, 132, 186, 0.16);
  --border-strong: rgba(100, 132, 186, 0.28);
  --success-bg: #dff7e5;
  --success-text: #0f7a3f;
  --warning-bg: #fff2cf;
  --warning-text: #b96d06;
  --danger-bg: #ffe0e2;
  --danger-text: #bf3946;
  --info-bg: #e4efff;
  --info-text: #2c62cf;
  --shadow-soft: 0 18px 48px rgba(17, 41, 83, 0.07);
  --shadow-panel: 0 10px 30px rgba(17, 41, 83, 0.08);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --content-max-width: 1680px;
  --content-gutter: clamp(16px, 2vw, 30px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top left, rgba(19, 83, 216, 0.05), transparent 28%),
    linear-gradient(180deg, #f8faff 0%, #f4f7ff 100%);
  color: var(--text);
  font-family: 'Public Sans', 'Inter', sans-serif;
  overflow-x: hidden;
}

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

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

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.app-shell {
  min-height: 100vh;
  display: flex;
}

.app-sidebar {
  width: 210px;
  flex: 0 0 210px;
  background: linear-gradient(180deg, var(--sidebar-start) 0%, var(--sidebar-end) 100%);
  padding: 22px 0 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: inset -1px 0 0 rgba(72, 108, 176, 0.12);
  scrollbar-width: thin;
}

.sidebar-brand {
  padding: 0 10px 12px;
}

.brand-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.brand-icon {
  width: 100%;
  height: clamp(118px, 18vh, 156px);
  border-radius: 0;
  display: grid;
  place-items: center;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  border-left: 4px solid transparent;
  transition: background-color 160ms ease, color 160ms ease;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.46);
  color: var(--text);
}

.sidebar-link.active {
  background: #ffffff;
  color: var(--primary);
  border-left-color: var(--primary);
}

.sidebar-subnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 4px 48px;
}

.sidebar-subnav.is-open {
  display: flex;
}

.sidebar-sublink {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 7px 16px;
  border-left: 3px solid transparent;
  border-radius: 8px 0 0 8px;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 650;
}

.sidebar-sublink-icon {
  font-size: 18px;
  line-height: 1;
}

.sidebar-badge {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sidebar-sublink:hover {
  background: rgba(255, 255, 255, 0.42);
  color: var(--text);
}

.sidebar-sublink.active {
  background: #ffffff;
  color: var(--primary);
  border-left-color: var(--primary);
}

.sidebar-logout-form {
  margin: 0;
}

.sidebar-button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: 'Inter', sans-serif;
}

.sidebar-footer-link .material-symbols-outlined {
  font-size: 0.75rem;
}

.has-modal-open {
  overflow: hidden;
}

.module-switch-modal[hidden] {
  display: none;
}

.module-switch-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.module-switch-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 31, 61, 0.42);
  backdrop-filter: blur(5px);
}

.module-switch-dialog {
  position: relative;
  width: min(100%, 380px);
  padding: 26px;
  border: 1px solid rgba(100, 132, 186, 0.22);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 31, 61, 0.2);
  text-align: center;
}

.module-switch-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: rgba(19, 83, 216, 0.1);
  color: var(--primary);
}

.module-switch-icon .material-symbols-outlined {
  font-size: 1.25rem;
}

.module-switch-dialog h2 {
  margin: 0;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
}

.module-switch-dialog p {
  margin: 10px 0 22px;
  color: var(--text-muted);
  line-height: 1.5;
}

.module-switch-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.portal-admin-alert {
  margin-bottom: 14px;
}

































































































































































































































#reviewStatus::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 999px;
  background: #10b981;
}













.wizard-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 2px;
  cursor: pointer;
  padding: 0 22px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.wizard-button-secondary {
  border: 1px solid #bfc4ce;
  background: #ffffff;
  color: #001c3b;
}

.wizard-button-primary,
.wizard-button-secondary.is-primary-submit {
  border: 1px solid #001c3b;
  background: #022448;
  color: #ffffff;
}

.wizard-button:disabled,
.wizard-button.is-disabled {
  border-color: #d8dbe2;
  background: #ffffff;
  color: #a2a7b0;
  cursor: not-allowed;
}

.wizard-button .material-symbols-outlined {
  font-size: 1.1rem;
}

.app-main {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  width: min(100%, var(--content-max-width));
  margin: 0 auto;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 var(--content-gutter);
  border-bottom: 1px solid var(--border);
  background: rgba(249, 249, 255, 0.86);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar > * {
  min-width: 0;
}

.topbar-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 2.3vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
}

.topbar-meta,
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.crumbs .material-symbols-outlined {
  font-size: 1rem;
}

.system-chip,
.status-chip,
.mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(19, 83, 216, 0.1);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.user-badge {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(19, 83, 216, 0.12);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.page {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 18px var(--content-gutter) 24px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.metric-card,
.panel,
.table-shell,
.chart-panel,
.log-panel,
.config-card,
.config-log,
.notice-panel,
.manual-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.metric-card {
  padding: 18px 20px;
}

.metric-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.metric-card-link:hover {
  transform: translateY(-2px);
  border-color: rgba(19, 83, 216, 0.24);
  box-shadow: 0 18px 32px rgba(17, 43, 99, 0.12);
}

.metric-card-link.active {
  background: linear-gradient(180deg, rgba(19, 83, 216, 0.08), rgba(255, 255, 255, 0.98));
  border-color: rgba(19, 83, 216, 0.34);
  box-shadow: 0 20px 36px rgba(19, 83, 216, 0.16);
}

.eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.metric-value {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.metric-value strong {
  font-family: 'Inter', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.metric-note {
  font-size: 0.86rem;
  font-weight: 700;
}

.metric-note.danger {
  color: var(--danger-text);
}

.metric-note.success {
  color: var(--success-text);
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.section-copy {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.96rem;
}

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

.btn,
.btn-secondary,
.btn-ghost,
.btn-danger {
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}

.btn {
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: 0 12px 24px rgba(19, 83, 216, 0.2);
}

.btn:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-danger:hover {
  transform: translateY(-1px);
}

.btn:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: #edf3ff;
  color: var(--text-muted);
}

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid rgba(88, 124, 179, 0.24);
}

.btn-danger {
  background: transparent;
  color: var(--danger-text);
}

.btn-icon-only {
  width: 42px;
  min-width: 42px;
  padding: 0;
  flex: 0 0 auto;
}

.btn-icon-only .material-symbols-outlined {
  font-size: 1.1rem;
}



.table-shell {
  background: #f0f4ff;
  padding: 10px;
  overflow: hidden;
}

.dense-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.dense-table th {
  padding: 0 14px 10px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.dense-table td {
  padding: 14px 14px;
  background: var(--surface-card);
  font-size: 0.95rem;
  color: var(--text);
}

.dense-table tbody tr td:first-child {
  border-radius: 14px 0 0 14px;
}

.dense-table tbody tr td:last-child {
  border-radius: 0 14px 14px 0;
}

.dense-table tbody tr:hover td {
  background: #eaf1ff;
}

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

.avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dbe5ff;
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 800;
}

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

.tiny {
  font-size: 0.8rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge.success {
  background: var(--success-bg);
  color: var(--success-text);
}

.badge.warning {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.badge.danger {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.badge.info {
  background: var(--info-bg);
  color: var(--info-text);
}

.rh-page {
  width: min(100%, var(--content-max-width));
  margin: 0 auto;
  padding: 26px var(--content-gutter) 18px;
}

.rh-page-head,
.rh-data-head,
.rh-head-actions,
.rh-row-actions,
.rh-modal-head,
.rh-modal-actions {
  display: flex;
  align-items: center;
}

.rh-page-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.rh-page-head h1 {
  margin: 4px 0 0;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: 0;
}

.rh-page-subtitle {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
}





.rh-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}





























.rh-data-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-card);
  overflow: hidden;
}

.rh-data-head {
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.rh-data-head h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.rh-data-head span {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 700;
}





































































































































































.rh-form-grid,
.rh-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}









































































































































.btn-ghost.is-disabled,
a.is-disabled {
  pointer-events: none;
  opacity: 0.45;
}

.rh-page-head {
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}

.rh-page-head h1 {
  margin-top: 6px;
  font-size: 1.9rem;
}







.rh-summary-grid {
  grid-template-columns: repeat(3, minmax(190px, 1fr));
}

























.rh-data-head {
  padding: 14px 18px;
  background: var(--surface-card);
}



































.rh-form-grid,
.rh-detail-grid {
  padding: 0;
}



















































#rhCentralDocumentUploadDrop {
  min-height: 126px;
  margin-top: 10px;
}

#rhCentralDocumentUploadDrop .material-symbols-outlined {
  font-size: 1.6rem;
}



























































/* ============================================================
   RH page polish — Portal X design alignment
============================================================ */
.rh-page .rh-page-head {
  align-items: flex-start;
  gap: 24px;
}

.rh-page .rh-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--text-soft);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}

.rh-page-description {
  margin: 8px 0 0;
  max-width: 56ch;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
}

.rh-page .rh-summary-grid {
  gap: 14px;
}

.rh-page .rh-metric-card {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 18px 22px;
  border-radius: 12px;
}

.rh-page .rh-metric-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

.rh-page .rh-metric-card.is-warning::before {
  background: var(--warning-text);
}

.rh-page .rh-metric-card .rh-metric-label {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.rh-page .rh-metric-card .rh-metric-value-row strong {
  font-size: 1.85rem;
  letter-spacing: -0.02em;
}

.rh-page .rh-filters-panel {
  padding: 14px 16px;
  border-radius: 12px;
}

.rh-page .rh-data-card {
  border-radius: 12px;
}

.rh-page .rh-data-head {
  padding: 16px 20px;
}

.rh-page .rh-data-head h2 {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.rh-page .rh-table th {
  padding-top: 14px;
  padding-bottom: 14px;
  background: var(--surface-low);
}

.rh-page .rh-table tbody tr {
  transition: background-color 140ms ease;
}

.rh-page .rh-table tbody tr:hover td {
  background: rgba(14, 31, 77, 0.04);
}

.rh-page .rh-row-alert td {
  background: rgba(200, 57, 47, 0.05);
}

.rh-page .rh-table tbody tr:hover.rh-row-alert td {
  background: rgba(200, 57, 47, 0.08);
}

.rh-page .rh-code {
  min-height: 24px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}






.rh-page .rh-employee-cell.has-avatar {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.rh-page .rh-employee-cell.has-avatar > .rh-employee-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.rh-page .rh-employee-cell.has-avatar strong {
  max-width: 220px;
  font-weight: 600;
  font-size: 0.92rem;
}

.rh-page .rh-employee-cell.has-avatar span {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.rh-page .rh-mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.rh-page .rh-experience-cell .badge {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.rh-page .rh-row-actions .btn-icon-only {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 8px;
  color: var(--text-muted);
  background: transparent;
  border-color: transparent;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.rh-page .rh-row-actions .btn-icon-only:hover {
  border-color: var(--border);
  background: var(--surface-card);
  color: var(--primary);
}

.rh-page .rh-row-actions .btn-icon-only.btn-danger {
  color: var(--danger-text);
}

.rh-page .rh-row-actions .btn-icon-only.btn-danger:hover {
  background: var(--danger-bg);
  border-color: rgba(191, 57, 70, 0.22);
  color: var(--danger-text);
}

.rh-page .rh-row-actions .material-symbols-outlined {
  font-size: 1.1rem;
}

.rh-page .rh-data-card .rh-pagination {
  padding: 14px 20px;
}

@media (max-width: 1200px) {
  .rh-page .rh-filters-form {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, 1fr)) 94px;
  }
}

@media (max-width: 760px) {
  .rh-page .rh-summary-grid {
    grid-template-columns: 1fr;
  }
  .rh-page .rh-filters-form {
    grid-template-columns: 1fr;
  }
  .rh-page .rh-employee-cell.has-avatar strong,
  .rh-page .rh-employee-cell.has-avatar span {
    max-width: 160px;
  }
}

/* ============================================================
   RH Kanban (Processo de Admissao)
============================================================ */



























































button.rh-kcard__chip {
  cursor: pointer;
  font-family: inherit;
}




















/* ============================================================
   RH Day Timeline (Ponto detalhes)
============================================================ */


































































































































































































#contratosAgendaList div {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

#documentosAgendaList div {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}







































































































































@media (max-width: 1180px) {
  .rh-summary-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .rh-dossie-summary {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .rh-filters-form,
  .rh-dossie-filters,
  .rh-dossie-central-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .documentos-summary-grid,
  .documentos-company-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

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

  .documentos-company-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .documentos-company-actions {
    justify-self: stretch;
  }

  .documentos-doc-item {
    grid-template-columns: 1fr;
  }

  .documentos-summary-doc-row {
    grid-template-columns: 1fr minmax(120px, auto);
  }

  .documentos-company-insights {
    grid-template-columns: 1fr;
  }

  .documentos-doc-status {
    justify-items: stretch;
  }

  .documentos-doc-actions {
    justify-content: flex-start;
  }

  .documentos-modal-dialog {
    width: min(100%, 760px);
  }

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

  .documentos-field-observacao {
    grid-column: 1 / -1;
  }

  .rh-dossie-category-tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .rh-dossie-category-tab {
    min-width: 160px;
  }

  .rh-dossie-doc-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .rh-dossie-doc-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .rh-page-head,
  .rh-data-head {
    align-items: stretch;
    flex-direction: column;
  }

  .rh-head-actions,
  .rh-head-actions .btn,
  .rh-head-actions .btn-secondary {
    width: 100%;
  }

  .rh-summary-grid,
  .rh-filters-form,
  .rh-dossie-central-filters,
  .documentos-summary-grid,
  .documentos-company-grid,
  .documentos-company-filters,
  .documentos-document-filter-form,
  .rh-form-grid,
  .rh-form-inactive,
  .rh-detail-grid {
    grid-template-columns: 1fr;
  }

  .rh-pagination {
    justify-content: space-between;
    padding: 12px;
  }

  .rh-dossie-inner-filters {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .rh-dossie-doc-main {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .rh-field-wide {
    grid-column: auto;
  }

  .documentos-modal-grid {
    grid-template-columns: 1fr;
  }

  .documentos-field-document,
  .documentos-field-observacao {
    grid-column: auto;
  }

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

  .documentos-company-head {
    padding-right: 0;
  }

  .documentos-doc-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .documentos-summary-doc-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .documentos-summary-doc-actions {
    justify-content: flex-start;
  }

  .documentos-pie-body {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .documentos-primary-doc-action {
    width: 100%;
  }

  .documentos-doc-menu-list {
    right: 0;
  }
}

.boleto-fornecedor {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.boleto-fornecedor-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

















.boleto-fornecedor-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

















.icon-action {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--primary);
  border: 0;
}

.icon-action:hover {
  background: rgba(19, 83, 216, 0.1);
}

.chart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.9fr);
  gap: 18px;
  margin-top: 14px;
  align-items: start;
}

.chart-layout.single-panel {
  grid-template-columns: 1fr;
}

.chart-panel,
.log-panel {
  padding: 18px 20px;
}

.bars {
  height: 170px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

.bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.bar-track {
  width: 100%;
  min-height: 46px;
  height: 100%;
  max-height: 160px;
  border-radius: 14px 14px 4px 4px;
  background: linear-gradient(180deg, #d7e4ff 0%, #d0deff 40%, #eef3ff 100%);
  position: relative;
  overflow: hidden;
}

.bar-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #2b63d9 0%, #1c54cf 100%);
}

.bar-day {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-soft);
  text-transform: uppercase;
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.log-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: start;
}

.log-time {
  color: #5c7fd3;
  font-family: 'Inter', sans-serif;
  font-size: 0.73rem;
  font-weight: 700;
}

.log-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.filters-panel {
  padding: 16px;
  margin-bottom: 16px;
}

.filters-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 12px;
  align-items: end;
}

.filters-form .field {
  flex: 1 1 180px;
  min-width: 0;
}

.filters-form .field-search {
  flex: 1.15 1 250px;
}

.field-status {
  flex: 1 1 160px;
  min-width: 0;
}

.field-period {
  min-width: 0;
}

.field-amount {
  flex: 1 1 170px;
  min-width: 0;
}

.field-capture {
  flex: 2.25 1 390px;
}

.date-range-field {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) auto minmax(145px, 1fr);
  align-items: center;
  gap: 8px;
}

.date-range-separator {
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.filters-actions {
  flex: 0 1 174px;
  display: grid;
  grid-template-columns: 42px 42px 74px;
  gap: 8px;
  justify-content: stretch;
  flex-wrap: nowrap;
}

.filters-command {
  min-height: 42px;
  width: 100%;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}

.filters-icon-command {
  width: 42px;
  min-width: 42px;
  padding: 0;
}

.filters-icon-command .material-symbols-outlined {
  font-size: 1.15rem;
}

.advanced-filters {
  display: none;
  flex: 1 0 100%;
  grid-template-columns: minmax(320px, 1.2fr) minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 14px;
  align-items: end;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.advanced-filters.is-open {
  display: grid;
}

.field label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid transparent;
  outline: 0;
  border-radius: 10px;
  background: #eff3ff;
  color: var(--text);
  padding: 12px 14px;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(19, 83, 216, 0.24);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(19, 83, 216, 0.08);
}

.summary-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: rgba(243, 246, 255, 0.8);
}

.summary-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 600;
}

.pagination {
  display: flex;
  gap: 6px;
}

.page-pill {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.page-pill-icon .material-symbols-outlined {
  font-size: 20px;
}

.page-pill.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

.footer-note {
  padding: 24px 0 12px;
  text-align: center;
  color: #b2bfd7;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================
   Portal X — module selection home (navy brand identity)
   ============================================================ */



/* ---------- topbar ---------- */
.px-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 48px 22px;
}

.px-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.px-brand img {
  height: 34px;
  width: auto;
  display: block;
}

.px-user {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.px-user__text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.px-user__text strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--px-ink);
  letter-spacing: -0.005em;
}
.px-user__text span {
  font-size: 11.5px;
  color: var(--px-ink-3);
  font-weight: 500;
}

.px-user__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--px-navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--px-navy-t1);
}

.px-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--px-line-2);
  border-radius: 8px;
  background: var(--px-surface);
  color: var(--px-ink-2);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 160ms, color 160ms, background 160ms;
}
.px-iconbtn:hover {
  border-color: var(--px-navy);
  color: var(--px-navy);
  background: var(--px-navy-t1);
}
.px-iconbtn.is-active {
  border-color: var(--px-navy);
  background: var(--px-navy);
  color: #fff;
}

.px-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--px-line-2);
  border-radius: 8px;
  background: var(--px-surface);
  color: var(--px-ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 160ms, color 160ms, background 160ms;
}
.px-logout:hover {
  border-color: var(--px-navy);
  color: var(--px-navy);
  background: var(--px-navy-t1);
}

/* ---------- main ---------- */


/* ---------- hero ---------- */




/* ---------- grid ---------- */


/* ---------- card ---------- */
@keyframes pxFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}




/* corner brackets on hover */






/* icon */





/* body */





/* "Acessar" inline link */









/* ---------- footer ---------- */


/* ---------- responsive ---------- */

@media (max-width: 700px) {
  .px-topbar,
  .px-main,
  .px-footer { padding-left: 22px; padding-right: 22px; }
  .px-card { padding: 24px; }
  .px-user__text { display: none; }
  .px-hero { margin-bottom: 24px; }
}

/* ============================================================
   /usuarios — UX redesign (ux-* namespace)
   ============================================================ */

/* breadcrumb */





/* main */


/* page header */




/* primary button */



/* stat cards */





/* alerts */




/* data card */


/* toolbar */














/* results bar */


/* table */








/* user cell */






/* badges */











/* edit button */



/* empty state */




/* pagination */





/* modal */
.has-modal-open { overflow: hidden; }





@keyframes uxModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* wizard header */





/* step indicators */









/* stages */



/* step 1 form */











/* profile preview */





/* info banner */



/* checkbox */



/* step 2 access layout */

















/* module rows */









/* small search inside panel */


/* step 3 review */










/* wizard footer */





/* submit: secondary by default, primary at step 3 */




/* next button */




/* responsive */

@media (max-width: 700px) {
  .ux-toolbar { flex-direction: column; align-items: stretch; }
  .ux-search-field { min-width: unset; }
  .ux-modal { padding: 0; align-items: flex-end; }
  .ux-modal__dialog { width: 100%; max-height: 95vh; border-radius: 16px 16px 0 0; }
  .ux-page-head { flex-direction: column; gap: 12px; }
  .ux-stats { flex-direction: column; }
  .px-user__text { display: none; }
}


















































































@keyframes auth-form-entry {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

.blocked-panel {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
}

.blocked-panel > .material-symbols-outlined {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--danger-bg);
  color: var(--danger-text);
  flex: 0 0 auto;
}

.blocked-panel h2 {
  margin: 0 0 8px;
  font-family: 'Inter', sans-serif;
}

.blocked-panel p {
  margin: 0 0 18px;
  color: var(--text-muted);
}





























































































@keyframes dashboard-reload-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}









































































.viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 6px;
}

.viewer-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.viewer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
}

.viewer-action-link {
  min-height: 36px;
}

.viewer-actions-note {
  font-size: 0.86rem;
}

.viewer-stage {
  flex: 1;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px rgba(88, 124, 179, 0.08);
  padding: 28px;
}

.viewer-stage iframe {
  width: 100%;
  height: 100%;
  min-height: clamp(420px, 60vh, 640px);
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-panel);
}

.viewer-fallback {
  width: 100%;
  height: 100%;
  min-height: clamp(420px, 60vh, 640px);
  background: #fff;
  border-radius: 14px;
  padding: 34px;
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  gap: 24px;
}





































.document-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.document-highlight {
  border: 2px dashed rgba(19, 83, 216, 0.28);
  background: rgba(19, 83, 216, 0.05);
  border-radius: 14px;
  padding: 18px 16px;
}









.inline-check {
  position: relative;
}

.inline-check .material-symbols-outlined {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 1rem;
}

.context-panel {
  padding: 16px;
  border-radius: 14px;
  background: #eef3ff;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}







































.manual-form.is-loading .btn,
.manual-form.is-loading .btn-danger,
.inline-form-reset.is-loading .btn-danger-compact {
  pointer-events: none;
}

.config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
}

.config-card {
  padding: 24px;
}

.config-card h3,
.config-log h3 {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.config-subtitle {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.config-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.icon-panel {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.icon-panel.primary {
  background: #dce7ff;
  color: var(--primary);
}

.icon-panel.tertiary {
  background: #ede6ff;
  color: #6554aa;
}

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

.config-actions {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.reset-action-list {
  margin-top: 18px;
}

.reset-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(100, 132, 186, 0.18);
  border-radius: 8px;
  background: #f8fbff;
}

.reset-action-row-secondary {
  margin-top: 12px;
  background: #ffffff;
}

.reset-action-row strong,
.reset-action-row span {
  display: block;
}

.reset-action-row strong {
  color: var(--text);
  font-size: 0.95rem;
}

.reset-action-row span:not(.material-symbols-outlined) {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.reset-action-row .btn-danger,
.reset-action-row .btn-ghost {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.config-confirm-modal .modal-card {
  border-radius: 8px;
}

.config-confirm-modal .modal-head h2 {
  font-size: 1.45rem;
  letter-spacing: 0;
}

.config-confirm-modal .notice-panel {
  border-radius: 8px;
}

.icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.schedule-box,
.notice-panel {
  padding: 18px;
  border-radius: 16px;
  background: #eef3ff;
}

.schedule-box strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: var(--primary);
}

.range-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.range-row input[type='range'] {
  flex: 1;
  accent-color: var(--primary);
}

.range-pill {
  min-width: 44px;
  text-align: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: #edf2ff;
  color: var(--text);
  font-weight: 700;
}

.config-log {
  margin-top: 18px;
  overflow: hidden;
  background: #131d30;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 48px rgba(12, 18, 31, 0.2);
}

.config-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 16px;
  background: #202c41;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.config-log-body {
  padding: 18px 20px;
  font-family: Consolas, 'Courier New', monospace;
  min-height: 260px;
  max-height: 280px;
  overflow: auto;
}

.config-log-line {
  margin: 0 0 10px;
  color: #96a7c3;
  font-size: 0.92rem;
  line-height: 1.45;
}

.config-log-time {
  color: #00c18d;
}

.config-log-level {
  color: #57a0ff;
}

.config-log-level.success {
  color: #43d17d;
}

.config-log-level.warn {
  color: #ffbf43;
}

.alert {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.alert.success {
  background: var(--success-bg);
  color: var(--success-text);
}

.alert.danger {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.alert.warning {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.alert.is-dismissing {
  opacity: 0;
  transform: translateY(-6px);
}

.comparison-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.comparison-stack strong {
  display: block;
}

.comparison-stack .meta-line {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.comparison-score {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.comparison-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-inline {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.84rem;
}

.modal-open {
  overflow: hidden;
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-shell-nested {
  z-index: 130;
}

.modal-shell[hidden] {
  display: none !important;
}

.modal-card [hidden] {
  display: none !important;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 28, 61, 0.48);
  backdrop-filter: blur(6px);
}

.modal-card {
  position: relative;
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 28px 64px rgba(9, 25, 55, 0.22);
}

.modal-card-compact {
  width: min(620px, calc(100vw - 32px));
}

.modal-head,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
}

.modal-head {
  padding: 24px 28px 10px;
}

.modal-head h2 {
  margin: 2px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 2.05rem;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.modal-head p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.whitelist-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.whitelist-context-panel strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
}

.whitelist-options {
  display: grid;
  gap: 12px;
}

.whitelist-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(100, 132, 186, 0.16);
  background: #f8fbff;
  cursor: pointer;
}

.whitelist-option input {
  margin-top: 4px;
}

.whitelist-option strong,
.whitelist-option span {
  display: block;
}

.whitelist-option strong {
  color: var(--text);
  font-size: 0.95rem;
}

.whitelist-option span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.modal-body {
  padding: 12px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-error-alert {
  margin: 0 28px 14px;
  box-shadow: 0 14px 30px rgba(150, 43, 67, 0.12);
}

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

.wizard-step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #adb7cb;
  position: relative;
  min-width: 0;
}

.wizard-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(100% - 6px);
  right: -8px;
  top: 20px;
  height: 1px;
  background: rgba(150, 171, 209, 0.4);
}

.wizard-step-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wizard-step-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wizard-step-index {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 800;
  background: #eef2f8;
  color: inherit;
  border: 0;
  flex: 0 0 36px;
}

.wizard-step strong {
  display: block;
  font-size: 0.92rem;
  line-height: 1.2;
  color: currentColor;
}

.wizard-step.active,
.wizard-step.done {
  color: var(--text);
}

.wizard-step.active .wizard-step-index,
.wizard-step.done .wizard-step-index {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(19, 83, 216, 0.2);
}

.wizard-step.done .wizard-step-index::before {
  content: 'check';
  font-family: 'Material Symbols Outlined';
  font-size: 1rem;
}

.wizard-step.done .wizard-step-index {
  font-size: 0;
}

.wizard-panel {
  padding-bottom: 28px;
}

.wizard-panel[hidden] {
  display: none !important;
}

.wizard-stage {
  border-radius: 24px;
  border: 1px solid rgba(100, 132, 186, 0.12);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 18px 42px rgba(17, 41, 83, 0.08);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wizard-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.wizard-stage-head h3 {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.wizard-stage-head p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.search-input-shell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  border-radius: 14px;
  background: #f2f5fb;
  border: 1px solid transparent;
  padding: 0 16px;
}

.search-input-shell:focus-within {
  border-color: rgba(19, 83, 216, 0.2);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(19, 83, 216, 0.08);
}

.search-input-shell .material-symbols-outlined {
  color: #a0aec8;
}

.search-input-shell input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
}

.search-status {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

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

.selection-grid-planos,
.selection-grid-fornecedores {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.selection-card {
  width: 100%;
  min-height: 90px;
  border: 1px solid rgba(100, 132, 186, 0.16);
  border-radius: 16px;
  background: #ffffff;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(17, 41, 83, 0.04);
}

.selection-card:hover {
  border-color: rgba(19, 83, 216, 0.28);
  transform: translateY(-1px);
}

.selection-card.selected {
  background: linear-gradient(180deg, rgba(19, 83, 216, 0.08), rgba(19, 83, 216, 0.04));
  border-color: rgba(19, 83, 216, 0.5);
  box-shadow: 0 16px 32px rgba(19, 83, 216, 0.12);
}

.selection-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #e9effb;
  color: var(--primary);
  font-size: 0.86rem;
  font-weight: 800;
}

.selection-card-content {
  min-width: 0;
}

.selection-card-kicker {
  margin-bottom: 4px;
  color: #7287aa;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.selection-card-title {
  display: block;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.selection-card-meta {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.selection-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.selection-tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f0f3f9;
  color: #63789c;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.selection-card-check {
  opacity: 0;
  color: var(--primary);
  align-self: center;
}

.selection-card.selected .selection-card-check {
  opacity: 1;
}

.selection-empty {
  grid-column: 1 / -1;
  border: 1px dashed rgba(100, 132, 186, 0.22);
  border-radius: 18px;
  min-height: 120px;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  background: #fafcff;
}

.selection-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.selection-pagination-info {
  min-width: 120px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.wizard-review-header {
  padding: 0 4px;
}

.wizard-review-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.9fr);
  gap: 20px;
  align-items: start;
}

.wizard-review-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.review-card {
  border-radius: 20px;
  border: 1px solid rgba(100, 132, 186, 0.12);
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(17, 41, 83, 0.08);
  padding: 24px;
}

.review-card-main {
  min-height: 280px;
}

.review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.review-beneficiario {
  display: block;
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.review-meta {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

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

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-item span {
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.summary-item strong {
  display: block;
  font-size: 1.02rem;
  line-height: 1.45;
}

.summary-item input,
.summary-item textarea,
.review-card > input,
.review-card > textarea,
.review-total-card > input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
}

.summary-item textarea,
.review-card > textarea {
  resize: vertical;
}

.summary-item-full {
  grid-column: 1 / -1;
}

.review-card-header {
  margin-bottom: 12px;
}

.review-card-header span {
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.review-barcode {
  min-height: 72px;
  border-radius: 14px;
  background: #f4f7fc;
  padding: 16px 18px;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 1rem;
  line-height: 1.6;
  color: #44587f;
  word-break: break-word;
}

.review-total-card {
  min-height: 100%;
  border-radius: 22px;
  background: linear-gradient(180deg, #0f4cc7 0%, #0c3fa9 100%);
  color: #ffffff;
  padding: 28px;
  box-shadow: 0 20px 44px rgba(12, 63, 169, 0.28);
}

.review-total-card strong {
  display: block;
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.review-total-label,
.review-total-card .summary-item span {
  color: rgba(255, 255, 255, 0.72);
}

.review-total-meta {
  display: grid;
  gap: 22px;
  margin-top: 120px;
}

.review-total-card .summary-item strong {
  font-size: 1rem;
  letter-spacing: 0;
}

.modal-actions {
  border-top: 1px solid var(--border);
  padding: 18px 28px 24px;
}

.modal-actions .button-row:last-child {
  justify-content: flex-end;
}

.modal-shell.is-loading .selection-card {
  pointer-events: none;
  opacity: 0.72;
}

.empty-state {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
}













.conf-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px var(--content-gutter) 30px;
}

.conf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.conf-hero,
.conf-highlight-bar,
.conf-toolbar,
.conf-table-shell {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
}

.conf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.7fr);
  gap: 24px;
  padding: 28px;
  background:
    radial-gradient(circle at top right, rgba(26, 67, 191, 0.08), transparent 30%),
    linear-gradient(135deg, rgba(247, 249, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.conf-hero-copy {
  min-width: 0;
}

.conf-hero-title {
  margin: 10px 0 12px;
  max-width: 18ch;
  color: #0f172a;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1.02;
  text-wrap: balance;
}

.conf-hero-description {
  margin: 0;
  max-width: 58ch;
  color: #475569;
  font-size: 0.96rem;
  line-height: 1.7;
}

.conf-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.conf-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
}

.conf-hero-chip .material-symbols-outlined {
  font-size: 1rem;
  color: #64748b;
}

.conf-hero-switch-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  color: #e2e8f0;
  min-height: 100%;
}

.conf-hero-switch-card strong {
  font-size: 1.15rem;
  font-weight: 800;
}

.conf-hero-switch-card p {
  margin: 0;
  color: rgba(226, 232, 240, 0.8);
  font-size: 0.88rem;
  line-height: 1.6;
}

.conf-toggle {
  position: relative;
  width: 56px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #002c98 0%, #1a43bf 100%);
  padding: 3px;
  cursor: default;
}

.conf-toggle span {
  display: block;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
}

.conf-highlight-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 22px 24px;
}

.conf-highlight-main,
.conf-highlight-stats {
  display: flex;
  align-items: center;
}

.conf-highlight-main {
  gap: 16px;
}

.conf-highlight-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
}

.conf-highlight-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.conf-highlight-label,
.conf-highlight-status-label {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.conf-highlight-values {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.conf-highlight-values strong {
  color: #0f172a;
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.conf-highlight-badge,
.conf-highlight-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(13, 148, 136, 0.08);
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 800;
}

.conf-highlight-stats {
  gap: 24px;
  flex-wrap: wrap;
}

.conf-highlight-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.conf-highlight-stat span {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.conf-highlight-stat strong {
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 800;
}

.conf-highlight-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.conf-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.conf-toolbar {
  padding: 22px 24px;
}

.conf-toolbar-head,
.conf-table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.conf-toolbar-head h3,
.conf-table-title {
  margin: 8px 0 4px;
  color: #0f172a;
  font-size: 1.18rem;
  font-weight: 800;
}

.conf-toolbar-head p,
.conf-table-subtitle {
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.6;
}

.conf-toolbar-counter {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 800;
}

.conf-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.15fr) minmax(220px, 0.85fr) minmax(0, 1fr) minmax(180px, 0.45fr) auto;
  gap: 16px;
  align-items: end;
}

.conf-field {
  min-width: 0;
}

.conf-field-search {
  max-width: 360px;
}

.conf-field-email {
  max-width: 280px;
}

.conf-field label {
  display: block;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.conf-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #dbe3f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
  padding: 0 16px;
  box-shadow: none;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.conf-input:focus {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
  background: #ffffff;
}

.conf-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  justify-self: end;
}

.conf-btn-ghost,
.conf-btn-primary {
  min-width: 46px;
  min-height: 46px;
  border-radius: 14px;
}

.conf-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  padding: 0;
}

.conf-btn-icon .material-symbols-outlined {
  font-size: 1.1rem;
}

.conf-btn-ghost {
  color: #475569;
  border-color: #dbe3f0;
  background: #ffffff;
}

.conf-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.conf-btn-primary.conf-btn-icon-only {
  width: 46px;
  min-width: 46px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.conf-btn-primary.conf-btn-icon-only .material-symbols-outlined {
  font-size: 1.1rem;
}

.conf-summary-card {
  position: relative;
  display: flex;
  min-height: 136px;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.conf-summary-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 20px 0 0 20px;
  background: currentColor;
}

.conf-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
}

.conf-summary-card.is-active {
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.12);
}

.conf-summary-card.tone-blue {
  color: #1a43bf;
}

.conf-summary-card.tone-slate {
  color: #475569;
}

.conf-summary-card.tone-green {
  color: #0f766e;
}

.conf-summary-card.tone-red {
  color: #b91c1c;
}

.conf-summary-head,
.conf-summary-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.conf-summary-label {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.conf-summary-value {
  display: block;
  font-family: 'Inter', sans-serif;
  color: #0f172a;
  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}

.conf-summary-note {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
}

.conf-summary-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
  font-size: 0.7rem;
  font-weight: 800;
}

.conf-summary-helper {
  margin: -2px 0 0;
  color: #64748b;
  font-size: 0.7rem;
  font-style: italic;
}

.conf-progress-track {
  height: 6px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.conf-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
}

.conf-table-shell {
  overflow: hidden;
  padding: 0;
  border-radius: 22px;
}

.conf-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}

.conf-table-shell-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.conf-table-shell-eyebrow {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.conf-table-shell-note {
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 600;
}

.conf-table-shell-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.conf-shell-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #dbe3f0;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
}

.conf-shell-action .material-symbols-outlined {
  font-size: 1rem;
}

.conf-table-scroll {
  overflow-x: auto;
  width: 100%;
}

.conf-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.conf-table thead th {
  padding: 14px 22px;
  border-bottom: 1px solid #edf2f7;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}

.conf-table tbody td {
  padding: 16px 22px;
  border-bottom: 1px solid #e8f0ef;
  vertical-align: top;
  color: #334155;
  font-size: 0.9rem;
}

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

.conf-row td {
  background: #f9fbfc;
}

.conf-row.tone-success td {
  background: #effcfb;
}

.conf-row.tone-success td:first-child {
  box-shadow: inset 4px 0 0 #14b8a6;
}

.conf-row.tone-danger td {
  background: #fff5f5;
}

.conf-row.tone-danger td:first-child {
  box-shadow: inset 4px 0 0 #ef4444;
}

.conf-row.tone-warning td {
  background: #fff9eb;
}

.conf-row.tone-warning td:first-child {
  box-shadow: inset 4px 0 0 #f59e0b;
}

.conf-row.tone-info td {
  background: #f5f8fb;
}

.conf-row.tone-info td:first-child {
  box-shadow: inset 4px 0 0 #94a3b8;
}

.conf-origin-cell {
  width: 42%;
}

.conf-origin-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.conf-origin-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.conf-origin-title {
  margin: 0;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.conf-origin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 600;
}

.conf-origin-doc {
  color: #64748b;
  font-size: 0.74rem;
  line-height: 1.5;
}

.conf-origin-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.conf-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.conf-status-pill.tone-success {
  background: #bff3eb;
  color: #0f766e;
}

.conf-status-pill.tone-danger {
  background: #fee2e2;
  color: #b91c1c;
}

.conf-status-pill.tone-info {
  background: #e2e8f0;
  color: #475569;
}

.conf-status-pill.tone-warning {
  background: #fef3c7;
  color: #b45309;
}

.conf-status-pill-large {
  min-width: 110px;
  min-height: 28px;
  padding: 0 14px;
  font-size: 0.68rem;
}

.conf-match-pill {
  display: inline-flex;
  align-items: center;
  color: #0f8b83;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 700;
}

.conf-compare-cell {
  width: 20%;
}

.conf-compare-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
}

.conf-compare-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.conf-compare-label {
  min-width: 58px;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 600;
}

.conf-compare-line strong {
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 800;
}

.conf-status-cell {
  width: 12%;
  padding-top: 34px;
  text-align: center;
}

.conf-match {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conf-match strong {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 800;
}

.conf-match span {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.6;
}

.conf-table-actions-head,
.conf-actions-cell {
  width: 8%;
  text-align: center;
}

.conf-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 28px;
}

.conf-icon-action {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #0f766e;
}

.conf-icon-action .material-symbols-outlined {
  font-size: 1.05rem;
}

.conf-action-hint {
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 700;
}

.conf-btn-inline {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
  box-shadow: none;
  flex: 0 0 34px;
}

.conf-btn-inline .material-symbols-outlined {
  font-size: 1rem;
}

.conf-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.conf-table-page-label {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.conf-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.conf-pagination-button {
  min-width: 30px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #dbe3f0;
  border-radius: 6px;
  background: #ffffff;
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 800;
}

.conf-pagination-button.is-active {
  background: #1e40af;
  border-color: #1e40af;
  color: #ffffff;
}

.conf-pagination-button:disabled {
  color: #cbd5e1;
}































































body.conference-is-loading {
  cursor: progress;
}

@keyframes conference-loading-spin {
  to {
    transform: rotate(360deg);
  }
}





















































/* v2 — UI refinada do modal de configuracao de recorrentes */










.onboarding-help-button-inline {
  position: static;
  width: 40px;
  height: 40px;
  box-shadow: none;
  border-color: var(--border);
  background: var(--surface-card);
}

.onboarding-help-button-inline:hover,
.onboarding-help-button-inline:focus-visible {
  transform: none;
  background: var(--surface-low);
  box-shadow: 0 6px 14px rgba(17, 41, 83, 0.1);
}

.onboarding-help-button-inline .material-symbols-outlined {
  font-size: 22px;
}



































































































































































.config-access-page {
  min-height: calc(100vh - 74px);
  display: grid;
  place-items: center;
  padding: 28px 20px;
}

.config-access-card {
  width: min(520px, 100%);
  padding: 30px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(19, 83, 216, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.96) 100%);
  border: 1px solid rgba(100, 132, 186, 0.18);
  box-shadow: 0 24px 56px rgba(17, 41, 83, 0.12);
}

.config-access-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.config-access-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(19, 83, 216, 0.14) 0%, rgba(11, 72, 191, 0.2) 100%);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(19, 83, 216, 0.12);
}

.config-access-icon .material-symbols-outlined {
  font-size: 1.8rem;
}

.config-access-message {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 600;
}

.config-access-message.is-info {
  background: #e8f0ff;
  color: #2c62cf;
}

.config-access-message.is-danger {
  background: #ffe4e6;
  color: #be123c;
}

.config-access-form {
  margin-top: 24px;
  display: grid;
  gap: 18px;
}

.config-access-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.config-access-setup {
  margin-top: 24px;
}

































.capture-progress-track {
  height: 14px;
  border-radius: 999px;
  background: #e7eefc;
  overflow: hidden;
}

.capture-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1353d8 0%, #4f8dff 100%);
  transition: width 220ms ease;
}















































.table-shell-flush {
  padding: 0;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-gutter: stable both-edges;
}

.dense-table-flat {
  border-spacing: 0;
}

.dense-table-cell-start {
  padding-left: 24px !important;
}

.dense-table-cell-end {
  padding-right: 24px !important;
}

.dense-table-align-right {
  text-align: right !important;
}

.dense-table-align-center {
  text-align: center !important;
}

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

.table-link {
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
}

.inline-form-reset {
  margin: 0;
}

.table-row-action-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 10px;
  box-shadow: none;
}

.table-row-action-button .material-symbols-outlined {
  font-size: 1rem;
}

.btn-danger-compact {
  min-height: 34px;
  padding: 0 12px;
}

.eyebrow-tight {
  margin-bottom: 0;
}

.metric-block-spaced {
  margin-bottom: 16px;
}

.alert-spaced {
  margin-bottom: 16px;
}

.topbar-highlight {
  color: var(--primary);
}

.dot-success {
  color: #1db954;
}



























.config-section-gap {
  margin-bottom: 22px;
}

.config-card-badge {
  float: right;
  margin-top: -28px;
}

.config-copy-spaced {
  margin-top: 10px;
}

.config-panel-gap {
  margin-top: 28px;
}

.config-panel-gap-sm {
  margin-top: 20px;
}

.config-stack {
  display: grid;
  gap: 12px;
}

.config-log-toolbar,
.config-log-toolbar-right,
.config-log-dots,
.config-inline-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.config-log-dots {
  gap: 6px;
}

.config-inline-row {
  gap: 10px;
}

.config-log-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.config-log-dot.is-red {
  background: rgba(255, 105, 97, 0.55);
}

.config-log-dot.is-yellow {
  background: rgba(255, 189, 46, 0.55);
}

.config-log-dot.is-green {
  background: rgba(39, 201, 63, 0.55);
}

.config-log-kicker {
  margin: 0;
  color: #8ea2c8;
}

.config-log-live {
  margin: 0;
  color: #00c18d;
}

.config-log-icon {
  color: #8ea2c8;
}

@media (max-height: 840px) {
  .sidebar-link {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .brand-icon {
    height: 112px;
  }
}

@media (max-width: 1440px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-table-card {
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (max-width: 1320px) {
  .metrics-grid,
  .filters-form,
  .config-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .chart-layout,
  .config-grid,
  .manual-shell,
  .capture-progress-grid {
    grid-template-columns: 1fr;
  }

  .manual-shell {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .manual-viewer {
    min-height: 60vh;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .manual-link-steps {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 1440px) {
  .dashboard-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .chart-layout {
    grid-template-columns: 1fr;
  }

  .capture-hero {
    grid-template-columns: 1fr;
  }

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

  .filters-form .field-search,
  .field-status {
    grid-column: span 3;
  }

  .field-amount {
    grid-column: span 2;
  }

  .field-capture {
    grid-column: span 4;
  }

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

  .filters-actions {
    grid-column: span 6;
    grid-template-columns: 42px 42px 74px;
  }

  .filters-actions {
    justify-content: stretch;
  }

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

  .conf-hero {
    grid-template-columns: 1fr;
  }

  .conf-filters {
    grid-template-columns: minmax(200px, 1fr) minmax(180px, 0.8fr) minmax(0, 0.95fr) minmax(170px, 0.45fr) auto;
  }

  .conf-actions {
    grid-column: auto;
  }

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

  .recurring-field-month,
  .recurring-field-year {
    max-width: none;
  }

  .recurring-analysis-head h2 {
    max-width: 100%;
  }

  .recurring-actions {
    grid-column: 1 / -1;
    min-width: 0;
  }

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

@media (max-width: 900px) {
  .module-topbar {
    padding: 0 18px;
  }

  .module-user-name {
    display: none;
  }

  .module-selection-shell {
    justify-content: flex-start;
    padding: 40px 18px 48px;
  }

  .module-card-grid {
    grid-template-columns: 1fr;
  }

  .module-card {
    min-height: 260px;
  }

  .users-page-header,
  .users-editor-actions,
  .user-wizard-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .users-data-summary,
  .users-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .users-toolbar {
    grid-template-columns: 1fr;
  }

  .users-editor-grid,
  .users-modules-head,
  .users-module-row,
  .user-access-layout,
  .user-wizard-steps,
  .user-wizard-review,
  .user-wizard-review-grid {
    grid-template-columns: 1fr;
  }

  .user-access-sidebar {
    position: static;
  }

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

  .user-wizard-step:not(:last-child)::after {
    display: none;
  }

  .users-new-button {
    width: 100%;
    justify-content: center;
  }

  .app-shell {
    flex-direction: column;
  }

  .app-sidebar {
    position: static;
    width: 100%;
    height: auto;
  }

  .app-main {
    width: 100%;
  }

  .topbar {
    padding: 18px 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .page {
    padding: 14px 12px 22px;
  }

  .dashboard-page {
    padding: 18px 14px 22px;
  }

  .dashboard-capture-alert,
  .capture-hero,
  .capture-progress-shell {
    padding: 18px;
  }

  .metrics-grid,
  .dashboard-summary-grid,
  .filters-form,
  .advanced-filters,
  .config-form-grid,
  .wizard-steps,
  .manual-grid-2 {
    grid-template-columns: 1fr;
  }

  .field-period,
  .field-search {
    grid-column: auto;
  }

  .field-status,
  .field-amount,
  .field-capture,
  .filters-actions {
    grid-column: auto;
  }

  .filters-actions {
    grid-template-columns: 42px 42px 74px;
  }

  .date-range-field {
    grid-template-columns: 1fr;
  }

  .date-range-separator {
    display: none;
  }

  .dashboard-period-filter {
    width: 100%;
    border-radius: 20px;
  }

  .dashboard-period-separator {
    display: none;
  }

  .dashboard-period-input,
  .dashboard-period-button {
    width: 100%;
  }

  .filters-actions {
    justify-content: flex-start;
  }

  .conf-page {
    padding: 14px 12px 22px;
  }

  .conf-hero,
  .conf-highlight-bar,
  .conf-toolbar,
  .conf-table-head {
    padding-left: 16px;
    padding-right: 16px;
  }

  .conf-hero,
  .conf-origin-sources {
    grid-template-columns: 1fr;
  }

  .conf-highlight-bar,
  .conf-highlight-main,
  .conf-highlight-stats,
  .conf-highlight-status,
  .conf-toolbar-head {
    align-items: flex-start;
  }

  .conf-highlight-status {
    width: 100%;
  }

  .conf-table-head,
  .conf-table-shell-copy,
  .conf-table-shell-actions,
  .conf-table-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .conf-summary-grid,
  .conf-filters {
    grid-template-columns: 1fr;
  }

  .recurring-grid,
  .recurring-filters {
    grid-template-columns: 1fr;
  }

  .conf-actions.recurring-actions {
    flex-direction: row;
    justify-content: flex-start;
  }

  .recurring-analysis-head {
    padding: 16px 14px 0;
  }

  .recurring-analysis-head h2 {
    font-size: 1.02rem;
    text-wrap: pretty;
  }

  .conf-actions {
    flex-direction: column;
  }

  .conf-field-email {
    max-width: none;
  }

  .conf-field-search {
    max-width: none;
  }

  .recurring-type-grid {
    grid-template-columns: 1fr;
  }

  .config-access-hero {
    grid-template-columns: 1fr;
  }

  .config-access-card {
    padding: 24px 20px;
  }

  .config-access-actions {
    flex-direction: column-reverse;
  }

  .config-access-actions .btn,
  .config-access-actions .btn-ghost {
    width: 100%;
  }

  .conf-btn-ghost,
  .conf-btn-primary {
    width: 100%;
  }

  .recurring-actions .conf-btn-ghost,
  .recurring-actions .conf-btn-primary,
  .recurring-actions .recurring-settings-trigger {
    width: 46px;
  }

  .recurring-settings-trigger {
    width: 100%;
  }

  .recurring-search-shell {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .recurring-search-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .manual-link-upload {
    padding: 16px;
  }

  .manual-link-upload-head,
  .manual-upload-form {
    align-items: stretch;
    flex-direction: column;
  }

  .manual-link-upload-badge,
  .manual-charge-link,
  .manual-upload-control,
  .manual-upload-form .btn {
    width: 100%;
  }

  .sidebar-nav {
    gap: 0;
  }

  .sidebar-link {
    padding: 12px 18px;
  }

  .summary-footer,
  .summary-right,
  .document-grid,
  .manual-whitelist-head,
  .manual-header-row,
  .config-log-toolbar,
  .config-log-toolbar-right,
  .config-inline-row {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
  }

  .manual-document-right,
  .manual-header-meta {
    text-align: left;
  }

  .manual-inline-action {
    width: 100%;
    min-width: 0;
  }

  .dense-table {
    min-width: 760px;
  }

  .dense-table .boleto-risk-column {
    display: none;
  }

  .dashboard-table-card {
    padding: 22px 18px 18px;
    border-radius: 26px;
  }

  .dashboard-table-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .dashboard-table-filter {
    justify-content: flex-start;
  }

  .dashboard-period-filter {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    border-radius: 20px;
  }

  .dashboard-period-input {
    flex: 1 1 180px;
    min-width: 0;
  }

  .dashboard-mini-filter {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    border-radius: 20px;
  }

  .dashboard-mini-filter select {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .dashboard-mini-filter-button {
    width: 100%;
  }

  .dashboard-period-button {
    width: 100%;
  }

  .dashboard-sync-status-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-capture-alert,
  .capture-progress-head,
  .capture-progress-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .capture-log-item {
    grid-template-columns: 1fr;
  }

  .capture-log-list {
    max-height: 320px;
  }

  .dashboard-table-actions {
    width: 100%;
  }

  .dashboard-table {
    min-width: 760px;
  }

  .wizard-step:not(:last-child)::after {
    display: none;
  }

  .selection-grid,
  .review-grid,
  .wizard-review-shell {
    grid-template-columns: 1fr;
  }

  .selection-pagination {
    justify-content: space-between;
  }

  .recurring-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .recurring-pagination .btn-ghost {
    width: 100%;
  }

  .recurring-pagination .selection-pagination-info {
    min-width: 0;
  }

  .recurring-analysis-table {
    min-width: 0;
  }

  .recurring-analysis-table thead {
    display: none;
  }

  .recurring-analysis-table,
  .recurring-analysis-table tbody,
  .recurring-analysis-table tr,
  .recurring-analysis-table td {
    display: block;
    width: 100%;
  }

  .recurring-analysis-table tbody {
    padding: 12px;
  }

  .recurring-analysis-table tbody tr {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  }

  .recurring-analysis-table tbody tr + tr {
    margin-top: 12px;
  }

  .recurring-analysis-table tbody td {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f6;
  }

  .recurring-analysis-table tbody td:last-child {
    border-bottom: 0;
  }

  .recurring-analysis-table tbody td::before {
    content: attr(data-label);
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .recurring-analysis-table .conf-cell-stack {
    min-width: 0;
  }

  .review-total-meta {
    margin-top: 32px;
  }

  .modal-card {
    width: min(100vw - 20px, 1120px);
  }

  .modal-head,
  .modal-body,
  .modal-actions,
  .wizard-steps {
    padding-left: 18px;
    padding-right: 18px;
  }

  .modal-error-alert {
    margin-left: 18px;
    margin-right: 18px;
  }

  .wizard-stage,
  .review-card,
  .review-total-card {
    padding: 20px;
  }
}





















.approvals-btn-icon {
  width: 46px;
  min-width: 46px;
  padding: 0;
}

.approvals-btn-icon .material-symbols-outlined {
  font-size: 1.1rem;
}





























.modal-card-wide {
  width: min(1180px, calc(100vw - 40px));
}

.topbar-subtitle {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.route-relatorios .topbar {
  background: rgba(255, 255, 255, 0.92);
}



























.table-row-action-button .material-symbols-outlined {
  font-size: 1.05rem;
}





























































.field-required {
  color: var(--danger, #dc2626);
  font-weight: 700;
}

/* Titulo compacto nos passos 1/2/3 */
.wizard-stage-title {
  margin: 0 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Paginacao so icone */
.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  min-width: 0;
}

/* Passo 4 - overrides escopados para nao afetar conferencia-xpert */














.field-span-2 {
  grid-column: 1 / -1;
}

/* Boleto Facil design system overrides */
:root {
  --background: #faf9fc;
  --surface: #faf9fc;
  --surface-low: #f4f3f7;
  --surface-high: #e9e7eb;
  --surface-card: #ffffff;
  --sidebar-start: #ffffff;
  --sidebar-end: #f4f3f7;
  --text: #1a1c1e;
  --text-muted: #43474e;
  --text-soft: #74777f;
  --primary: #022448;
  --primary-dark: #1e3a5f;
  --border: #e3e2e6;
  --border-strong: #c4c6cf;
  --shadow-soft: none;
  --shadow-panel: none;
  --radius-lg: 4px;
  --radius-md: 4px;
  --radius-sm: 4px;
  --content-max-width: 1440px;
  --content-gutter: 24px;
}

body {
  background: var(--background);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.app-sidebar {
  width: 224px;
  flex-basis: 224px;
  padding: 16px 0;
  background: linear-gradient(180deg, var(--sidebar-start) 0%, var(--sidebar-end) 100%);
  box-shadow: inset -1px 0 0 var(--border);
}

.sidebar-brand {
  padding: 0 16px 16px;
}

.brand-icon {
  height: 96px;
}

.sidebar-nav {
  gap: 2px;
  padding: 0 8px;
}

.sidebar-footer {
  padding: 12px 8px 0;
}

.sidebar-link {
  min-height: 42px;
  padding: 0 14px;
  border-left: 0;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.sidebar-link:hover {
  background: var(--surface-container, #eeedf1);
  color: var(--text);
}

.sidebar-link.active {
  background: #022448;
  color: #ffffff;
}

.topbar {
  min-height: 64px;
  border-bottom-color: var(--border);
  background: rgba(250, 249, 252, 0.94);
  backdrop-filter: blur(10px);
}

.btn,
.btn-secondary,
.btn-ghost,
.btn-danger {
  min-height: 40px;
  border-radius: 4px;
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 700;
}

.btn {
  border: 1px solid #022448;
  background: #022448;
}

.btn:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-danger:hover {
  transform: none;
}



















































































@media (max-width: 760px) {
  :root {
    --content-gutter: 14px;
  }

  .dashboard-summary-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-period-input,
  .dashboard-period-button {
    width: 100%;
  }

  .dashboard-period-disclosure {
    display: block;
  }

  .dashboard-period-toggle {
    width: 100%;
  }

  .dashboard-period-filter {
    position: static;
    margin-top: 8px;
  }

  .dashboard-period-separator {
    display: none;
  }

  .dashboard-mini-filter,
  .dashboard-table-actions,
  .dashboard-sync-form,
  .dashboard-reload-button,
  .dashboard-capture-button {
    width: 100%;
  }

  .dashboard-mini-filter {
    flex-wrap: wrap;
  }

  .dashboard-mini-filter select,
  .dashboard-mini-filter-button {
    width: 100%;
    max-width: none;
  }
}





/* Global theme from boleto_facil_design.md */
:root {
  --color-surface: #faf9fc;
  --color-surface-dim: #dad9dd;
  --color-surface-bright: #faf9fc;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f4f3f7;
  --color-surface-container: #eeedf1;
  --color-surface-container-high: #e9e7eb;
  --color-surface-container-highest: #e3e2e6;
  --color-on-surface: #1a1c1e;
  --color-on-surface-variant: #43474e;
  --color-inverse-surface: #2f3033;
  --color-inverse-on-surface: #f1f0f4;
  --color-outline: #74777f;
  --color-outline-variant: #c4c6cf;
  --color-surface-tint: #455f87;
  --color-primary: #022448;
  --color-on-primary: #ffffff;
  --color-primary-container: #1e3a5f;
  --color-on-primary-container: #8aa4cf;
  --color-inverse-primary: #adc8f5;
  --color-secondary: #505f76;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #d0e1fb;
  --color-on-secondary-container: #54647a;
  --color-tertiary: #341f00;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #503300;
  --color-on-tertiary-container: #c69b5f;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-background: #faf9fc;
  --color-on-background: #1a1c1e;
  --color-surface-variant: #e3e2e6;

  --background: var(--color-background);
  --surface: var(--color-surface);
  --surface-low: var(--color-surface-container-low);
  --surface-high: var(--color-surface-container-high);
  --surface-strong: var(--color-surface-container-highest);
  --surface-card: var(--color-surface-container-lowest);
  --surface-container: var(--color-surface-container);
  --sidebar-start: var(--color-surface-container-lowest);
  --sidebar-end: var(--color-surface-container-low);
  --text: var(--color-on-surface);
  --text-muted: var(--color-on-surface-variant);
  --text-soft: var(--color-outline);
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-container);
  --secondary: var(--color-secondary);
  --border: var(--color-surface-container-highest);
  --border-strong: var(--color-outline-variant);
  --success-bg: #dff7e5;
  --success-text: #0f7a3f;
  --warning-bg: #ffddb2;
  --warning-text: var(--color-tertiary);
  --danger-bg: var(--color-error-container);
  --danger-text: var(--color-error);
  --info-bg: var(--color-secondary-container);
  --info-text: var(--color-on-secondary-container);
  --shadow-soft: none;
  --shadow-panel: 0 8px 20px rgba(26, 28, 30, 0.08);
  --radius-lg: 0.5rem;
  --radius-md: 0.25rem;
  --radius-sm: 0.125rem;
  --content-max-width: 1440px;
  --content-gutter: 24px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

html {
  background: var(--color-background);
}

body {
  background: var(--color-background);
  color: var(--color-on-surface);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 20px;
}

button,
input,
select,
textarea {
  font-family: 'Inter', sans-serif;
}

.app-shell,
.app-main,
.page,
.dashboard-page,
.users-page-body,
.route-aprovacoes,
.route-conferencia,
.route-conferencia-xpert,
.route-fornecedores-recorrentes {
  background: var(--color-background);
}

.app-sidebar {
  width: 224px;
  flex-basis: 224px;
  padding: var(--space-md) var(--space-sm);
  background: linear-gradient(180deg, var(--color-surface-container-lowest) 0%, var(--color-surface-container-low) 100%);
  box-shadow: inset -1px 0 0 var(--color-surface-container-highest);
}

.sidebar-brand {
  padding: 0 var(--space-sm) var(--space-md);
}

.brand-icon {
  height: 96px;
}

.sidebar-nav {
  gap: 2px;
}

.sidebar-link {
  min-height: 42px;
  padding: 0 14px;
  border-left: 0;
  border-radius: var(--radius-md);
  color: var(--color-on-surface-variant);
  font-size: 0.875rem;
  font-weight: 600;
}

.sidebar-link:hover {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}

.sidebar-link.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.topbar,
.route-aprovacoes .topbar,
.route-relatorios .topbar,
.route-conferencia-xpert .topbar {
  min-height: 64px;
  border-bottom-color: var(--color-surface-container-highest);
  background: rgba(250, 249, 252, 0.94);
  backdrop-filter: blur(10px);
}

.topbar-title {
  color: var(--color-on-surface);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 38px;
}

.section-title {
  color: var(--color-on-surface);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 32px;
}

.section-copy,
.topbar-subtitle,
.topbar-meta,
.crumbs {
  color: var(--color-on-surface-variant);
}

.metric-card,
.panel,
.table-shell,
.chart-panel,
.log-panel,
.config-card,
.config-log,
.notice-panel,
.manual-card,
.filters-panel,
.modal-card,
.module-switch-dialog,
.user-wizard-dialog,
.dashboard-table-card,
.dashboard-metric-card,
.users-data-card,
.user-wizard-review-card,
.manual-viewer,
.viewer-stage,
.viewer-fallback,
.manual-form,
.manual-link-upload,
.manual-link-step,
.context-panel {
  border: 1px solid var(--color-surface-container-highest);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
  box-shadow: none;
}

.metric-card,
.panel,
.chart-panel,
.log-panel,
.config-card,
.config-log,
.notice-panel,
.manual-card,
.filters-panel {
  padding: var(--space-md);
}

.metric-card-link:hover,
.report-nav-card:hover {
  transform: none;
  border-color: var(--color-outline-variant);
  box-shadow: var(--shadow-panel);
}

.metric-card-link.active {
  background: var(--color-surface-container-low);
  border-color: var(--color-primary-container);
  box-shadow: none;
}

.btn,
.btn-secondary,
.btn-ghost,
.btn-danger,
.wizard-button,
.conf-btn-primary,
.conf-btn-ghost,
.dashboard-period-button,
.dashboard-mini-filter-button,
.dashboard-reload-button,
.dashboard-capture-button,
.users-new-button,
.users-edit-button,
.boleto-confiavel-button,
.manual-upload-control {
  min-height: 40px;
  border-radius: var(--radius-md);
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0;
}

.btn,
.conf-btn-primary,
.wizard-button-primary,
.wizard-button-secondary.is-primary-submit,
.dashboard-capture-button,
.users-new-button,
.manual-action-save {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-danger:hover,
.conf-btn-primary:hover,
.conf-btn-ghost:hover,
.wizard-button:hover,
.metric-card-link:hover,
.report-nav-card:hover,
.manual-action-save:hover,
.manual-action-reject:hover {
  transform: none;
}

.btn-secondary,
.btn-ghost,
.conf-btn-ghost,
.wizard-button-secondary,
.users-edit-button,
.boleto-confiavel-button,
.manual-upload-control {
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  color: var(--color-primary);
}

.btn-secondary:hover,
.btn-ghost:hover,
.conf-btn-ghost:hover,
.wizard-button-secondary:hover,
.users-edit-button:hover,
.boleto-confiavel-button:hover {
  background: var(--color-surface-container);
  border-color: var(--color-outline-variant);
}

.btn-danger {
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-error);
}

.field label,
.config-field label,
.approvals-operator-shell label,
.dashboard-period-label,
.dashboard-period-separator,
.eyebrow,
.manual-highlight-label,
.users-section-label,
.user-field span,
.user-module-toggle span,
.users-table th,
.dense-table th,
.dashboard-table thead th {
  color: var(--color-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 16px;
}

.field input,
.field select,
.field textarea,
.config-field input,
.config-field select,
.config-field textarea,
.approvals-operator-input,
.dashboard-period-input,
.dashboard-mini-filter select,
.user-field input,
.user-field select {
  min-height: 40px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  box-shadow: none;
  outline: 0;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.config-field input:focus,
.config-field select:focus,
.config-field textarea:focus,
.approvals-operator-input:focus,
.dashboard-period-input:focus,
.dashboard-mini-filter select:focus,
.user-field input:focus,
.user-field select:focus {
  border-color: var(--color-primary);
  background: var(--color-surface-container-lowest);
  box-shadow: 0 0 0 2px rgba(2, 36, 72, 0.08);
}

.table-shell {
  padding: var(--space-sm);
  background: var(--color-surface-container);
  overflow: hidden;
}

.dense-table {
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.dense-table th,
.users-table th,
.dashboard-table thead th,
.conf-table th,
.recurring-analysis-table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-surface-container-highest);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface-variant);
}

.dense-table td,
.users-table td,
.dashboard-table tbody td,
.conf-table td,
.recurring-analysis-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-surface-container-high);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
}

.dense-table tbody tr td:first-child,
.dense-table tbody tr td:last-child {
  border-radius: 0;
}

.dense-table tbody tr:hover td,
.users-table tbody tr:hover td,
.dashboard-table tbody tr:hover td,
.conf-table tbody tr:hover td,
.recurring-analysis-table tbody tr:hover td {
  background: var(--color-surface-container-low);
}

.dense-table-align-right,
.dashboard-table .dense-table-align-right {
  font-variant-numeric: tabular-nums;
}

.badge,
.status-chip,
.mini-chip,
.system-chip,
.users-status-pill,
.dashboard-status-badge,
.manual-status-pill {
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge.success,
.manual-status-pill.tone-success,
.dashboard-status-badge.tone-success {
  background: var(--success-bg);
  color: var(--success-text);
}

.badge.warning,
.manual-status-pill.tone-warning,
.dashboard-status-badge.tone-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.badge.danger,
.manual-status-pill.tone-danger,
.dashboard-status-badge.tone-danger {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.badge.info,
.system-chip,
.status-chip,
.mini-chip,
.users-status-pill,
.dashboard-avatar {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.modal-backdrop,
.module-switch-backdrop,
.user-wizard-backdrop {
  background: rgba(47, 48, 51, 0.45);
  backdrop-filter: blur(4px);
}

.modal-head,
.modal-actions,
.user-wizard-head,
.user-wizard-actions,
.users-data-summary,
.dashboard-table-head,
.summary-footer {
  border-color: var(--color-surface-container-highest);
  background: var(--color-surface-container-low);
}







.dashboard-metric-icon,
.dashboard-avatar,
.dashboard-action,
.icon-action,
.module-switch-icon,
.user-wizard-close {
  border-radius: var(--radius-md);
}

.dashboard-metric-value-row strong,
.metric-value strong {
  color: var(--color-on-surface);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}









































.route-conferencia-xpert .topbar-title,
.route-conferencia .topbar-title,
.route-fornecedores-recorrentes .topbar-title {
  color: var(--color-on-surface);
}

.route-conferencia-xpert .system-chip,
.route-conferencia .system-chip,
.route-fornecedores-recorrentes .system-chip,
.route-conferencia-xpert .user-badge,
.route-conferencia .user-badge,
.route-fornecedores-recorrentes .user-badge {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

@media (max-width: 760px) {
  :root {
    --content-gutter: 16px;
  }

  .app-sidebar {
    width: 100%;
    flex-basis: auto;
  }

  .topbar-title {
    font-size: 1.5rem;
    line-height: 32px;
  }
}
































































































































































































































































































@keyframes metas-loading-spin {
  to {
    transform: rotate(360deg);
  }
}



















































































/* ── ORDENS DE SERVICO ─────────────────────────────────── */






































@keyframes os-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}











































/* ========================================================
   DOCUMENTOS — dx- design system
   ======================================================== */

:root {
  --dx-ok:      var(--success-text);
  --dx-ok-bg:   var(--success-bg);
  --dx-warn:    var(--warning-text);
  --dx-warn-bg: var(--warning-bg);
  --dx-crit:    var(--danger-text);
  --dx-crit-bg: var(--danger-bg);
  --dx-info:    var(--primary);
  --dx-info-bg: var(--info-bg);
  --dx-navy:    var(--text);
  --dx-ink2:    var(--text-muted);
  --dx-ink3:    var(--text-soft);
  --dx-line:    var(--border);
  --dx-line2:   var(--border-strong);
  --dx-surface: var(--surface-card);
}

.dx-head { margin-bottom: 24px; }
.dx-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dx-ink3);
  margin-bottom: 12px;
}
.dx-crumb a { color: var(--dx-ink2); text-decoration: none; }
.dx-crumb a:hover { color: var(--dx-navy); }
.dx-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dx-head__row h1 {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--dx-navy);
}
.dx-head__row p { margin: 0; color: var(--dx-ink2); font-size: 13px; }
.dx-head__actions { display: inline-flex; gap: 8px; align-items: center; }

.dx-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 160ms;
  text-decoration: none;
  white-space: nowrap;
}
.dx-btn--primary { background: var(--dx-navy); color: #fff; border-color: var(--dx-navy); }
.dx-btn--primary:hover { background: var(--primary-dark, #0b48bf); }
.dx-btn--ghost { background: var(--dx-surface); color: var(--dx-ink2); border-color: var(--dx-line2); }
.dx-btn--ghost:hover { border-color: var(--dx-navy); color: var(--dx-navy); background: var(--surface-low); }
.dx-btn.is-on { border-color: var(--dx-navy); color: var(--dx-navy); background: var(--surface-low); }

.dx-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--dx-line2);
  border-radius: 8px;
  background: var(--dx-surface);
  color: var(--dx-ink2);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 160ms, color 160ms, background 160ms;
  flex-shrink: 0;
}
.dx-iconbtn:hover { border-color: var(--dx-navy); color: var(--dx-navy); background: var(--surface-low); }
.dx-iconbtn--ghost { border-color: transparent; background: transparent; }
.dx-iconbtn--ghost:hover { background: var(--surface-low); border-color: transparent; }

.dx-resumo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(.2,.7,.2,1), margin-bottom 240ms;
  margin-bottom: 0;
  overflow: hidden;
}
.dx-resumo.is-open { grid-template-rows: 1fr; margin-bottom: 18px; }
.dx-resumo__inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 2fr);
  gap: 12px;
  min-height: 0;
}
.dx-resumo.is-open .dx-resumo__inner { overflow: visible; }

.dx-panel {
  background: var(--dx-surface);
  border: 1px solid var(--dx-line);
  border-radius: 12px;
  padding: 18px 20px;
}
.dx-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}
.dx-panel__head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--dx-navy); }
.dx-panel__sub { font-size: 12px; color: var(--dx-ink2); }


.dx-donut-css {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: conic-gradient(
    var(--dx-ok)   0deg         var(--vigente),
    var(--dx-warn) var(--vigente)  var(--pendente),
    var(--dx-crit) var(--pendente) var(--vencido),
    var(--dx-info) var(--vencido)  360deg
  );
  box-shadow: inset 0 0 0 28px var(--dx-surface), 0 4px 18px rgba(15,23,42,0.08);
  flex-shrink: 0;
}
.dx-resumo__chart { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }

.dx-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dx-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border: 1px solid var(--dx-line);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--dx-ink2);
}
.dx-legend li[role="button"] {
  cursor: pointer;
  transition: border-color 160ms, background 160ms, color 160ms;
}
.dx-legend li[role="button"]:hover,
.dx-legend li[role="button"]:focus-visible,
.dx-legend li.is-active {
  outline: none;
  border-color: var(--dx-line2);
  background: var(--surface-low);
  color: var(--dx-navy);
}

.dx-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-low);
  color: var(--dx-navy);
}
.dx-badge.is-ok,    .dx-badge--ok   { background: var(--dx-ok-bg);   color: var(--dx-ok); }
.dx-badge.is-info,  .dx-badge--info { background: var(--dx-info-bg); color: var(--dx-info); }
.dx-badge.is-warn,  .dx-badge--warn { background: var(--dx-warn-bg); color: var(--dx-warn); }
.dx-badge.is-crit,  .dx-badge--crit { background: var(--dx-crit-bg); color: var(--dx-crit); }
.dx-badge.is-mute,  .dx-badge--mute { background: var(--surface-low); color: var(--dx-ink2); }
.dx-badge--num { min-width: 30px; padding: 2px 8px; text-align: center; font-size: 11px; letter-spacing: 0; }

.dx-month { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dx-ink2); font-weight: 600; }
.dx-month .dx-iconbtn { width: 26px; height: 26px; }
.dx-month > span { padding: 4px 10px; border: 1px solid var(--dx-line2); border-radius: 7px; font-size: 12px; }

.dx-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dx-cal__wd { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--dx-ink3); text-align: center; padding: 4px 0; }
.dx-cal__blank { aspect-ratio: 1.4; }
.dx-cal__day {
  position: relative;
  aspect-ratio: 1.4;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--dx-ink3);
  cursor: default;
  padding: 0;
}
.dx-cal__day:not(:disabled) { border-color: var(--dx-line); color: var(--dx-ink2); cursor: pointer; }
.dx-cal__day:not(:disabled):hover { border-color: var(--dx-navy); color: var(--dx-navy); }
.dx-cal__day.has-event { background: var(--dx-warn-bg); color: var(--dx-warn); border-color: transparent; font-weight: 700; }
.dx-cal__day.is-selected { background: var(--dx-navy); color: #fff; }
.dx-cal__count { position: absolute; bottom: 2px; font-size: 8px; font-weight: 700; opacity: 0.8; }
.dx-cal__list { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dx-line); }
.dx-cal__listhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.dx-cal__listhead strong { font-size: 12.5px; color: var(--dx-navy); font-weight: 600; }
.dx-cal__listhead span  { font-size: 11px; color: var(--dx-ink2); }
.dx-cal__list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; max-height: 160px; overflow-y: auto; }
.dx-cal__list li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 7px 10px; background: var(--background); border-radius: 8px; font-size: 12px; }
.dx-cal__list li strong { display: block; color: var(--dx-navy); font-weight: 600; font-size: 12px; line-height: 1.3; }
.dx-cal__list li span   { display: block; color: var(--dx-ink2); font-size: 11px; line-height: 1.3; }
.dx-cal__more { text-align: center !important; color: var(--dx-ink2) !important; background: transparent !important; font-size: 11px !important; font-style: italic; }
.dx-cal__empty { margin: 0; font-size: 12px; color: var(--dx-ink2); }



.dx-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.dx-kpi {
  background: var(--dx-surface);
  border: 1px solid var(--dx-line);
  border-radius: 10px;
  min-width: 0;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.dx-kpi[role="button"] { cursor: pointer; transition: border-color 160ms, box-shadow 160ms, transform 160ms; }
.dx-kpi[role="button"]:hover,
.dx-kpi[role="button"]:focus-visible,
.dx-kpi.is-active {
  outline: none;
  border-color: var(--dx-line2);
  box-shadow: 0 1px 0 rgba(15,23,42,0.04), 0 10px 24px -14px rgba(15,23,42,0.16);
}
.dx-kpi[role="button"]:hover,
.dx-kpi[role="button"]:focus-visible {
  transform: translateY(-1px);
}
.dx-kpi::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--dx-navy);
}
.dx-kpi--ok::before   { background: var(--dx-ok); }
.dx-kpi--info::before { background: var(--dx-info); }
.dx-kpi--warn::before { background: var(--dx-warn); }
.dx-kpi--crit::before { background: var(--dx-crit); }
.dx-kpi__label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dx-ink2); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-kpi__num { font-size: 24px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--dx-navy); font-variant-numeric: tabular-nums; }

.dx-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dx-search {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--dx-surface);
  border: 1px solid var(--dx-line2);
  border-radius: 10px;
  height: 40px;
  color: var(--dx-ink2);
  transition: border-color 160ms, box-shadow 160ms;
}
.dx-search:focus-within { border-color: var(--dx-navy); box-shadow: 0 0 0 3px rgba(100,132,186,0.1); }
.dx-search input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; font-size: 13.5px; color: var(--dx-navy); }
.dx-search input::placeholder { color: var(--dx-ink3); }

.dx-filters { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dx-filter-select {
  border: 1px solid var(--dx-line2, #dde0ea);
  outline: none;
  background: var(--dx-surface, #fff);
  font: inherit; font-size: 13px; color: var(--dx-navy);
  padding: 7px 28px 7px 12px; border-radius: 8px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  min-width: 130px;
  height: 36px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color 140ms, box-shadow 140ms;
}
.dx-filter-select:hover { border-color: var(--dx-navy); }
.dx-filter-select:focus { border-color: var(--dx-navy); box-shadow: 0 0 0 3px rgba(100,132,186,0.15); }
.dx-filter {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dx-ink2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 140ms;
  white-space: nowrap;
}
.dx-filter:hover { color: var(--dx-navy); }
.dx-filter.is-active { background: var(--dx-navy); color: #fff; }
.dx-filter__c { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: var(--surface-low); color: var(--dx-ink2); font-variant-numeric: tabular-nums; }
.dx-filter.is-active .dx-filter__c { background: rgba(255,255,255,0.18); color: #fff; }

.dx-emps { display: flex; flex-direction: column; gap: 8px; }
.dx-emps[hidden] { display: none; }

.dx-emp {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(260px, 2fr) auto;
  align-items: center;
  gap: 22px;
  padding: 16px 20px;
  background: var(--dx-surface);
  border: 1px solid var(--dx-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 200ms, box-shadow 200ms, transform 180ms;
}
.dx-emp:hover, .dx-emp:focus-visible {
  outline: none;
  border-color: var(--dx-line2);
  box-shadow: 0 1px 0 rgba(15,23,42,0.04), 0 10px 24px -14px rgba(15,23,42,0.16);
  transform: translateY(-1px);
}
.dx-emp__lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dx-emp__avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--surface-low);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 200ms, color 200ms;
}
.dx-emp:hover .dx-emp__avatar { background: var(--dx-navy); color: #fff; }
.dx-emp__id { min-width: 0; }
.dx-emp__id h3 { margin: 0 0 3px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--dx-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-emp__meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dx-ink2); }

.dx-emp__health { min-width: 0; }
.dx-emp__pctline { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.dx-emp__pct { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--dx-navy); font-variant-numeric: tabular-nums; }
.dx-emp__pctlabel { font-size: 11px; color: var(--dx-ink2); }
.dx-emp__alert { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--dx-warn-bg); color: var(--dx-warn); white-space: nowrap; }
.dx-emp__alert.is-crit { background: var(--dx-crit-bg); color: var(--dx-crit); }

.dx-health { display: flex; gap: 2px; height: 6px; border-radius: 3px; background: var(--dx-line); overflow: hidden; margin-bottom: 10px; }
.dx-health__seg { display: block; min-width: 0; }
.dx-health__seg--ok   { background: var(--dx-ok); }
.dx-health__seg--info { background: var(--dx-info); }
.dx-health__seg--warn { background: var(--dx-warn); }
.dx-health__seg--crit { background: var(--dx-crit); }

.dx-emp__stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--dx-ink2); }
.dx-stat b { font-weight: 700; color: var(--dx-navy); font-variant-numeric: tabular-nums; margin-right: 2px; }
.dx-stat.is-ok b   { color: var(--dx-ok); }
.dx-stat.is-info b { color: var(--dx-info); }
.dx-stat.is-warn b { color: var(--dx-warn); }
.dx-stat.is-crit b { color: var(--dx-crit); }
.dx-stat.is-mute   { color: var(--dx-ink3); }

.dx-emp__cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dx-emp:hover .dx-emp__cta .dx-btn--ghost { border-color: var(--dx-navy); color: var(--dx-navy); background: var(--surface-low); }

.dx-empty { padding: 36px; text-align: center; background: var(--dx-surface); border: 1px dashed var(--dx-line2); border-radius: 12px; color: var(--dx-ink2); font-size: 13.5px; }

.dx-detail__id { display: flex; align-items: center; gap: 14px; }
.dx-detail__id h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.02em; }
.dx-detail__id p { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.dx-detail__avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--dx-navy);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 22px;
  flex-shrink: 0;
}

.dx-tabs { display: inline-flex; gap: 3px; background: var(--dx-surface); border: 1px solid var(--dx-line2); border-radius: 10px; padding: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.dx-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--dx-ink2);
  cursor: pointer;
  transition: all 140ms;
  text-decoration: none;
}
.dx-tab:hover { color: var(--dx-navy); }
.dx-tab.is-active { background: var(--dx-navy); color: #fff; }
.dx-tab__n { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--surface-low); color: var(--dx-ink2); font-variant-numeric: tabular-nums; }
.dx-tab.is-active .dx-tab__n { background: rgba(255,255,255,0.18); color: #fff; }

@media (max-width: 1100px) {
  .dx-kpis { grid-template-columns: repeat(3, 1fr); }
  .dx-emp  { grid-template-columns: 1fr; }
  .dx-emp__cta { justify-content: flex-end; }
  .dx-resumo__inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dx-kpis { grid-template-columns: repeat(2, 1fr); }
  .dx-toolbar { flex-direction: column; align-items: stretch; }
  .dx-search { min-width: 0; }
}

/* ── Document rows (empresa detail) ── */















/* ── Grid 3-dot menu ── */
.dx-grid-menu { position: relative; display: inline-flex; }
.dx-grid-menu__list {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 180px;
  background: var(--dx-surface);
  border: 1px solid var(--dx-line2);
  border-radius: 10px;
  box-shadow: 0 16px 40px -12px rgba(15,23,42,0.22);
  padding: 6px;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 120ms, transform 120ms;
}
.dx-grid-menu.is-open .dx-grid-menu__list {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── Table horizontal-scroll wrapper (no vertical scrollbar) ── */
.dx-table-wrap { overflow-x: auto; overflow-y: hidden; }
.dx-table-wrap::-webkit-scrollbar { height: 4px; width: 0; }
.dx-table-wrap::-webkit-scrollbar-track { background: transparent; }
.dx-table-wrap::-webkit-scrollbar-thumb { background: var(--dx-line2); border-radius: 4px; }
.dx-grid-menu__item {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--dx-navy);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background 120ms;
}
.dx-grid-menu__item:hover { background: var(--dx-surface2); }
.dx-grid-menu__item:disabled,
.dx-grid-menu__item.is-disabled { opacity: 0.4; pointer-events: none; }
.dx-grid-menu__item.is-danger { color: var(--dx-crit); }
.dx-grid-menu__item.is-danger:hover { background: var(--dx-crit-bg); }
.dx-grid-menu__sep { border: 0; border-top: 1px solid var(--dx-line); margin: 4px 0; }

/* ── 3-dot dropdown menu ── */
.dx-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--dx-surface);
  border: 1px solid var(--dx-line2);
  border-radius: 10px;
  box-shadow: 0 22px 50px -22px rgba(15,23,42,0.28);
  padding: 6px;
  display: flex;
  flex-direction: column;
  z-index: 30;
  animation: dxMenu 140ms cubic-bezier(.2,.7,.2,1);
}
@keyframes dxMenu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dx-menu[hidden] { display: none; }
.dx-menu.documentos-doc-menu-list--floating {
  position: fixed;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 9999;
  max-width: calc(100vw - 16px);
}
.dx-menu__item {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--dx-navy);
  border-radius: 6px;
  cursor: pointer;
  transition: background 140ms;
  text-decoration: none;
  display: block;
}
.dx-menu__item:hover { background: var(--surface-low); }
.dx-menu__item.is-danger { color: var(--dx-crit); font-weight: 600; }
.dx-menu__item.is-danger:hover { background: var(--dx-crit-bg); }
.dx-menu__item:disabled,
.dx-menu__item.is-disabled { color: var(--dx-ink3); pointer-events: none; opacity: 0.5; }

/* ── Modal system ── */
.dx-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(14,31,77,0.45);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: dxFade 180ms ease;
}
@keyframes dxFade { from { opacity: 0 } to { opacity: 1 } }
.dx-modal__card {
  position: relative;
  background: var(--dx-surface);
  border-radius: 14px;
  width: min(1100px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px -20px rgba(14,31,77,0.45);
  overflow: hidden;
  animation: dxPop 220ms cubic-bezier(.2,.7,.2,1);
}
@keyframes dxPop { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.dx-modal__card--sm { width: min(440px, 100%); }
.dx-modal__card--md { width: min(680px, 100%); }
.dx-modal__card--lg { width: min(1100px, 100%); }
.dx-modal__card > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dx-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--dx-line);
  flex-shrink: 0;
}
.dx-modal__head h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--dx-navy); }
.dx-modal__head p  { margin: 0; font-size: 12.5px; color: var(--dx-ink2); }
.dx-modal__body    { flex: 1; overflow: auto; padding: 22px 24px; }
.dx-modal__scroll  { flex: 1; overflow: auto; padding: 4px 24px; }
.dx-modal__foot    { padding: 16px 24px; border-top: 1px solid var(--dx-line); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }

/* ── Form inside modal ── */
.dx-form { display: flex; flex-direction: column; gap: 16px; }
.dx-form__row { display: grid; gap: 12px; }
.dx-form__row--2 { grid-template-columns: 1fr 1fr; }
.dx-form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
.dx-field { display: flex; flex-direction: column; gap: 6px; }
.dx-field__lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dx-ink2);
}
.dx-field input,
.dx-field select,
.dx-field textarea {
  font: inherit;
  font-size: 14px;
  padding: 11px 12px;
  border: 1px solid var(--dx-line2);
  border-radius: 8px;
  background: var(--dx-surface);
  color: var(--dx-navy);
  transition: border-color 160ms;
  width: 100%;
}
.dx-field input:focus,
.dx-field select:focus,
.dx-field textarea:focus { outline: none; border-color: var(--dx-navy); box-shadow: 0 0 0 3px rgba(100,132,186,0.1); }
.dx-field input[readonly] { background: var(--background); color: var(--dx-ink2); }

/* ── Upload area ── */
.dx-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px;
  border: 1px dashed var(--dx-line2);
  border-radius: 10px;
  background: var(--background);
  text-align: center;
}
.dx-upload__icon { color: var(--dx-ink2); margin-bottom: 4px; }
.dx-upload strong { font-size: 14px; color: var(--dx-navy); }
.dx-upload span { font-size: 12px; color: var(--dx-ink2); }
.dx-upload__file { margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; }
.dx-upload__file span { font-size: 12.5px; color: var(--dx-ink2); }
.dx-btn--sm { padding: 6px 12px; font-size: 12.5px; }

/* ── Details meta list ── */
.dx-meta { margin: 0; display: flex; flex-direction: column; }
.dx-meta__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--dx-line);
  font-size: 13px;
}
.dx-meta__row:last-child { border-bottom: 0; }
.dx-meta dt { color: var(--dx-ink2); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dx-meta dd { margin: 0; color: var(--dx-navy); }

/* ── Preview viewer ── */
.dx-preview { display: flex; flex-direction: column; height: 70vh; min-height: 480px; }
.dx-preview__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #2b2f36;
  color: #d9dde4;
  border-radius: 8px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.dx-preview__tools { display: inline-flex; align-items: center; gap: 4px; }
.dx-preview__sep { width: 1px; height: 18px; background: rgba(255,255,255,0.15); margin: 0 6px; }
.dx-preview__toolbar .dx-iconbtn { background: transparent; color: #d9dde4; border-color: transparent; width: 30px; height: 30px; }
.dx-preview__toolbar .dx-iconbtn:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: transparent; }
.dx-preview__viewport {
  flex: 1;
  overflow: auto;
  background: #5d6470;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.dx-preview__viewport iframe,
.dx-preview__viewport img {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
}

/* ── dx-table ── */
.dx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  min-width: 800px;
}
.dx-table thead th {
  position: sticky; top: 0;
  background: var(--dx-surface);
  text-align: left;
  padding: 14px 14px 12px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dx-ink2);
  border-bottom: 1px solid var(--dx-line);
  white-space: nowrap;
  z-index: 1;
}
.dx-table thead th:first-child { position: sticky; left: 0; z-index: 2; }
.dx-table tbody th {
  text-align: left; padding: 12px 14px;
  font-weight: 600; color: var(--dx-navy); font-size: 13px;
  background: var(--dx-surface);
  border-bottom: 1px solid var(--dx-line);
  position: sticky; left: 0;
  white-space: nowrap;
}
.dx-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--dx-line);
  font-variant-numeric: tabular-nums;
  color: var(--dx-ink2);
  font-weight: 600;
}
.dx-table tbody td.is-ok   { color: var(--dx-ok); }
.dx-table tbody td.is-warn { color: var(--dx-warn); }
.dx-table tbody td.is-crit { color: var(--dx-crit); font-weight: 700; }
.dx-table tbody td.is-info { color: var(--dx-info); }
.dx-table tbody tr:hover td,
.dx-table tbody tr:hover th { background: var(--surface-low); }
.dx-table__total th, .dx-table__total td { border-bottom: 0; background: var(--background); color: var(--dx-navy); font-weight: 700; }

/* ── dx-btn variants ── */
.dx-btn--danger {
  background: var(--danger, #e53e3e);
  color: #fff;
  border-color: transparent;
}
.dx-btn--danger:hover { background: #c53030; }

/* ── dx-modal__error ── */
.dx-modal__error {
  flex-shrink: 0;
  margin: 0 24px;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--danger-bg, #fff5f5);
  color: var(--danger, #e53e3e);
  font-size: 13px;
  line-height: 1.4;
}

/* ── dx-preview__name ── */
.dx-preview__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

/* ── dx-menu separator ── */
.dx-menu__sep { border: 0; border-top: 1px solid var(--dx-line, #e8eaf0); margin: 4px 0; }

@media (max-width: 640px) {
  .dx-form__row--3, .dx-form__row--2 { grid-template-columns: 1fr; }
  .dx-doc { grid-template-columns: 36px 1fr; }
  .dx-doc__status, .dx-doc__actions { grid-column: 1 / -1; }
}

/* ============================================================
   METAS — refresh visual (mt-*)
   Aplicado sobre a estrutura existente (.metas-page, .metas-view).
   Apenas mudancas visuais; dados/calculos preservados.
   ============================================================ */
:root {
  --mt-navy: var(--color-primary);
  --mt-navy-tint: rgba(2, 36, 72, 0.06);
  --mt-navy-tint-2: rgba(2, 36, 72, 0.10);
  --mt-navy-tint-3: rgba(2, 36, 72, 0.18);
  --mt-ink: var(--color-on-surface);
  --mt-ink-2: var(--color-on-surface-variant);
  --mt-ink-3: var(--color-outline);
  --mt-ink-4: var(--color-outline-variant);
  --mt-bg: var(--color-surface-container-low);
  --mt-surface: var(--color-surface-container-lowest);
  --mt-line: var(--color-surface-container-highest);
  --mt-line-2: var(--color-outline-variant);
  --mt-ok: #0f7a3f;
  --mt-ok-bg: #dff7e5;
  --mt-warn: #b96d06;
  --mt-warn-bg: #fff2cf;
  --mt-crit: #b3261e;
  --mt-crit-bg: #ffdad6;

  --mt-p-gc: #cf3a2b;
  --mt-p-ga: #1e3a8a;
  --mt-p-et: #2c8a4f;
  --mt-p-et-a: #6b3aa6;
  --mt-p-d10: #b6862a;
  --mt-p-d500: #6b4f2a;
  --mt-p-go: #e07a1a;

  --mt-h1: #eef3f9;
  --mt-h2: #dbe6f3;
  --mt-h3: #c0d3ea;
  --mt-h4: #8eb0d8;
  --mt-h5: #5a89c4;
  --mt-h6: #2e5fa2;
}



/* KPI strip */











/* Page head + breadcrumb */






/* Filters hint */



/* Delta pill */






/* Percent pill (meta atingimento) */







/* Analise semanal - graficos premium com abas */




















































/* Group rows + total rows refresh (apply on .metas-table) */













/* Parcial badge */


/* Histórico — sparkline summary cards */





















/* Sparkline */





/* Heatmap matrix (extends existing classes used in Histórico) */




















/* Mix dots (Vendas Semanal) */









/* MiniBars */




/* Progress bar (Análise Semanal) */









/* Dual cell (Análise Semanal) */





/* Product swatch */



/* Empty state inside metas */





/* ============================================================
   Onboarding guiado (Boleto Facil)
   ============================================================ */
.onboarding-help-button {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(19, 83, 216, 0.18);
  background: var(--surface-card);
  color: var(--primary);
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(17, 41, 83, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.onboarding-help-button:hover,
.onboarding-help-button:focus-visible {
  transform: translateY(-2px);
  background: var(--surface-low);
  box-shadow: 0 18px 36px rgba(17, 41, 83, 0.22);
  outline: none;
}

.onboarding-help-button .material-symbols-outlined {
  font-size: 26px;
  line-height: 1;
}

.onboarding-help-button-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--text);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.onboarding-help-button:hover .onboarding-help-button-label,
.onboarding-help-button:focus-visible .onboarding-help-button-label {
  opacity: 1;
}

.onboarding-layer {
  position: fixed;
  inset: 0;
  z-index: 1300;
  pointer-events: none;
}

.onboarding-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 23, 51, 0.62);
  backdrop-filter: blur(1px);
  pointer-events: auto;
}

.onboarding-highlight {
  position: absolute;
  border-radius: 14px;
  box-shadow:
    0 0 0 4px rgba(19, 83, 216, 0.55),
    0 0 0 9999px rgba(7, 23, 51, 0.62);
  background: transparent;
  transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease, opacity 180ms ease;
  pointer-events: none;
  opacity: 0;
}

.onboarding-popover {
  position: absolute;
  z-index: 1;
  width: min(360px, calc(100vw - 24px));
  background: var(--surface-card);
  color: var(--text);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(17, 41, 83, 0.22);
  padding: 18px 18px 16px;
  pointer-events: auto;
  transition: top 220ms ease, left 220ms ease;
}

.onboarding-popover.is-centered {
  transition: none;
}

.onboarding-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.onboarding-progress {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.onboarding-close {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.onboarding-close:hover,
.onboarding-close:focus-visible {
  background: var(--surface-low);
  color: var(--text);
  outline: none;
}

.onboarding-close .material-symbols-outlined {
  font-size: 20px;
}

.onboarding-title {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.onboarding-text {
  margin: 0 0 14px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.onboarding-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.onboarding-btn {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
}

.onboarding-btn-skip {
  color: var(--text-muted);
}

.onboarding-btn.is-disabled,
.onboarding-btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

body.has-onboarding-open {
  overflow: hidden;
}

/* Modal de confirmacao de acoes (substitui confirm() nativo) */
.confirm-action-modal {
  z-index: 140;
}

.confirm-action-card {
  width: min(440px, calc(100vw - 32px));
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.confirm-action-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 0;
}

.confirm-action-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--danger-bg);
  color: var(--danger-text);
}

.confirm-action-icon[data-tone="primary"] {
  background: var(--info-bg);
  color: var(--info-text);
}

.confirm-action-icon[data-tone="warning"] {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.confirm-action-icon .material-symbols-outlined {
  font-size: 28px;
}

.confirm-action-close-btn {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 10px;
}

.confirm-action-close-btn:hover {
  background: var(--surface-low);
  color: var(--text);
}

.confirm-action-body {
  padding: 16px 22px 4px;
}

.confirm-action-title {
  margin: 0 0 8px 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--text);
}

.confirm-action-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.confirm-action-detail {
  margin: 10px 0 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-low);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.confirm-action-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 22px 22px;
}

@media (max-width: 520px) {
  .confirm-action-card {
    width: calc(100vw - 24px);
  }
  .confirm-action-footer {
    flex-direction: column-reverse;
  }
  .confirm-action-footer .btn,
  .confirm-action-footer .btn-ghost,
  .confirm-action-footer .btn-danger {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   Tela de Relatorios (UI refinada)
   ============================================================ */




























































































@media (max-width: 640px) {
  .onboarding-help-button {
    right: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
  }
  .onboarding-help-button .material-symbols-outlined {
    font-size: 22px;
  }
  .onboarding-popover {
    width: calc(100vw - 24px);
    padding: 16px;
  }
  .onboarding-title {
    font-size: 16px;
  }
  .onboarding-text {
    font-size: 13px;
  }
}












/* === RH: benefícios + menu de ações 3 pontos === */








































/* === RH: Documento de Admissão === */


































































/* === Ficha de Acompanhamento — modal === */


































































/* ============ Concilia Protege ============ */

































































.btn-ghost.danger { color: #b91c1c; }




















/* ---- tokens compartilhados Portal X (movido de portal.css; usado em /portal e /usuarios) ---- */
.portal-body {
  --px-navy:      #0e1f4d;
  --px-navy-deep: #081434;
  --px-navy-soft: #1a2e63;
  --px-navy-t1:   rgba(14, 31, 77, 0.06);
  --px-navy-t2:   rgba(14, 31, 77, 0.10);
  --px-navy-t3:   rgba(14, 31, 77, 0.16);
  --px-bg:        #f4f6fb;
  --px-surface:   #ffffff;
  --px-line:      rgba(14, 31, 77, 0.08);
  --px-line-2:    rgba(14, 31, 77, 0.14);
  --px-ink:       #0e1f4d;
  --px-ink-2:     #3a4a73;
  --px-ink-3:     #6b7895;
  --px-ink-4:     #97a0b6;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--px-bg);
  background-image:
    linear-gradient(var(--px-navy-t1) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-navy-t1) 1px, transparent 1px),
    radial-gradient(1100px 600px at 100% -10%, rgba(14, 31, 77, 0.05), transparent 60%);
  background-size: 56px 56px, 56px 56px, auto;
  background-position: -1px -1px, -1px -1px, 0 0;
  color: var(--px-ink);
  font-family: 'Inter', 'Public Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}