/* PIMS 1.12.4 — acabamento exclusivo do APK/Capacitor. */
.login-brand { display: none; }

@media (max-width: 760px) {
  html.native-app {
    --mobile-page-x: max(16px, env(safe-area-inset-left));
    --mobile-page-right: max(16px, env(safe-area-inset-right));
    --mobile-nav-height: 72px;
    color: var(--text-primary);
    background: var(--background);
  }

  html.native-app body {
    min-width: 0;
    overflow-x: hidden;
    color: var(--text-primary);
    background: var(--background);
  }

  html.native-app body::before {
    height: env(safe-area-inset-top);
    background: var(--green-950);
  }

  html.native-app .app-shell,
  html.native-app .main-content,
  html.native-app .view {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  html.native-app .main-content {
    margin: 0;
    padding: 0 var(--mobile-page-right) calc(var(--mobile-nav-height) + 24px + env(safe-area-inset-bottom)) var(--mobile-page-x);
    overflow-x: clip;
  }

  html.native-app .topbar {
    width: calc(100% + var(--mobile-page-x) + var(--mobile-page-right));
    min-height: 68px;
    position: sticky;
    z-index: 35;
    top: env(safe-area-inset-top);
    margin: 0 calc(0px - var(--mobile-page-right)) 18px calc(0px - var(--mobile-page-x));
    padding: 10px var(--mobile-page-right) 10px var(--mobile-page-x);
    color: #fff;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: var(--green-950);
    box-shadow: 0 2px 8px rgba(18, 58, 39, .12);
    backdrop-filter: none;
  }

  html.native-app .topbar > div:first-child { min-width: 0; }
  html.native-app .topbar .eyebrow { display: none; }
  html.native-app .topbar h1 {
    overflow: hidden;
    color: #fff;
    font-size: clamp(20px, 6vw, 24px);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.native-app .topbar-actions { flex: 0 0 auto; gap: 6px; }
  html.native-app .topbar-actions :is(.sync-button, .icon-only-button, .top-profile) {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    color: var(--green-950);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
  }
  html.native-app .topbar .sync-button > span:not(.icon),
  html.native-app .topbar .top-profile .user-role { display: none; }
  html.native-app .topbar .avatar { width: 34px; height: 34px; }

  html.native-app .view { padding: 0 0 18px; }
  html.native-app .module-toolbar,
  html.native-app .welcome-row,
  html.native-app .panel-heading,
  html.native-app .manage-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  html.native-app .module-toolbar { margin-bottom: 16px; }
  html.native-app .module-description { color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
  html.native-app .module-actions,
  html.native-app .panel-actions,
  html.native-app .manage-actions { width: 100%; justify-content: stretch; }
  html.native-app .module-actions > button,
  html.native-app .panel-actions > button,
  html.native-app .manage-actions > button { flex: 1 1 auto; }

  html.native-app :is(.panel, .metric-card, .verba-card, .calc-form-panel, .filter-panel, .registration-panel, .record-card, .filial-card) {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(18, 58, 39, .05);
  }
  html.native-app :is(.metric-card, .verba-card, .record-card, .filial-card):active { transform: none; }
  html.native-app .metric-card.primary { border-color: var(--green-950); background: var(--green-950); }

  html.native-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    max-width: 100%;
    border-radius: 10px;
    font-size: 16px;
  }
  html.native-app :is(.primary-button, .ghost-button, .secondary-button, .danger-button, .compact-button, .filter-toggle) {
    min-height: 48px;
    border-radius: 10px;
    box-shadow: none;
  }
  html.native-app .primary-button { color: #fff; border-color: var(--green-800); background: var(--green-800); }

  /* Novo cálculo: conteúdo claro, compacto e escaneável. */
  html.native-app .calculation-layout { gap: 14px; }
  html.native-app .calc-form-panel,
  html.native-app .confirmation-content { padding: 16px; }
  html.native-app .verba-confirmation:not(.empty) {
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(18, 58, 39, .05);
  }
  html.native-app .verba-confirmation:not(.empty) :is(h1, h2, h3, p, span, strong, small, b) { color: inherit; }
  html.native-app .confirm-header > div > span,
  html.native-app .confirm-data span,
  html.native-app .unit-price span { color: var(--text-secondary); }
  html.native-app .confirmation-content > h3,
  html.native-app .unit-price strong { color: var(--green-950); }
  html.native-app .confirm-data { border-color: var(--border); }
  html.native-app .confirm-data > div { border-color: var(--border) !important; }
  html.native-app .daily-rate-breakdown {
    gap: 1px;
    border-color: var(--border);
    background: var(--border);
  }
  html.native-app .daily-rate-breakdown > div { background: var(--background-soft); }
  html.native-app .daily-rate-breakdown .applied { background: var(--green-100); }
  html.native-app .daily-rate-breakdown :is(span, small) { color: var(--text-secondary); }
  html.native-app .daily-rate-breakdown strong,
  html.native-app .daily-rate-breakdown .applied strong { color: var(--green-950); }
  html.native-app .verba-details { border-color: var(--border); }
  html.native-app .verba-details summary { color: var(--green-800); }
  html.native-app .verba-details-grid { background: var(--border); }
  html.native-app .verba-details-grid > div { background: #fff; }
  html.native-app .verba-details-grid span { color: var(--text-secondary); }
  html.native-app .verba-details-grid strong { color: var(--text-primary); }
  html.native-app .desired-value-section { border-top-color: var(--border); }
  html.native-app .desired-value-section .field-label,
  html.native-app .desired-value-section .money-input-help { color: #34483d; }
  html.native-app .calculate-primary { color: #fff; border-color: var(--green-800); background: var(--green-800); }
  html.native-app .total-result { color: var(--green-950); border: 1px solid #bfd3b4; background: var(--green-50); }
  html.native-app .installment-panel { border-color: var(--border); background: var(--background-soft); }
  html.native-app .installment-header strong,
  html.native-app .installment-control label { color: var(--green-950); }
  html.native-app .installment-header small,
  html.native-app .installment-control small,
  html.native-app .switch-state,
  html.native-app .installment-summary span,
  html.native-app .installment-note { color: #40534a; }
  html.native-app .installment-icon { color: var(--green-800); background: var(--green-100); }
  html.native-app .installment-panel .number-stepper .icon-only-button {
    color: var(--green-800);
    border-color: #aebfaf;
    background: #fff;
  }
  html.native-app .installment-panel .number-stepper .icon-only-button:active {
    color: #fff;
    border-color: var(--green-800);
    background: var(--green-800);
  }
  html.native-app .installment-panel .number-stepper input {
    color: var(--green-950);
    border-color: #9fb3a4;
    background: #fff;
    caret-color: var(--green-800);
  }
  html.native-app .installment-panel .number-stepper input:focus {
    border-color: var(--green-800);
    box-shadow: 0 0 0 3px rgba(86, 143, 170, .16);
  }
  html.native-app .installment-summary > div { background: var(--green-100); }
  html.native-app .installment-summary strong,
  html.native-app .installment-card header > span,
  html.native-app .installment-card footer > strong { color: var(--green-800); }
  html.native-app .installment-card { border-color: var(--border); background: #fff; }
  html.native-app .installment-card :is(header, footer) { border-color: var(--border); }
  html.native-app .installment-card header > strong,
  html.native-app .installment-card div > b { color: var(--text-primary); }
  html.native-app .installment-card :is(div > span, footer > span) { color: var(--text-secondary); }
  html.native-app .report-button { color: var(--green-800); border-top-color: var(--border); }
  html.native-app .report-button strong { color: var(--green-950); }
  html.native-app .report-button small { color: #40534a; }
  html.native-app .report-button .report-icon { color: var(--green-800); background: var(--green-100); }

  /* Contraste compartilhado nos demais modulos, sem alterar medidas. */
  html.native-app :is(.module-description, .welcome-row p, .panel-heading p, .manage-heading p, .verba-card > p, .record-card small, .record-stat, .result-summary, .field-help, .user-password-help, .empty-state p) {
    color: var(--text-secondary);
  }
  html.native-app :is(.card-meta span, .card-price span, .account-block-label, .account-meta small, .sync-diagnostics-grid small) {
    color: var(--text-tertiary);
  }

  /* Barra inferior estável: sem botão flutuante ou itens saltando. */
  html.native-app .mobile-nav {
    width: 100%;
    max-width: none;
    min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    display: flex;
    align-items: stretch;
    overflow: hidden;
    inset: auto 0 0;
    padding: 6px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: #fff;
    box-shadow: 0 -3px 12px rgba(18, 58, 39, .07);
    backdrop-filter: none;
  }
  html.native-app .mobile-nav::before { display: none; }
  html.native-app .mobile-nav button,
  html.native-app .mobile-nav .mobile-primary-action {
    min-width: 0;
    min-height: 60px;
    height: 60px;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 5px 2px;
    color: var(--text-muted);
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  html.native-app .mobile-nav > [data-view="dashboard"] { order: 1; }
  html.native-app .mobile-nav > [data-view="verbas"] { order: 2; }
  html.native-app .mobile-nav > #mobile-calculate-nav { order: 3; }
  html.native-app .mobile-nav > [data-view="resumos"] { order: 4; }
  html.native-app .mobile-nav > [data-view="cadastros"] { order: 5; }
  html.native-app .mobile-nav button > .icon,
  html.native-app .mobile-nav .mobile-primary-action > .icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    position: static;
    inset: auto;
    margin: 0;
    padding: 5px;
    color: inherit;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    filter: none;
    transform: none;
  }
  html.native-app .mobile-nav button > .icon::after { display: none; }
  html.native-app .mobile-nav button small,
  html.native-app .mobile-nav .mobile-primary-action small {
    position: static;
    inset: auto;
    overflow: hidden;
    margin: 0;
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.native-app .mobile-nav button.active,
  html.native-app .mobile-nav button.account-active {
    min-height: 60px;
    height: 60px;
    margin: 0;
    padding: 5px 2px;
    color: var(--green-800);
    border: 0;
    border-radius: 10px;
    background: var(--green-50);
    box-shadow: none;
  }
  html.native-app .mobile-nav button.active > .icon,
  html.native-app .mobile-nav button.account-active > .icon,
  html.native-app .mobile-nav .mobile-primary-action.active > .icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    position: static;
    padding: 5px;
    color: #fff;
    border-radius: 9px;
    background: var(--green-800);
    transform: none;
  }
  html.native-app .mobile-nav button.active small,
  html.native-app .mobile-nav button.account-active small { color: var(--green-800); font-weight: 800; }
  html.native-app .mobile-nav button:active > .icon { transform: scale(.92); }

  /* Login do APK: tela limpa, com foco em credenciais e teclado. */
  html.native-app dialog#access-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    inset: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--background);
  }
  html.native-app dialog#access-modal[open] { animation: none; }
  html.native-app.dialog-open .mobile-nav { visibility: hidden; pointer-events: none; }
  html.native-app dialog#access-modal::backdrop { background: rgba(18, 58, 39, .46); backdrop-filter: none; }
  html.native-app #access-modal .account-dialog {
    width: 100%;
    min-height: 100dvh;
    height: 100dvh;
    align-items: stretch;
    padding: 0;
  }
  html.native-app #access-modal .login-form,
  html.native-app #access-modal .account-section { width: 100%; min-height: 100%; }
  html.native-app #access-modal .login-sheet {
    width: 100%;
    max-width: 520px;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0 auto;
    padding: calc(20px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));
    gap: 18px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    animation: none;
  }
  html.native-app #access-modal .login-sheet::before,
  html.native-app #access-modal .drag-handle { display: none; }
  html.native-app #access-modal .login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  html.native-app #access-modal .login-brand-mark {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 11px;
    background: var(--green-950);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .04em;
  }
  html.native-app #access-modal .login-brand > span:last-child { min-width: 0; }
  html.native-app #access-modal .login-brand strong,
  html.native-app #access-modal .login-brand small { display: block; }
  html.native-app #access-modal .login-brand strong { color: var(--green-950); font-size: 16px; }
  html.native-app #access-modal .login-brand small { margin-top: 2px; color: var(--text-secondary); font-size: 12px; }
  html.native-app #access-modal .login-header { align-items: flex-start; }
  html.native-app #access-modal .login-header h2 { color: var(--green-950); font-size: 28px; letter-spacing: -.02em; }
  html.native-app #access-modal .login-header p { max-width: 34ch; color: var(--text-secondary); font-size: 14px; }
  html.native-app #access-modal .login-header .close-modal {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--background-soft);
  }
  html.native-app #access-modal .login-card {
    padding: 12px;
    border: 1px solid #cbdcc3;
    border-radius: 11px;
    background: var(--green-50);
  }
  html.native-app #access-modal .login-card-icon { width: 42px; height: 42px; border-radius: 9px; box-shadow: none; }
  html.native-app #access-modal .login-card-action .secondary-button { min-height: 44px; color: #fff; background: var(--green-800); }
  html.native-app #access-modal .form-fields { gap: 16px; }
  html.native-app #access-modal .input-label { gap: 7px; color: var(--text-primary); font-size: 14px; font-weight: 750; }
  html.native-app #access-modal :is(.login-input, .password-field) {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 0 50px 0 44px;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
  }
  html.native-app #access-modal .password-field {
    padding: 0 50px 0 44px !important;
    border: 1px solid var(--border-strong) !important;
    background: #fff !important;
  }
  html.native-app #access-modal :is(.login-input, .password-field):focus-within {
    border-color: var(--green-700);
    box-shadow: 0 0 0 3px rgba(86, 143, 170, .14);
  }
  html.native-app #access-modal .login-input > .icon,
  html.native-app #access-modal .password-leading-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 14px;
    color: var(--green-700);
  }
  html.native-app #access-modal .login-input input,
  html.native-app #access-modal .password-field input {
    width: 100%;
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
  }
  html.native-app #access-modal .password-field input {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html.native-app #access-modal .login-input input { padding-right: 0; }
  html.native-app #access-modal .password-toggle { right: 3px; }
  html.native-app #access-modal .native-save-login { padding: 12px; border-radius: 11px; background: var(--background-soft); }
  html.native-app #access-modal .login-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: auto;
    padding: 4px 0 0;
  }
  html.native-app #access-modal .login-actions button { width: 100%; min-height: 52px; margin: 0; border-radius: 11px; }
  html.native-app #access-modal .login-actions .primary-button { grid-row: 1; color: #fff; background: var(--green-800); }
  html.native-app #access-modal .login-actions .ghost-button { grid-row: 2; color: var(--green-800); background: #fff; }

  html.native-app.keyboard-open #access-modal .login-sheet {
    min-height: 100%;
    height: 100%;
    max-height: 100%;
    padding: 10px 14px calc(8px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  html.native-app.keyboard-open #access-modal .login-brand,
  html.native-app.keyboard-open #access-modal .login-card,
  html.native-app.keyboard-open #access-modal .login-header .modal-kicker,
  html.native-app.keyboard-open #access-modal .login-header p,
  html.native-app.keyboard-open #access-modal .native-save-login,
  html.native-app.keyboard-open #access-modal .login-actions .ghost-button { display: none !important; }
  html.native-app.keyboard-open #access-modal .login-header h2 { font-size: 20px; }
  html.native-app.keyboard-open #access-modal .form-fields { gap: 10px; }
  html.native-app.keyboard-open #access-modal .login-actions { margin-top: 0; }
}

