/*
 * UNNI OS Mobile Excellence v1.1.0
 * Camada final, exclusivamente visual, para Portal e Staging.
 * Preserva rotas, permissões, dados, formulários e regras de autenticação.
 */

.agency-mobile-nav {
  display: none !important;
}

@media (max-width: 820px) {
  html {
    min-width: 320px;
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.unni-ui {
    width: 100%;
    min-width: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none;
  }

  body.unni-ui :where(
    main,
    header,
    section,
    article,
    nav,
    form,
    fieldset,
    div,
    span,
    label
  ) {
    min-width: 0;
  }

  body.unni-ui :where(a, button, input, select, textarea, summary) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body.unni-ui :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ) {
    width: 100%;
    max-width: 100%;
    font-size: 16px !important;
  }

  body.unni-ui :where(button, a.button, .submit, summary, select) {
    min-height: 44px;
  }

  body.unni-ui :where(h1, h2, h3, h4, p, strong, small, label, a, button) {
    overflow-wrap: break-word;
  }

  /* Cabeçalho compartilhado: marca e ações na primeira linha, contexto na segunda. */
  body.unni-ui .unni-standard-topbar {
    position: relative !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: minmax(112px, 1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "title title" !important;
    align-items: center !important;
    gap: 8px 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 10px !important;
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      max(11px, env(safe-area-inset-right, 0px))
      11px
      max(11px, env(safe-area-inset-left, 0px)) !important;
    overflow: visible !important;
    border-radius: 19px !important;
  }

  body.unni-ui .unni-standard-brand {
    grid-area: brand !important;
    display: flex !important;
    width: min(138px, 38vw) !important;
    min-width: 104px !important;
    max-width: 138px !important;
    align-items: center !important;
    align-self: center !important;
  }

  body.unni-ui .unni-standard-brand img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body.unni-ui .unni-standard-title {
    grid-area: title !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 1px 0 !important;
    border-top: 1px solid rgb(16 28 66 / 9%);
    color: var(--unni-navy-900, #080d2b) !important;
    font-size: clamp(.82rem, 3.7vw, .98rem) !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: -.018em !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
  }

  body.unni-ui .unni-standard-actions {
    grid-area: actions !important;
    display: flex !important;
    width: auto !important;
    max-width: 100%;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  body.unni-ui .unni-standard-actions > * {
    flex: 0 0 auto;
  }

  body.unni-ui .unni-standard-actions :where(
    .client-logout,
    .logout-button,
    .unni-standard-back,
    .unni-standard-action,
    .profile-chip,
    .unni-pwa-install
  ) {
    min-height: 42px !important;
    border-radius: 12px !important;
  }

  body.unni-ui .unni-standard-actions .unni-pwa-install {
    width: auto !important;
    min-width: 76px !important;
    min-height: 42px !important;
    padding-inline: 8px !important;
    gap: 5px !important;
    font-size: .64rem !important;
    white-space: nowrap !important;
  }

  body.unni-ui .unni-standard-actions .unni-pwa-install span {
    display: inline !important;
    font-size: inherit !important;
  }

  body.unni-ui .unni-standard-actions .profile-chip {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 3px !important;
  }

  body.unni-ui .unni-standard-actions .profile-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  body.unni-ui .unni-standard-actions .profile-name {
    display: none !important;
  }

  body.unni-ui .unni-standard-actions .logout-button,
  body.unni-ui .unni-standard-actions .client-logout {
    width: auto !important;
    min-width: 50px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    font-size: .67rem !important;
    white-space: nowrap !important;
  }

  body.unni-ui .unni-standard-actions .unni-standard-back,
  body.unni-ui .unni-standard-actions .unni-standard-action {
    width: auto !important;
    min-width: 42px !important;
    padding: 0 10px !important;
    font-size: .65rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  body.unni-ui .unni-standard-actions .logout-icon {
    width: 17px !important;
    height: 17px !important;
  }

  /* Cabeçalho das páginas que utilizam o shell global. */
  body.unni-ui .unni-globalbar {
    position: relative !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "identity actions"
      "center center" !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 10px !important;
    padding:
      max(9px, env(safe-area-inset-top, 0px))
      max(9px, env(safe-area-inset-right, 0px))
      9px
      max(9px, env(safe-area-inset-left, 0px)) !important;
    border-radius: 19px !important;
  }

  body.unni-ui .unni-globalbar__identity {
    grid-area: identity !important;
    gap: 7px !important;
  }

  body.unni-ui .unni-globalbar__symbol {
    width: 43px !important;
    height: 43px !important;
    flex: 0 0 43px !important;
    border-radius: 13px !important;
  }

  body.unni-ui .unni-globalbar__symbol img {
    width: 39px !important;
    height: 39px !important;
  }

  body.unni-ui .unni-globalbar__title strong {
    font-size: clamp(.88rem, 3.8vw, 1rem) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  body.unni-ui .unni-globalbar__title small {
    display: none !important;
  }

  body.unni-ui .unni-globalbar__center {
    grid-area: center !important;
    width: 100% !important;
  }

  body.unni-ui .unni-globalbar__search {
    max-width: none !important;
  }

  body.unni-ui .unni-globalbar__actions {
    grid-area: actions !important;
    display: flex !important;
    width: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  body.unni-ui .unni-globalbar__actions--with-links {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }

  body.unni-ui .unni-globalbar__action {
    max-width: 112px !important;
    min-height: 42px !important;
    padding-inline: 9px !important;
    font-size: .65rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.unni-ui .unni-globalbar__action--primary {
    border-color: #304963 !important;
    color: #fff !important;
    background: #304963 !important;
    box-shadow: 0 7px 18px rgb(23 42 67 / 14%) !important;
  }

  body.unni-ui .unni-globalbar__profile {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    padding: 3px !important;
  }

  body.unni-ui .unni-globalbar__avatar {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  body.unni-ui .unni-globalbar__logout button {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }

  body.unni-ui .unni-globalbar__logout button span {
    display: none !important;
  }

  /* Dashboard da agência. */
  body.unni-dashboard .app-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(22px, calc(14px + env(safe-area-inset-bottom, 0px)))
      max(8px, env(safe-area-inset-left, 0px)) !important;
  }

  body.unni-dashboard .content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }

  body.unni-dashboard .search-panel {
    order: 0 !important;
    padding: 10px !important;
    border-radius: 17px !important;
  }

  body.unni-dashboard .search input {
    min-height: 46px !important;
    padding-left: 42px !important;
    border-radius: 14px !important;
  }

  body.unni-dashboard .projects-panel {
    order: 1 !important;
    padding: 15px 12px !important;
    overflow: visible !important;
    border-radius: 19px !important;
  }

  body.unni-dashboard .summary-strip {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgb(255 255 255 / 13%) !important;
    border-radius: 19px !important;
  }

  body.unni-dashboard .summary-card {
    min-height: 88px !important;
    padding: 14px 13px !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body.unni-dashboard .summary-card:nth-child(odd) {
    border-right: 1px solid rgb(255 255 255 / 13%) !important;
  }

  body.unni-dashboard .summary-card:nth-child(-n + 2) {
    border-bottom: 1px solid rgb(255 255 255 / 13%) !important;
  }

  body.unni-dashboard .summary-card:nth-child(n + 3) {
    border-bottom: 0 !important;
  }

  body.unni-dashboard .summary-card strong {
    margin-top: 8px !important;
    font-size: 1.65rem !important;
  }

  body.unni-dashboard .summary-card small {
    font-size: .66rem !important;
  }

  body.unni-dashboard .tools-panel {
    order: 3 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 19px !important;
  }

  body.unni-dashboard .tools-panel > summary {
    min-height: 58px !important;
    padding: 12px 14px !important;
  }

  body.unni-dashboard .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 0 9px 9px !important;
  }

  body.unni-dashboard .tool-link {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 66px !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }

  body.unni-dashboard .tool-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  body.unni-dashboard .tool-copy strong {
    font-size: .72rem !important;
    line-height: 1.24 !important;
  }

  body.unni-dashboard .tool-copy span {
    display: none !important;
  }

  body.unni-dashboard .content > .footer {
    order: 4 !important;
  }

  body.unni-dashboard .projects-title-row {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 11px !important;
  }

  body.unni-dashboard .projects-title-row h2,
  body.unni-dashboard .dashboard-collapsible-title {
    font-size: 1.12rem !important;
    line-height: 1.12 !important;
  }

  body.unni-dashboard .project-count {
    flex: 0 0 auto;
    font-size: .69rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  body.unni-dashboard .filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.unni-dashboard .filter-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 7px 8px !important;
    border: 1px solid #d8deea !important;
    border-radius: 12px !important;
    color: #4f5c75 !important;
    background: linear-gradient(180deg, #fff, #f5f7fa) !important;
    box-shadow: 0 3px 9px rgb(28 42 69 / 5%) !important;
    font-size: clamp(.65rem, 3vw, .75rem) !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }

  body.unni-dashboard .filter-button[aria-pressed="true"] {
    border-color: #4c627c !important;
    color: #fff !important;
    background: linear-gradient(135deg, #536b85, #344b66) !important;
    box-shadow: 0 6px 15px rgb(36 56 80 / 16%) !important;
  }

  body.unni-dashboard .filters > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  body.unni-dashboard .client-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  body.unni-dashboard .client-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 40px !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "profile main menu"
      "status  status status"
      "next    next   next" !important;
    gap: 8px 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  body.unni-dashboard .client-profile {
    grid-area: profile !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    align-self: start !important;
    border-radius: 14px !important;
  }

  body.unni-dashboard .client-main {
    grid-area: main !important;
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
  }

  body.unni-dashboard .client-main h3 {
    font-size: .94rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.unni-dashboard .client-main p {
    margin-top: 4px !important;
    font-size: .69rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.unni-dashboard .client-type {
    font-size: .59rem !important;
  }

  body.unni-dashboard .status-stack {
    grid-area: status !important;
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 2px !important;
  }

  body.unni-dashboard .status-badge,
  body.unni-dashboard .dashboard-situation {
    max-width: 100%;
    min-height: 26px !important;
    padding: 5px 8px !important;
    font-size: .58rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.unni-dashboard .status-priority {
    display: inline !important;
    font-size: .62rem !important;
  }

  body.unni-dashboard .next-step {
    display: block !important;
    grid-area: next !important;
    grid-column: auto !important;
    grid-row: auto !important;
    padding-top: 9px !important;
    border-top: 1px solid var(--unni-theme-line, rgba(255, 255, 255, 0.08)) !important;
    margin-top: 2px !important;
    min-width: 0 !important;
  }

  body.unni-dashboard .next-step span {
    margin-bottom: 4px !important;
    font-size: .57rem !important;
  }

  body.unni-dashboard .next-step strong {
    font-size: .75rem !important;
    line-height: 1.35 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  body.unni-dashboard .row-actions {
    grid-area: menu !important;
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
  }

  body.unni-dashboard .row-actions .action-menu {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
  }

  body.unni-dashboard .row-actions .action-menu summary {
    width: 40px !important;
    height: 40px !important;
  }

  body.unni-dashboard .back-to-top {
    display: none !important;
  }

  /* Painel do cliente. */
  body.unni-client-dashboard .shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(22px, calc(14px + env(safe-area-inset-bottom, 0px)))
      max(8px, env(safe-area-inset-left, 0px)) !important;
  }

  body.unni-client-dashboard .os-console {
    margin-top: 0 !important;
    overflow: hidden !important;
    border-radius: 19px !important;
  }

  body.unni-client-dashboard .os-console-toolbar {
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.unni-client-dashboard .os-tabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.unni-client-dashboard .os-tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 6px 7px !important;
    border-radius: 11px !important;
    font-size: clamp(.62rem, 2.9vw, .7rem) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.unni-client-dashboard .os-panel {
    padding: 10px !important;
  }

  body.unni-client-dashboard .os-window {
    min-height: 0 !important;
    border-radius: 16px !important;
  }

  body.unni-client-dashboard .os-window-bar {
    min-height: 42px !important;
    padding-inline: 12px !important;
    font-size: .67rem !important;
  }

  body.unni-client-dashboard .os-panel .os-window-body {
    padding: 16px 12px !important;
  }

  body.unni-client-dashboard .os-project-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  body.unni-client-dashboard .os-project-head strong {
    font-size: .86rem !important;
    line-height: 1.35 !important;
  }

  body.unni-client-dashboard .os-protected {
    width: fit-content !important;
    min-height: 30px !important;
    justify-self: start !important;
  }

  body.unni-client-dashboard .os-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.unni-client-dashboard .os-metric {
    min-height: 108px !important;
    padding: 13px !important;
    border-radius: 13px !important;
  }

  body.unni-client-dashboard .os-metric:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    min-height: 90px !important;
  }

  body.unni-client-dashboard .os-metric strong {
    margin-top: 13px !important;
    font-size: .84rem !important;
    line-height: 1.3 !important;
  }

  body.unni-client-dashboard .os-next-milestone {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 12px 13px !important;
  }

  body.unni-client-dashboard .os-next-milestone strong {
    font-size: .78rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  body.unni-client-dashboard .os-update {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 11px 13px !important;
    font-size: .67rem !important;
  }

  body.unni-client-dashboard .os-delivery-grid,
  body.unni-client-dashboard .os-approval-list {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.unni-client-dashboard .os-delivery-card,
  body.unni-client-dashboard #panel-approvals .approval-item {
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  body.unni-client-dashboard #panel-approvals .approval-item {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.unni-client-dashboard #panel-approvals .material-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  body.unni-client-dashboard #panel-approvals .approval-control {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid #e0e3ed !important;
    border-left: 0 !important;
  }

  body.unni-client-dashboard #panel-approvals .approval-control-head {
    align-items: flex-start !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  body.unni-client-dashboard #panel-approvals :where(
    .approval-control select,
    .approval-save
  ) {
    width: 100% !important;
    min-height: 46px !important;
    padding-inline: 11px !important;
  }

  body.unni-client-dashboard .os-timeline {
    gap: 9px !important;
    padding-left: 23px !important;
  }

  body.unni-client-dashboard .os-timeline::before {
    left: 7px !important;
  }

  body.unni-client-dashboard .os-timeline-event {
    padding: 13px !important;
    border-radius: 13px !important;
  }

  body.unni-client-dashboard .os-timeline-event::before {
    left: -21px !important;
  }

  body.unni-client-dashboard .os-resources {
    margin-top: 10px !important;
  }

  body.unni-client-dashboard .upload-panel {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 8px 10px !important;
    padding: 14px 12px !important;
    border-radius: 17px !important;
  }

  body.unni-client-dashboard .upload-icon {
    width: 42px !important;
    height: 42px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.unni-client-dashboard .upload-panel > div:not(.upload-icon) {
    grid-column: 2 !important;
  }

  body.unni-client-dashboard .upload-panel h2 {
    margin-top: 0 !important;
    font-size: .96rem !important;
  }

  body.unni-client-dashboard .upload-panel p {
    font-size: .7rem !important;
    line-height: 1.4 !important;
  }

  body.unni-client-dashboard .upload-panel .button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 3px !important;
  }

  body.unni-client-dashboard #canais {
    padding: 15px 12px !important;
    border-radius: 17px !important;
  }

  body.unni-client-dashboard #canais .materials {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.unni-client-dashboard #canais .channel-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 9px !important;
    min-height: 82px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  body.unni-client-dashboard #canais .channel-icon {
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    border-radius: 12px !important;
  }

  body.unni-client-dashboard #canais .channel-content {
    grid-column: 2 !important;
  }

  body.unni-client-dashboard #canais .channel-content > span {
    padding-right: 0 !important;
  }

  body.unni-client-dashboard #canais .channel-card h3 {
    margin-top: 5px !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
  }

  body.unni-client-dashboard #canais .channel-card .pending {
    grid-column: 2 !important;
    margin-top: 0 !important;
  }

  body.unni-client-dashboard .footer {
    padding: 12px 4px 0 !important;
  }

  /* Logins e 2FA. */
  body.unni-auth-layout .auth-page {
    width: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(14px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px)) !important;
    gap: 10px !important;
  }

  body.unni-auth-layout .auth-topbar {
    min-height: 0 !important;
  }

  body.unni-auth-layout .auth-topbar .secure {
    display: inline-flex !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    font-size: .58rem !important;
    white-space: nowrap !important;
  }

  body.unni-auth-layout .auth-center {
    align-items: start !important;
    padding: 0 !important;
  }

  body.unni-auth-layout .auth-card {
    width: 100% !important;
    padding: 24px 17px !important;
    border-radius: 20px !important;
  }

  body.unni-auth-layout .auth-card :where(h1, h2) {
    margin-top: 9px !important;
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
    line-height: .98 !important;
    letter-spacing: -.052em !important;
  }

  body.unni-auth-layout .auth-card .intro {
    font-size: .84rem !important;
    line-height: 1.5 !important;
  }

  body.unni-auth-layout .auth-form {
    gap: 10px !important;
    margin-top: 20px !important;
  }

  body.unni-auth-layout .auth-form :where(input, button[type="submit"]) {
    min-height: 52px !important;
    border-radius: 14px !important;
  }

  body.unni-auth-layout .auth-footer {
    align-items: center !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 3px 4px !important;
    font-size: .63rem !important;
    text-align: center !important;
  }

  body.unni-auth:not(.unni-auth-layout) {
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px)) !important;
  }

  body.unni-auth:not(.unni-auth-layout) > .card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 24px 17px !important;
    border: 1px solid var(--unni-line, #e1e4ed) !important;
    border-radius: 20px !important;
  }

  body.unni-auth:not(.unni-auth-layout) > .card .logo {
    width: 118px !important;
    height: auto !important;
    margin-bottom: 18px !important;
  }

  body.unni-auth:not(.unni-auth-layout) > .card h1 {
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
  }

  body.unni-auth:not(.unni-auth-layout) > .card input {
    min-height: 56px !important;
  }

  /* Formulários e páginas administrativas. */
  body.unni-portal :where(.shell, .app-shell) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
  }

  body.unni-portal :where(.hero, .intro, .panel, .section, .step, .card) {
    max-width: 100% !important;
    padding: 16px 13px !important;
    border-radius: 18px !important;
  }

  body.unni-portal :where(
    .grid,
    .fields,
    .split,
    .panels,
    .layout,
    .services-grid,
    .custom-service-fields,
    .financial-summary,
    .totp-setup
  ) {
    grid-template-columns: 1fr !important;
  }

  body.unni-portal .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.unni-portal .actions :where(a, button, form, .button) {
    width: 100% !important;
  }

  body.unni-portal .totp-qr {
    width: min(224px, 100%) !important;
    height: auto !important;
    margin-inline: auto !important;
  }

  body.unni-ui .footer {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: center !important;
  }
}

@media (max-width: 560px) {
  body.unni-ui .unni-globalbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "identity"
      "actions"
      "center" !important;
  }

  body.unni-ui .unni-globalbar__actions,
  body.unni-ui .unni-globalbar__actions--with-links {
    grid-area: actions !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    padding-top: 8px !important;
    border-top: 1px solid rgb(16 28 66 / 9%);
  }

  body.unni-ui .unni-globalbar__center {
    grid-area: center !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  body.unni-ui .unni-globalbar__action {
    width: auto !important;
    max-width: 132px !important;
  }

  body.unni-ui .unni-globalbar__profile {
    width: auto !important;
    min-width: 42px !important;
    max-width: 112px !important;
    flex-basis: auto !important;
    gap: 5px !important;
    padding-right: 7px !important;
  }

  body.unni-ui .unni-globalbar__name {
    display: block !important;
    max-width: 58px !important;
    overflow: hidden !important;
    font-size: .61rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.unni-ui .unni-globalbar__logout button {
    width: auto !important;
    min-width: 58px !important;
    gap: 5px !important;
    padding-inline: 8px !important;
    font-size: .64rem !important;
  }

  body.unni-ui .unni-globalbar__logout button span {
    display: inline !important;
  }
}

@media (max-width: 390px) {
  body.unni-ui .unni-standard-topbar {
    grid-template-columns: minmax(108px, auto) minmax(0, 1fr) !important;
    grid-template-areas:
      "brand title"
      "actions actions" !important;
    gap: 8px 9px !important;
    padding-inline: 9px !important;
  }

  body.unni-ui .unni-standard-brand {
    width: min(132px, 40vw) !important;
    min-width: 108px !important;
  }

  body.unni-ui .unni-standard-title {
    align-self: center !important;
    padding: 0 !important;
    border-top: 0 !important;
    font-size: clamp(.73rem, 3.35vw, .84rem) !important;
    line-height: 1.2 !important;
    text-align: right !important;
  }

  body.unni-ui .unni-standard-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgb(16 28 66 / 9%);
  }

  body.unni-ui .unni-standard-actions .profile-chip {
    width: auto !important;
    min-width: 40px !important;
    max-width: 108px !important;
    padding-right: 7px !important;
    gap: 5px !important;
  }

  body.unni-ui .unni-standard-actions .profile-name {
    display: block !important;
    max-width: 56px !important;
    overflow: hidden !important;
    font-size: .61rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.unni-ui .unni-standard-actions .logout-button,
  body.unni-ui .unni-standard-actions .client-logout {
    min-width: 46px !important;
    padding-inline: 7px !important;
    font-size: .62rem !important;
  }

  body.unni-ui .unni-standard-actions .unni-pwa-install {
    min-width: 76px !important;
    font-size: .62rem !important;
  }

  body.unni-dashboard .tools-grid {
    grid-template-columns: 1fr !important;
  }

  body.unni-dashboard .tool-copy span {
    display: block !important;
    font-size: .62rem !important;
  }

  body.unni-client-dashboard .os-metric-grid {
    grid-template-columns: 1fr !important;
  }

  body.unni-client-dashboard .os-metric,
  body.unni-client-dashboard .os-metric:last-child:nth-child(odd) {
    grid-column: auto !important;
    min-height: 92px !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (min-width: 600px) {
  body.unni-auth-layout .auth-page {
    padding-block: 8px !important;
  }

  body.unni-auth-layout .auth-card {
    padding-block: 18px !important;
  }

  body.unni-auth-layout .auth-card :where(h1, h2) {
    font-size: 2.15rem !important;
  }
}

@supports (-webkit-touch-callout: none) {
  body.unni-ui {
    min-height: -webkit-fill-available;
  }

  body.unni-ui :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ) {
    font-size: 16px !important;
  }
}

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