/* Level Phone · capa responsive global 1.0
   Se carga de último para unificar navegación, tacto y lectura móvil sin
   alterar la composición de escritorio de cada módulo. */

.mobile-nav-toggle,
.mobile-nav-backdrop,
.mobile-app-nav {
  display: none;
}

.pwa-install-button,
.pwa-login-install {
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(244, 196, 0, .52);
  border-radius: 10px;
  background: rgba(244, 196, 0, .12);
  color: #f4c400;
  font: 900 13px/1 system-ui, sans-serif;
  cursor: pointer;
}

.pwa-install-button:not([hidden]),
.pwa-login-install:not([hidden]) {
  display: inline-flex;
}

.pwa-login-install {
  width: 100%;
  margin-top: 12px;
}

.pwa-guide[hidden] {
  display: none;
}

.pwa-guide {
  position: fixed;
  z-index: 20000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.pwa-guide-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(5, 6, 8, .72);
  backdrop-filter: blur(4px);
}

.pwa-guide-sheet {
  position: relative;
  width: min(100%, 430px);
  padding: 25px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
}

.pwa-guide-handle {
  display: none;
}

.pwa-guide-mark {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 17px;
  place-items: center;
  border: 2px solid var(--yellow);
  border-radius: 16px;
  background: #101114;
  color: #fff;
  font-size: 26px;
  font-weight: 1000;
  letter-spacing: -2px;
}

.pwa-guide-mark span {
  color: var(--yellow);
}