/* Valor desejado: tipografia final do APK, sem ser reduzida por regras genéricas. */
html.native-app #view-calculo .desired-value-section .step-label > span {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  font-size: 18px;
}

html.native-app #view-calculo .desired-value-section .step-label strong {
  color: var(--green-950);
  font-size: clamp(30px, 8vw, 36px);
  font-weight: 850;
  line-height: 1.15;
}

html.native-app #view-calculo .desired-value-section .step-label small {
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}

html.native-app #view-calculo .desired-value-section .field-label {
  margin-bottom: 12px;
  color: var(--green-950);
  font-size: 22px;
  font-weight: 850;
}

html.native-app #view-calculo .desired-value-section .money-prefix {
  color: #315f79 !important;
  font-size: 32px;
  font-weight: 900;
}

html.native-app #view-calculo .desired-value-section #calc-payment {
  color: #294f65;
  font-size: clamp(54px, 15vw, 66px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
}

html.native-app #view-calculo .desired-value-section #calc-payment::placeholder {
  color: #657a70;
  font-size: inherit;
  opacity: 1;
}

html.native-app #view-calculo .desired-value-section .money-input-help {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.45;
}

/* Superfícies azuis sempre usam conteúdo branco para manter contraste. */
html.native-app :is(.primary-button, .calculate-primary, .chips button.active, .tabs button.active),
html.native-app :is(.metric-card.primary, #access-modal .account-section-heading) {
  color: #fff;
}

html.native-app :is(.primary-button, .calculate-primary, .chips button.active, .tabs button.active) :is(span, strong, small, b, em),
html.native-app :is(.metric-card.primary, #access-modal .account-section-heading) :is(span, strong, small, b, em, p) {
  color: inherit;
}

@media (max-width: 360px) {
  html.native-app .topbar { padding-inline: 12px; }
  html.native-app .topbar-actions { gap: 4px; }
  html.native-app .topbar-actions :is(.sync-button, .icon-only-button, .top-profile) { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  html.native-app .mobile-nav button small { font-size: 9px; }
  html.native-app #access-modal .login-sheet { padding-inline: 16px; }
  html.native-app #access-modal .login-header h2 { font-size: 24px; }
  html.native-app #access-modal .login-card { align-items: flex-start; }
}

/* PIMS 1.12.4 — legibilidade e densidade dos módulos operacionais no APK. */
@media (max-width: 760px) {
  /* Cabeçalho compacto: 56dp incluindo o conteúdo, além da safe area. */
  html.native-app .topbar {
    top: 0 !important;
    min-height: calc(56px + env(safe-area-inset-top)) !important;
    height: calc(56px + env(safe-area-inset-top)) !important;
    margin-bottom: 12px;
    padding: calc(6px + env(safe-area-inset-top)) var(--mobile-page-right) 6px var(--mobile-page-x) !important;
  }
  html.native-app .topbar h1 { font-size: clamp(18px, 5.2vw, 21px); }
  html.native-app .topbar-actions :is(.sync-button, .icon-only-button, .top-profile) {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 9px;
  }
  html.native-app .topbar .avatar { width: 30px; height: 30px; }

  /* Contraste inequívoco no item selecionado da barra inferior. */
  html.native-app .mobile-nav button { color: #526159; }
  html.native-app .mobile-nav button.active,
  html.native-app .mobile-nav button.account-active {
    color: var(--green-950);
    background: var(--green-100);
  }
  html.native-app .mobile-nav button.active > .icon,
  html.native-app .mobile-nav button.account-active > .icon,
  html.native-app .mobile-nav .mobile-primary-action.active > .icon {
    color: #fff !important;
    background: var(--green-950) !important;
  }
  html.native-app .mobile-nav button.active > .icon svg,
  html.native-app .mobile-nav button.account-active > .icon svg,
  html.native-app .mobile-nav .mobile-primary-action.active > .icon svg {
    opacity: 1 !important;
    stroke: #fff !important;
    stroke-width: 2.25 !important;
  }
  html.native-app .mobile-nav button.active small,
  html.native-app .mobile-nav button.account-active small {
    color: var(--green-950);
  }

  /* Cadastro de usuários: o conteúdo central sempre recebe a rolagem. */
  html.native-app #user-modal {
    height: calc(var(--app-visible-height) - 12px) !important;
    max-height: calc(var(--app-visible-height) - 12px) !important;
  }
  html.native-app #user-modal > form {
    height: 100% !important;
    max-height: 100% !important;
  }
  html.native-app #user-modal .user-form-layout {
    min-height: 0 !important;
    flex: 1 1 0 !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--green-700) var(--green-50);
    scroll-padding: 18px 0 28px;
  }
  html.native-app #user-modal .user-form-layout::-webkit-scrollbar { width: 6px; }
  html.native-app #user-modal .user-form-layout::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--green-700); }
  html.native-app #user-modal > form > footer { border-top: 0; background: #fff; }

  /* Centro de custo pesquisável e filial operacional bloqueada em Moju. */
  html.native-app #verba-modal .relation-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 14px;
    border: 1px solid #b8cdb9;
    border-radius: 12px;
    color: var(--green-950);
    background: var(--green-50);
  }
  html.native-app #verba-modal .relation-field-label { display: block; font-weight: 800; }
  html.native-app #verba-modal .relation-search {
    width: 100%;
    height: 52px;
    min-height: 52px;
    gap: 10px;
    margin: 0;
    padding: 0 13px;
    color: var(--green-800);
    border: 1px solid #9fbba2;
    border-radius: 10px 10px 0 0;
    background: #fff;
  }
  html.native-app #verba-modal .relation-search .icon { width: 20px; height: 20px; flex: 0 0 20px; }
  html.native-app #verba-modal .relation-search input {
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  html.native-app #verba-modal #centro-custo-select {
    min-height: 52px;
    margin: -9px 0 0;
    border-color: #9fbba2;
    border-radius: 0 0 10px 10px;
    color: var(--green-950);
    font-weight: 700;
  }
  html.native-app #verba-modal .relation-selection-preview {
    display: block;
    min-width: 0;
    padding: 10px 11px;
    color: var(--green-950);
    border: 1px solid #b8cdb9;
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  html.native-app #verba-modal .relation-field > small,
  html.native-app #verba-modal .moju-branch-field > small {
    color: #4b5f6a;
    font-size: 12px;
    line-height: 1.45;
  }
  html.native-app #verba-modal .moju-branch-field input[readonly] {
    color: var(--green-950);
    border-color: #9fbba2;
    background: var(--green-50);
    font-weight: 850;
    letter-spacing: .04em;
  }

  /* Minha Conta com campos mais definidos e cores de maior contraste. */
  html.native-app #access-modal .account-sheet { color: var(--text-primary); background: #fff; }
  html.native-app #access-modal .account-identity,
  html.native-app #access-modal .account-permissions {
    border: 1px solid #b8cdb9;
    border-radius: 12px;
    background: #fff;
  }
  html.native-app #access-modal .account-identity { padding: 16px; background: var(--green-50); }
  html.native-app #access-modal .account-block-label {
    margin-bottom: 14px;
    color: var(--green-800);
    font-size: 11px;
    text-align: left;
  }
  html.native-app #access-modal .account-summary {
    align-items: center;
    flex-direction: row;
    gap: 14px;
    text-align: left;
  }
  html.native-app #access-modal .account-summary > div { align-items: flex-start; }
  html.native-app #access-modal .account-summary .avatar {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    background: var(--green-950);
    box-shadow: 0 0 0 4px #d5e8ef;
  }
  html.native-app #access-modal .account-summary .account-avatar { color: #fff !important; }
  html.native-app #access-modal .account-summary .account-avatar .icon {
    width: 30px;
    height: 30px;
    color: #fff !important;
  }
  html.native-app #access-modal .account-summary .account-avatar .icon svg { stroke: #fff !important; }
  html.native-app #access-modal .account-summary strong { color: var(--green-950); font-size: 18px; }
  html.native-app #access-modal .account-summary span { color: #34463b; font-size: 13px; }
  html.native-app #access-modal .account-summary small { color: #fff; background: var(--green-800); }
  html.native-app #access-modal .account-meta article {
    padding: 13px;
    border-color: #b8cdb9;
    border-radius: 10px;
    background: #fff;
  }
  html.native-app #access-modal .account-meta small { color: var(--green-700); font-size: 11px; }
  html.native-app #access-modal .account-meta strong { color: var(--green-950); font-size: 14px; }
  html.native-app #access-modal .account-section-heading { background: var(--green-950); }
  html.native-app #access-modal .account-section-heading > .icon { color: #fff; background: rgba(255, 255, 255, .14); }
  html.native-app #access-modal .account-section-heading :is(strong, small) { color: #fff; }
  html.native-app #access-modal .permission-pill { color: var(--green-950); border: 1px solid #b8cdb9; background: var(--green-100); }
  html.native-app #access-modal .account-sheet > footer { border-top: 0 !important; }

  /* Sincronização como módulo legível, rolável e com ações fixas. */
  html.native-app #sync-status-modal {
    height: calc(var(--app-visible-height) - 12px) !important;
    max-height: calc(var(--app-visible-height) - 12px) !important;
    border-radius: 16px;
  }
  html.native-app #sync-status-modal .sync-status-dialog {
    height: 100% !important;
    max-height: 100% !important;
    background: var(--background);
  }
  html.native-app #sync-status-modal .sync-status-dialog > header { padding: 16px; background: #fff; }
  html.native-app #sync-status-modal .sync-status-dialog > header h2 { color: var(--green-950); font-size: 21px; }
  html.native-app #sync-status-modal .sync-status-dialog > header p { color: #485a50; font-size: 13px; }
  html.native-app #sync-status-modal .sync-diagnostics-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    gap: 9px;
    padding: 12px;
    background: var(--background);
  }
  html.native-app #sync-status-modal .sync-diagnostics-grid article {
    min-height: 74px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #c5d6c7;
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
  }
  html.native-app #sync-status-modal .sync-diagnostics-grid article > div { min-width: 0; }
  html.native-app #sync-status-modal .sync-diagnostic-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 10px;
    color: #fff;
    border-radius: 10px;
    background: var(--green-800);
  }
  html.native-app #sync-status-modal .sync-diagnostics-grid small {
    color: var(--green-700);
    font-size: 11px;
    font-weight: 850;
  }
  html.native-app #sync-status-modal .sync-diagnostics-grid strong {
    display: block;
    margin-top: 4px;
    color: var(--green-950);
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
  }
  html.native-app #sync-status-modal .sync-error-card { grid-column: auto; }
  html.native-app #sync-status-modal .sync-error-card .sync-diagnostic-icon { background: #a23e34; }
  html.native-app #sync-status-modal .sync-status-dialog > footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    border-top: 0;
    background: #fff;
  }
  html.native-app #sync-status-modal .sync-status-dialog > footer button { min-height: 48px; border-radius: 10px; }

  /* Cálculo: nenhuma descrição, rótulo ou resultado fica truncado. */
  html.native-app #view-calculo :is(.step-label, .step-label > div, .confirm-header > div, .confirmation-content, .desired-value-section, .total-result, .installment-header > div) {
    min-width: 0;
    max-width: 100%;
  }
  html.native-app #view-calculo :is(.step-label strong, .step-label small, .confirmation-content > h3, .confirmation-content > p, .confirm-data span, .confirm-data strong, .daily-rate-breakdown span, .daily-rate-breakdown strong, .daily-rate-breakdown small, .total-result span, .total-result strong, .total-result small, .installment-header strong, .installment-header small, .installment-note, .report-button strong, .report-button small) {
    overflow: visible;
    max-width: 100%;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  html.native-app #view-calculo .step-label { align-items: flex-start; }
  html.native-app #view-calculo .step-label > span { flex: 0 0 34px; }
  html.native-app #view-calculo .confirm-data { grid-template-columns: minmax(0, 1fr); }
  html.native-app #view-calculo .confirm-data > div {
    min-height: 0;
    padding: 12px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  html.native-app #view-calculo .daily-rate-breakdown {
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border-radius: 10px;
  }
  html.native-app #view-calculo .daily-rate-breakdown > div {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding: 12px;
  }
  html.native-app #view-calculo .daily-rate-breakdown small { grid-column: 1 / -1; }
  html.native-app #view-calculo .calculate-primary { min-height: 54px; padding-inline: 14px; }
  html.native-app #view-calculo .calculate-primary > span:not(.icon) { min-width: 0; white-space: normal; }
  html.native-app #view-calculo .total-result-quantity > strong,
  html.native-app #view-calculo .total-result-values .result-value-card strong,
  html.native-app #view-calculo .result-difference {
    font-size: clamp(22px, 8vw, 31px);
    line-height: 1.15;
  }
}