.pwa-guide-sheet small {
  color: var(--yellow-deep);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.pwa-guide-sheet h2 {
  margin: 4px 0 16px;
  font-size: 24px;
}

.pwa-guide-sheet ol {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.45;
}

.pwa-guide-sheet .btn {
  width: 100%;
  min-height: 48px;
}

.pwa-connection {
  position: fixed;
  z-index: 19000;
  right: 16px;
  bottom: 16px;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border: 1px solid #188652;
  border-radius: 12px;
  background: #123b29;
  color: #7dffba;
  font-size: 13px;
  font-weight: 850;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}

.pwa-connection.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pwa-connection.is-offline {
  border-color: #8a6d00;
  background: #342b08;
  color: #ffe36b;
}

@media (max-width: 1024px) {
  body:not(.pos-focus-page) .content {
    min-width: 0;
    max-width: none;
    padding: 20px 18px 28px;
  }

  .page-head h1 {
    font-size: clamp(25px, 4vw, 30px);
    line-height: 1.08;
  }

  .panel-head,
  .section-title,
  .catalog-section-head {
    flex-wrap: wrap;
  }

  .table-wrap {
    max-width: 100%;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
}

@media (max-width: 760px) {
  :root {
    --mobile-topbar-height: 62px;
    --mobile-gutter: 12px;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.mobile-nav-open {
    overflow: hidden;
    touch-action: none;
  }

  body:not(.pos-focus-page) .topbar {
    z-index: 220;
    height: var(--mobile-topbar-height);
    gap: 8px;
    padding: 0 var(--mobile-gutter);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
  }

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

  .mobile-nav-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 1px solid #3d4047;
    border-radius: 11px;
    background: #222429;
    color: #fff;
    font: 900 20px/1 inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-toggle[aria-expanded="true"] {
    border-color: var(--yellow);
    color: var(--yellow);
    background: #2a281f;
  }

  body:not(.pos-focus-page) .brand {
    min-width: 0;
    gap: 3px;
    font-size: 17px;
    letter-spacing: -.55px;
    white-space: nowrap;
  }

  body:not(.pos-focus-page) .brand small,
  body:not(.pos-focus-page) .top-actions .context-chip,
  body:not(.pos-focus-page) .top-actions .user-badge,
  body:not(.pos-focus-page) .top-actions .theme-text {
    display: none;
  }

  body:not(.pos-focus-page) .top-actions .pwa-install-text {
    display: none;
  }

  body:not(.pos-focus-page) .top-actions {
    flex: 0 0 auto;
    gap: 7px;
  }

  body:not(.pos-focus-page) .theme-toggle,
  body:not(.pos-focus-page) .pwa-install-button,
  body:not(.pos-focus-page) .top-actions .btn-outline {
    min-width: 42px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  body:not(.pos-focus-page) .layout {
    display: block;
    min-height: calc(100dvh - var(--mobile-topbar-height));
  }

  body:not(.pos-focus-page) .sidebar {
    position: fixed;
    z-index: 230;
    top: var(--mobile-topbar-height);
    right: auto;
    bottom: 0;
    left: 0;
    display: block !important;
    width: min(88vw, 340px);
    max-width: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 13px 11px calc(22px + env(safe-area-inset-bottom));
    background: #151619;
    box-shadow: 18px 0 50px rgba(0, 0, 0, .42);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .22s cubic-bezier(.22, .61, .36, 1), visibility .22s ease;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  body.mobile-nav-open:not(.pos-focus-page) .sidebar {
    transform: translateX(0);
    visibility: visible;
  }

  body:not(.pos-focus-page) .sidebar .nav-item {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    gap: 13px;
    margin: 3px 0;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 17px;
  }

  /* El POS tenía una excepción móvil que volvía a mostrar el glifo antiguo. */
  body.pos-focus-page .sidebar .nav-item {
    font-size: 0 !important;
  }

  body:not(.pos-focus-page) .sidebar .nav-item span {
    display: inline !important;
    max-width: none !important;
    overflow: visible !important;
    color: inherit;
    font-size: 14px;
    opacity: 1 !important;
    transform: none !important;
  }

  body:not(.pos-focus-page) .sidebar .nav-item.active {
    box-shadow: 0 5px 16px rgba(215, 171, 0, .18);
  }

  .mobile-nav-backdrop {
    position: fixed;
    z-index: 225;
    inset: var(--mobile-topbar-height) 0 0;
    display: block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: rgba(4, 5, 7, .68);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    backdrop-filter: blur(2px);
    cursor: pointer;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    opacity: 1;
    visibility: visible;
  }

  body:not(.pos-focus-page) .content {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 18px var(--mobile-gutter) calc(92px + env(safe-area-inset-bottom));
  }

  .staging-environment-badge {
    right: 8px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    text-align: center;
    letter-spacing: .045em !important;
    pointer-events: none;
  }

  .page-head {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
  }

  .page-head > div:first-child,
  .page-head h1,
  .page-head p {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .page-head h1 {
    margin-bottom: 6px;
    font-size: clamp(24px, 8vw, 30px);
  }

  .page-head p {
    font-size: 13px;
    line-height: 1.5;
  }

  .action-row,
  .form-actions {
    width: 100%;
    align-items: stretch;
    gap: 8px;
  }

  .action-row > .btn,
  .action-row > a,
  .form-actions > .btn,
  .form-actions > a {
    min-height: 44px;
    flex: 1 1 140px;
  }

  .btn,
  button,
  [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  body:not(.pos-focus-page) .btn {
    min-height: 44px;
    padding: 10px 13px;
  }

  body:not(.pos-focus-page) input:not([type="checkbox"]):not([type="radio"]),
  body:not(.pos-focus-page) select,
  body:not(.pos-focus-page) textarea {
    min-width: 0;
    min-height: 46px;
    max-width: 100%;
    font-size: 16px !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }

  .form-grid,
  .cards,
  .quick-actions,
  .split-cards,
  .dashboard-5,
  .client-metrics,
  .collection-metrics,
  .report-metrics,
  .purchase-metrics,
  .purchase-detail-cards,
  .receiver-detail-cards,
  .receiver-metrics,
  .catalog-metrics,
  .catalog-history-metrics,
  .customer-metrics,
  .customer-import-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cards,
  .quick-actions,
  .split-cards {
    gap: 10px;
  }

  .card,
  .quick-card {
    padding: 16px;
    border-radius: 13px;
  }

  .metric-value {
    font-size: clamp(24px, 8vw, 30px);
  }

  .panel {
    width: 100%;
    max-width: 100%;
    margin-bottom: 14px;
    border-radius: 13px;
  }

  .panel-head {
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }

  .panel-head > * {
    min-width: 0;
    max-width: 100%;
  }

  .panel-head .action-row,
  .panel-head form,
  .panel-head .searchbar {
    width: 100%;
  }

  .panel-head h2,
  .panel-head h3 {
    overflow-wrap: anywhere;
  }

  .searchbar,
  .catalog-search-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    flex-direction: column;
  }

  .searchbar input,
  .searchbar select,
  .searchbar .btn,
  .catalog-search-row > .btn {
    width: 100%;
    min-width: 0;
  }

  .catalog-filter-panel,
  .report-filter-grid,
  .purchase-report-filter-grid,
  .control-list-filter,
  .receiver-tax-grid,
  .xml-import-grid,
  .sequence-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .catalog-filter-panel,
  .control-list-filter {
    padding: 12px;
  }

  .catalog-filter-actions,
  .catalog-selection-toolbar {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .catalog-selection-toolbar {
    padding: 11px;
  }

  .catalog-selection-toolbar .btn,
  .catalog-filter-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px;
  }

  .catalog-selection-toolbar > span {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .catalog-inventory-suggestions,
  .customer-search-suggestions {
    right: 0 !important;
    left: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(52dvh, 430px);
  }

  .catalog-inventory-suggestions > button,
  .customer-search-suggestions > button {
    min-height: 58px;
  }

  .warehouse-selector,
  .notice-share,
  .receiver-mail-strip,
  .collection-toolbar,
  .customer-toolbar,
  .customer-install-alert,
  .receiver-review,
  .purchase-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .warehouse-selector-control,
  .receiver-classify-form,
  .customer-toolbar .searchbar {
    width: 100%;
    min-width: 0;
  }

  .timeline-item {
    grid-template-columns: 14px minmax(0, 1fr);
  }

  .timeline-right {
    grid-column: 2;
    text-align: left;
  }

  .pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .pagination > span {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
  }

  .pagination .btn {
    width: 100%;
  }

  /* Las tablas de consulta se convierten dinámicamente en fichas. */
  .table-wrap:has(> table.mobile-card-table) {
    overflow: visible;
  }

  table.mobile-card-table,
  table.mobile-card-table tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  table.mobile-card-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }

  table.mobile-card-table tbody {
    padding: 10px;
  }

  table.mobile-card-table tbody tr {
    display: block;
    overflow: hidden;
    margin: 0 0 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 5px 16px rgba(16, 20, 28, .06);
  }

  table.mobile-card-table tbody tr:last-child {
    margin-bottom: 0;
  }

  table.mobile-card-table tbody td {
    display: grid;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: left !important;
  }

  table.mobile-card-table tbody td:last-child {
    border-bottom: 0;
  }

  table.mobile-card-table tbody td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  table.mobile-card-table tbody td[data-mobile-label=""]::before,
  table.mobile-card-table tbody td.empty::before {
    display: none;
  }

  table.mobile-card-table tbody td.empty,
  table.mobile-card-table tbody td[colspan] {
    display: block;
    padding: 22px 14px !important;
    text-align: center !important;
  }

  table.mobile-card-table .catalog-select-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 48px;
  }

  table.mobile-card-table .catalog-select-cell::before {
    margin-right: auto;
  }

  table.mobile-card-table .catalog-product-identity,
  table.mobile-card-table .product-stock-cell,
  table.mobile-card-table .stock-list,
  table.mobile-card-table .stock-entry,
  table.mobile-card-table .ledger-client {
    min-width: 0;
    max-width: none;
  }

  table.mobile-card-table .stock-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
  }

  table.mobile-card-table .stock-entry small {
    grid-column: 1 / -1;
  }

  html[data-theme="dark"] table.mobile-card-table tbody tr {
    background: #1b1d21;
  }

  /* Las tablas de captura conservan desplazamiento, pero muestran una pista. */
  .table-wrap.mobile-scroll-table {
    position: relative;
    padding-bottom: 4px;
  }

  .table-wrap.mobile-scroll-table::before {
    display: block;
    padding: 8px 11px;
    border-bottom: 1px solid var(--border);
    background: rgba(244, 196, 0, .09);
    color: var(--muted);
    content: "Deslice horizontalmente para ver todas las columnas ↔";
    font-size: 10px;
    font-weight: 800;
  }

  .catalog-editor-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .catalog-editor-modal-close {
    top: calc(8px + env(safe-area-inset-top));
    right: 8px;
    width: 44px;
    height: 44px;
  }

  .catalog-modal-document .content {
    padding-right: 10px;
    padding-left: 10px;
  }

  .catalog-modal-document .catalog-save-bar,
  .cash-count-actions {
    padding-bottom: calc(11px + env(safe-area-inset-bottom));
  }

  .cash-count-dialog,
  .pos-price-modal-card,
  .pos-payment-modal-card {
    max-width: 100vw;
    max-height: 100dvh;
  }

  .receipt-letter {
    padding: 18px 14px;
  }

  .receipt-header,
  .receipt-info-grid,
  .receipt-footer {
    grid-template-columns: 1fr !important;
    flex-direction: column;
  }

  .receipt-fiscal-id {
    max-width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .receipt-info-grid > div {
    border-right: 0;
    border-bottom: 1px solid #e5e6e8;
    padding: 12px 0;
  }

  .receipt-summary {
    width: 100%;
    max-width: none;
  }

  .receiver-detail-sheet {
    margin-right: calc(-1 * var(--mobile-gutter));
    margin-left: calc(-1 * var(--mobile-gutter));
    border-right: 0;
    border-left: 0;
  }

  /* POS: mantiene su flujo especializado, pero evita recortes en teléfonos. */
  .pos-focus-page .content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-right: 8px !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    padding-left: 8px !important;
  }

  .pos-focus-page .pos-linear-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pos-focus-page .pos-sale-summary {
    position: static;
  }

  .pos-focus-page .pos-lines-scroll,
  .pos-focus-page .control-rapid-lines {
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .pos-focus-page .pos-product-results {
    max-height: min(45dvh, 330px);
  }

  .pos-focus-page .pos-price-modal,
  .pos-focus-page .pos-payment-modal {
    padding: 8px;
  }

  .pos-focus-page .pos-price-modal-card,
  .pos-focus-page .pos-payment-modal-card {
    overflow-y: auto;
    border-radius: 13px;
  }

  .mobile-app-nav {
    position: fixed;
    z-index: 210;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: calc(64px + env(safe-area-inset-bottom));
    align-items: flex-start;
    justify-content: space-around;
    gap: 2px;
    padding: 6px 6px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid #303238;
    background: rgba(18, 19, 22, .97);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .26);
    backdrop-filter: blur(16px);
  }

  .mobile-app-nav-item {
    --mobile-icon: none;
    display: grid;
    min-width: 54px;
    min-height: 52px;
    flex: 1 1 20%;
    grid-template-rows: 25px auto;
    place-items: center;
    gap: 2px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #aeb2bb;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-app-nav-item > span {
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--mobile-icon) center / 22px 22px no-repeat;
    mask: var(--mobile-icon) center / 22px 22px no-repeat;
  }

  .mobile-app-nav-item small {
    color: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
  }

  .mobile-app-nav-item.active {
    background: rgba(244, 196, 0, .14);
    color: var(--yellow);
  }

  .mobile-app-nav-item[data-app-icon="home"] {
    --mobile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  }

  .mobile-app-nav-item[data-app-icon="sale"] {
    --mobile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
  }

  .mobile-app-nav-item[data-app-icon="inventory"] {
    --mobile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='m4 7 8-4 8 4-8 4zM4 7v10l8 4 8-4V7M12 11v10'/%3E%3C/svg%3E");
  }

  .mobile-app-nav-item[data-app-icon="clients"] {
    --mobile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20v-2a6 6 0 0 1 12 0v2M16 5a3 3 0 0 1 0 6M17 14a5 5 0 0 1 4 5'/%3E%3C/svg%3E");
  }

  .mobile-app-nav-item[data-app-icon="more"] {
    --mobile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E");
  }

  .pwa-guide {
    align-items: end;
    padding: 0;
  }

  .pwa-guide-sheet {
    width: 100%;
    max-width: none;
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
  }

  .pwa-guide-handle {
    display: block;
    width: 42px;
    height: 5px;
    margin: 0 auto 15px;
    border-radius: 999px;
    background: var(--border);
  }

  .pwa-guide-mark {
    width: 56px;
    height: 56px;
    margin-bottom: 13px;
    border-radius: 14px;
    font-size: 23px;
  }

  .pwa-guide-sheet h2 {
    font-size: 22px;
  }

  .pwa-connection {
    right: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: 10px;
    max-width: none;
    text-align: center;
  }

  .login-page {
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 430px) {
  :root {
    --mobile-gutter: 10px;
  }

  body:not(.pos-focus-page) .brand {
    font-size: 15px;
  }

  body:not(.pos-focus-page) .top-actions .btn-outline {
    padding-right: 9px;
    padding-left: 9px;
    font-size: 12px;
  }

  body:not(.pos-focus-page) .pwa-install-button:not([hidden]) + .theme-toggle,
  .pos-focus-page .pwa-install-button:not([hidden]) + .theme-toggle {
    display: none !important;
  }

  .catalog-filter-actions,
  .catalog-selection-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  table.mobile-card-table tbody {
    padding: 8px;
  }

  table.mobile-card-table tbody td {
    grid-template-columns: minmax(78px, .38fr) minmax(0, 1fr);
    gap: 9px;
    padding: 9px 10px !important;
  }

  .receiver-document-card,
  .customer-directory-card,
  .control-branch-card {
    border-radius: 13px;
  }

  .pos-focus-topbar .top-actions .btn-outline {
    padding-right: 9px !important;
    padding-left: 9px !important;
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-toggle,
  .mobile-nav-backdrop,
  body:not(.pos-focus-page) .sidebar {
    transition: none !important;
  }
}