/* PIMS 1.12.4 — autorização offline clara e totalmente clicável no login. */
html.native-app #access-modal .native-save-login {
  min-width: 0;
  min-height: 104px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas: "icon content control";
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px;
  color: var(--green-950);
  border: 1.5px solid #a9c3ae;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html.native-app #access-modal .native-save-login.offline-access-enabled {
  border-color: #6da2ba;
  background: var(--green-50);
}

html.native-app #access-modal .native-save-login:active {
  background: var(--green-100);
}

html.native-app #access-modal .native-save-login:focus-within {
  border-color: var(--green-800);
  box-shadow: 0 0 0 4px rgba(86, 143, 170, .16);
}

html.native-app #access-modal .offline-access-icon {
  grid-area: icon;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 10px;
  color: var(--green-800);
  border-radius: 11px;
  background: var(--green-100);
}

html.native-app #access-modal .native-save-content {
  grid-area: content;
  min-width: 0;
  display: block;
  grid-template-columns: none;
  gap: 0;
}

html.native-app #access-modal .native-save-content strong {
  margin: 0;
  color: var(--green-950);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

html.native-app #access-modal .native-save-content small {
  margin-top: 5px;
  padding: 0;
  color: #456052;
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

html.native-app #access-modal .offline-access-control {
  grid-area: control;
  min-width: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 5px;
}

html.native-app #access-modal .switch-modern {
  width: 52px;
  height: 30px;
  margin: 0;
}

html.native-app #access-modal .switch-modern input {
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

html.native-app #access-modal .switch-modern i {
  width: 52px;
  height: 30px;
  inset: 0;
  border: 1px solid #879b90;
  border-radius: 999px;
  background: #d7dfda;
}

html.native-app #access-modal .switch-modern i::before {
  width: 24px;
  height: 24px;
  top: 2px;
  left: 2px;
}

html.native-app #access-modal .switch-modern input:checked + i {
  border-color: var(--green-800);
  background: var(--green-800);
}

html.native-app #access-modal .switch-modern input:checked + i::before {
  transform: translateX(22px);
}

html.native-app #access-modal .offline-toggle-state {
  padding: 0;
  color: #53655b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

html.native-app #access-modal .offline-access-enabled .offline-toggle-state {
  color: var(--green-800);
}

@media (max-width: 350px) {
  html.native-app #access-modal .native-save-login {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas: "icon content" "control control";
  }

  html.native-app #access-modal .offline-access-icon {
    width: 38px;
    height: 38px;
    padding: 9px;
  }

  html.native-app #access-modal .offline-access-control {
    width: 100%;
    grid-template-columns: 52px auto;
    justify-content: end;
    align-items: center;
  }
}

/* PIMS 1.12.4 — telas e formulários sempre contidos na área segura do Android. */
html.native-app #user-modal .temporary-password-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

html.native-app #user-modal .user-password-input {
  min-height: 56px;
  height: 56px;
  margin: 0;
  padding: 0 52px 0 46px;
  border: 1.5px solid #8faa97;
  border-radius: 12px;
  background: #fff;
}

html.native-app #user-modal .user-password-input:focus-within {
  border-color: var(--green-800);
  box-shadow: 0 0 0 4px rgba(86, 143, 170, .16);
}

html.native-app #user-modal .user-password-leading-icon {
  width: 21px;
  height: 21px;
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--green-800);
  transform: translateY(-50%);
  pointer-events: none;
}

html.native-app #user-modal .user-password-input input {
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

html.native-app #user-modal .user-password-guidance {
  padding: 10px 12px;
  color: #315f79;
  border: 1px solid #bdd6e1;
  border-radius: 10px;
  background: var(--green-50);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  html.native-app .modal:not(#access-modal) {
    top: calc(var(--app-viewport-top) + env(safe-area-inset-top) + 6px) !important;
    bottom: auto !important;
    left: 50% !important;
    max-height: calc(var(--app-visible-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px) !important;
    transform: translateX(-50%) !important;
  }

  html.native-app :is(#user-modal, #sync-status-modal) {
    height: calc(var(--app-visible-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px) !important;
  }

  html.native-app dialog#access-modal {
    top: calc(var(--app-viewport-top) + env(safe-area-inset-top)) !important;
    right: auto !important;
    bottom: auto !important;
    left: env(safe-area-inset-left) !important;
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    height: calc(var(--app-visible-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: calc(var(--app-visible-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }

html.native-app #access-modal :is(.account-dialog, .login-sheet) {
    min-height: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }
}

/* Menu final: nomes sempre visíveis e estado ativo com contraste inequívoco. */
html.native-app .mobile-nav button,
html.native-app .mobile-nav .mobile-primary-action {
  color: #4b5f6a !important;
}

html.native-app .mobile-nav button small,
html.native-app .mobile-nav .mobile-primary-action small {
  display: block !important;
  visibility: visible !important;
  max-width: 100%;
  overflow: visible !important;
  color: inherit !important;
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 750;
  line-height: 1.1;
  text-overflow: clip !important;
  white-space: normal !important;
  opacity: 1 !important;
}

html.native-app .mobile-nav button.active,
html.native-app .mobile-nav button.account-active,
html.native-app .mobile-nav .mobile-primary-action.active {
  color: #fff !important;
  background: var(--green-950) !important;
}

html.native-app .mobile-nav button.active > .icon,
html.native-app .mobile-nav button.account-active > .icon,
html.native-app .mobile-nav .mobile-primary-action.active > .icon {
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
}

html.native-app .mobile-nav button.active small,
html.native-app .mobile-nav button.account-active small,
html.native-app .mobile-nav .mobile-primary-action.active small,
html.native-app .mobile-nav button.active > .icon svg,
html.native-app .mobile-nav button.account-active > .icon svg,
html.native-app .mobile-nav .mobile-primary-action.active > .icon svg {
  color: #fff !important;
  stroke: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}

/* Todo indicador numérico com fundo azul-escuro mantém o número branco. */
html.native-app .step-label > span,
html.native-app #datasul-link-form .datasul-link-picker-heading > span {
  color: #fff !important;
  background: var(--green-950) !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}

/* A confirmação de atualização mantém as duas ações legíveis na mesma linha. */
html.native-app #app-confirm-modal .confirm-dialog > footer {
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: 8px;
  padding-right: 16px;
  padding-left: 16px;
  border-top: 0 !important;
}
html.native-app #app-confirm-modal .confirm-dialog > footer > button {
  min-width: 0;
  padding-inline: 10px;
  font-size: clamp(11.5px, 3.4vw, 14px);
  white-space: nowrap !important;
  overflow-wrap: normal;
  word-break: normal;
}

/* Menu inferior padronizado: todos os itens têm a mesma caixa, fonte e ícone. */
html.native-app .mobile-nav > button {
  min-width: 0;
  min-height: 60px;
  height: 60px;
  flex: 1 1 0;
  gap: 3px;
  margin: 0;
  padding: 5px 2px;
  border-radius: 10px;
}
html.native-app .mobile-nav > button > .icon,
html.native-app .mobile-nav > button.active > .icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  padding: 5px !important;
  border-radius: 9px !important;
}
html.native-app .mobile-nav > button > .icon svg {
  width: 18px;
  height: 18px;
}
html.native-app .mobile-nav > button > small,
html.native-app .mobile-nav > button.active > small {
  min-height: 12px;
  font-size: 10px !important;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap !important;
}

/* Pesquisa de operações com altura suficiente para texto e placeholder. */
html.native-app #view-verbas .filter-panel { align-items: stretch; }
html.native-app #view-verbas .filter-panel .search-box,
html.native-app #view-verbas #filter-toggle { min-height: 54px; }
html.native-app #search-verbas {
  min-width: 0;
  height: 52px;
  min-height: 52px;
  display: block;
  flex: 1 1 auto;
  padding: 0 4px;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.3;
  box-sizing: border-box;
}
html.native-app #search-verbas::placeholder { line-height: normal; }

/* Minha Conta em blocos claros, com saída separada das ações administrativas. */
html.native-app #access-modal .account-content { gap: 12px; padding-top: 14px; }
html.native-app #access-modal .account-card-heading { margin-bottom: 16px; }
html.native-app #access-modal .account-connection-state { color: #fff; background: var(--green-800); }
html.native-app #access-modal .account-connection-state i { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .16); }
html.native-app #access-modal .account-meta { gap: 8px; margin-top: 16px; }
html.native-app #access-modal .account-meta article { min-height: 62px; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 10px; }
html.native-app #access-modal .account-meta-icon { color: #fff; background: var(--green-800); }
html.native-app #access-modal .account-actions { padding: 12px 0 2px; background: #fff; }
html.native-app #access-modal .account-sheet > .account-actions > button { min-height: 62px; grid-template-columns: 40px minmax(0, 1fr) 18px; padding: 10px 13px; }
html.native-app #access-modal .account-actions .account-action-icon { width: 40px; height: 40px; }
html.native-app #access-modal .account-actions .account-action-copy strong { font-size: 14px; }
html.native-app #access-modal .account-actions .account-action-copy small { font-size: 11px; }