/* Unified mobile layer. Loaded last to supersede historical responsive rules. */
@media (max-width: 760px) {
  :root {
    --ios-orange: #ff5a00;
    --ios-ink: #111827;
    --ios-muted: #667085;
    --ios-line: #e5e7eb;
    --ios-surface: #ffffff;
    --ios-canvas: #f5f6f8;
    --ios-success: #14804a;
    --ios-danger: #c9352b;
    --ios-radius: 16px;
    --ios-safe-top: env(safe-area-inset-top, 0px);
    --ios-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }

  html {
    background: var(--ios-canvas);
    overflow-x: hidden;
  }

  body {
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: var(--ios-canvas) !important;
    color: var(--ios-ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
  }

  body.app-authenticated {
    padding-top: calc(60px + var(--ios-safe-top)) !important;
    padding-bottom: calc(74px + var(--ios-safe-bottom)) !important;
  }

  body.sidebar-open {
    overflow: hidden !important;
  }

  /* App chrome */
  .mobile-app-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 10020 !important;
    height: calc(60px + var(--ios-safe-top)) !important;
    padding: var(--ios-safe-top) 12px 0 !important;
    display: none !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(180%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  }

  body.app-authenticated .mobile-app-header {
    display: grid !important;
  }

  .mobile-brand {
    justify-self: center !important;
    color: #111827 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  .mobile-brand span {
    color: var(--ios-orange) !important;
  }

  .mobile-menu-btn,
  .mobile-bell {
    position: fixed !important;
    top: calc(var(--ios-safe-top) + 8px) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: none !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #1f2937 !important;
    box-shadow: none !important;
    font-size: 0 !important;
  }

  body.app-authenticated .mobile-menu-btn,
  body.app-authenticated .mobile-bell {
    display: grid !important;
  }

  .mobile-menu-btn {
    left: 12px !important;
    z-index: 10030 !important;
  }

  .mobile-bell {
    position: relative !important;
    inset: auto !important;
    justify-self: end !important;
    z-index: 1 !important;
  }

  .mobile-menu-btn .btn-icon,
  .mobile-bell .btn-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
  }

  .mobile-bell span {
    position: absolute !important;
    top: 2px !important;
    right: 1px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    display: grid !important;
    place-items: center !important;
    border: 2px solid #fff !important;
    border-radius: 999px !important;
    background: var(--ios-orange) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }

  .mobile-bell span[hidden] {
    display: none !important;
  }

  .notification-center {
    display: none !important;
  }

  .notification-panel {
    position: fixed !important;
    top: calc(66px + var(--ios-safe-top)) !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - 92px - var(--ios-safe-top) - var(--ios-safe-bottom)) !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 18px 60px rgba(17, 24, 39, 0.18) !important;
  }

  .app {
    min-height: calc(100dvh - 60px - var(--ios-safe-top)) !important;
    background: var(--ios-canvas) !important;
  }

  .app main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 14px 24px !important;
    overflow: visible !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 10100 !important;
    width: min(88vw, 340px) !important;
    height: 100dvh !important;
    padding: calc(18px + var(--ios-safe-top)) 14px calc(14px + var(--ios-safe-bottom)) !important;
    display: flex !important;
    transform: translateX(-105%) !important;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1) !important;
    border-right: 0 !important;
    border-radius: 0 24px 24px 0 !important;
    background: #fff !important;
    box-shadow: 18px 0 60px rgba(17, 24, 39, 0.18) !important;
    overflow: hidden !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  .mobile-sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10090 !important;
    background: rgba(17, 24, 39, 0.28) !important;
    backdrop-filter: blur(2px) !important;
  }

  .mobile-sidebar-overlay.active,
  .mobile-sidebar-overlay.open {
    display: block !important;
  }

  .sidebar-brand {
    min-height: 46px !important;
    padding: 0 10px 12px !important;
  }

  .sidebar-brand img {
    width: auto !important;
    height: 38px !important;
    max-width: 150px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .sidebar-nav {
    min-height: 0 !important;
    padding: 4px 0 14px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .sidebar-group {
    margin: 0 0 18px !important;
  }

  .sidebar-group-label {
    padding: 0 12px 7px !important;
    color: #98a2b3 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
  }

  .menu-item,
  button.menu-item {
    min-height: 46px !important;
    margin: 2px 0 !important;
    padding: 0 12px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    color: #344054 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .menu-item.active,
  .menu-item:hover {
    background: #fff1e9 !important;
    color: #e64f00 !important;
  }

  .menu-count-badge {
    margin-left: auto !important;
  }

  .sidebar-account {
    flex: 0 0 auto !important;
    min-height: 64px !important;
    margin-top: auto !important;
    padding: 9px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 15px !important;
    background: #fff !important;
  }

  .sidebar-account-copy span {
    max-width: 170px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sidebar-account .logout {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
  }

  /* Bottom navigation */
  .mobile-bottom-nav {
    position: fixed !important;
    z-index: 10010 !important;
    inset: auto 0 0 0 !important;
    height: calc(68px + var(--ios-safe-bottom)) !important;
    padding: 6px 12px var(--ios-safe-bottom) !important;
    display: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 4px !important;
    border-top: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(180%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  }

  body.app-authenticated .mobile-bottom-nav {
    display: grid !important;
  }

  .mobile-bottom-nav button {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 5px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #667085 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .mobile-bottom-nav button.active {
    background: #fff1e9 !important;
    color: var(--ios-orange) !important;
  }

  .mobile-bottom-nav svg.btn-icon {
    width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
  }

  .mobile-sign-fab {
    display: none !important;
  }

  /* Page hierarchy */
  .section,
  .section.active {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .topbar,
  .topbar.dashboard-hero,
  .orders-page-header,
  .reservations-page-header,
  .contacts-page-header,
  .renditions-page-header {
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 4px 2px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .topbar h1,
  .reservations-page-header h1,
  .contacts-page-header h1,
  .renditions-page-header h1 {
    margin: 0 !important;
    color: var(--ios-ink) !important;
    font-size: 28px !important;
    line-height: 1.12 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
  }

  .subtitle,
  .topbar .subtitle,
  .reservations-page-header p,
  .contacts-page-header p,
  .renditions-page-header p {
    margin-top: 5px !important;
    color: var(--ios-muted) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .dashboard-actions,
  .orders-header-actions,
  .reservations-page-actions,
  .contacts-page-actions,
  .renditions-header-actions,
  .audit-actions {
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .dashboard-actions > *,
  .orders-header-actions > *,
  .reservations-page-actions > *,
  .contacts-page-actions > *,
  .renditions-header-actions > * {
    flex: 1 1 auto !important;
  }

  .company-pill,
  .status-pill {
    max-width: 100% !important;
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  .card,
  .orders-page-surface,
  .generated-order-form,
  .dashboard-toolbar,
  .reservations-card,
  .contacts-surface,
  .renditions-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 16px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: var(--ios-radius) !important;
    background: var(--ios-surface) !important;
    box-shadow: 0 4px 18px rgba(17, 24, 39, 0.045) !important;
  }

  .card + .card {
    margin-top: 14px !important;
  }

  .card h2,
  .preview-header h2,
  .reservations-card h2 {
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  .card p,
  .preview-header p {
    color: var(--ios-muted) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .preview-header,
  .orders-filter-heading,
  .users-directory-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* Form controls */
  .field,
  .reservation-field,
  .orders-sort-control,
  .commercial-ledger-modal label {
    min-width: 0 !important;
  }

  .field label,
  .reservation-field label,
  .orders-sort-control small,
  .commercial-ledger-modal label > span {
    margin: 0 0 7px !important;
    color: #475467 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
  }

  input,
  select,
  textarea,
  .search-combobox-input,
  .orders-date-control input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 0 14px !important;
    border: 1px solid #d8dde5 !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    color: var(--ios-ink) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
  }

  textarea {
    min-height: 112px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    resize: vertical !important;
  }

  input:focus,
  select:focus,
  textarea:focus,
  .search-combobox-input:focus {
    border-color: var(--ios-orange) !important;
    outline: 3px solid rgba(255, 90, 0, 0.12) !important;
    outline-offset: 0 !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    accent-color: var(--ios-orange) !important;
  }

  .btn,
  .table-btn,
  .users-btn,
  button.reservations-tab,
  .orders-view-btn,
  .combined-pdf-btn {
    min-height: 44px !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .btn:not(.secondary):not(.logout),
  .users-btn.primary {
    border-color: var(--ios-orange) !important;
    background: var(--ios-orange) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .btn.secondary,
  .table-btn,
  .users-btn.secondary {
    border: 1px solid #d8dde5 !important;
    background: #fff !important;
    color: #344054 !important;
    box-shadow: none !important;
  }

  .btn.full {
    width: 100% !important;
  }

  .btn-icon,
  button svg {
    flex: 0 0 auto !important;
  }

  /* Grids become intentionally linear */
  .grid,
  .form-grid,
  .generated-meta-grid,
  .generated-items-grid,
  .orders-filter-grid,
  .dashboard-toolbar,
  .dashboard-grid,
  .dashboard-kpis,
  .reservation-fields-grid,
  .reservation-history-filters,
  .reservation-template-editor,
  .commercial-ledger-form-grid,
  .admin-grid,
  .admin-form-grid,
  .users-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 13px !important;
  }

  .dashboard-kpis,
  .reservation-stats-grid,
  .reservation-summary-grid,
  .contacts-stats-grid,
  .renditions-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dashboard-kpis > *,
  .reservation-stat,
  .reservation-summary-item,
  .contacts-stat,
  .renditions-stat {
    min-width: 0 !important;
    min-height: 112px !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .dashboard-kpis strong,
  .reservation-stat strong,
  .reservation-summary-item strong,
  .contacts-stat strong,
  .renditions-stat strong {
    font-size: 21px !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  /* Tabs and filters */
  .dashboard-tabs,
  .reservations-tabs,
  .user-area-tabs,
  .admin-tabs {
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 4px !important;
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 13px !important;
    background: #eceff3 !important;
    scrollbar-width: none !important;
  }

  .dashboard-tabs::-webkit-scrollbar,
  .reservations-tabs::-webkit-scrollbar,
  .user-area-tabs::-webkit-scrollbar,
  .admin-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .dashboard-tab,
  .reservations-tab,
  .user-area-tabs button,
  .admin-tabs button {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
  }

  .dashboard-tab.active,
  .reservations-tab.active,
  .user-area-tabs button.active,
  .admin-tabs button.active {
    background: #fff !important;
    color: var(--ios-ink) !important;
    box-shadow: 0 1px 4px rgba(17, 24, 39, 0.08) !important;
  }

  .orders-filter-panel,
  .reservations-history-toolbar,
  .contacts-toolbar,
  .renditions-filter-panel {
    margin: -2px -2px 14px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--ios-line) !important;
    background: transparent !important;
  }

  .orders-filter-heading-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: end !important;
  }

  .orders-filter-search {
    grid-column: 1 !important;
  }

  /* Mobile table cards */
  .orders-table-scroll,
  .contacts-table-wrap,
  .users-table-wrap,
  .reservations-table-wrap,
  .renditions-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .section table.ios-mobile-table,
  .section table.ios-mobile-table tbody {
    width: 100% !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
  }

  .section table.ios-mobile-table thead {
    display: none !important;
  }

  .section table.ios-mobile-table tbody tr {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 8px 14px !important;
    display: block !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 3px 14px rgba(17, 24, 39, 0.04) !important;
  }

  .section table.ios-mobile-table tbody tr:last-child {
    margin-bottom: 0 !important;
  }

  .section table.ios-mobile-table tbody td {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 9px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(92px, 35%) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #eef0f3 !important;
    color: #344054 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  .section table.ios-mobile-table tbody td:last-child {
    border-bottom: 0 !important;
  }

  .section table.ios-mobile-table tbody td::before {
    content: attr(data-label) !important;
    align-self: start !important;
    color: #7a8492 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  .section table.ios-mobile-table tbody td[data-label="Orden"],
  .section table.ios-mobile-table tbody td[data-label="Número"],
  .section table.ios-mobile-table tbody td[data-label="Usuario"],
  .section table.ios-mobile-table tbody td[data-label="Reserva"] {
    padding-top: 11px !important;
    color: var(--ios-ink) !important;
    font-weight: 800 !important;
  }

  .section table.ios-mobile-table tbody td[data-label="Acción"],
  .section table.ios-mobile-table tbody td[data-label="Acciones"],
  .section table.ios-mobile-table tbody td[data-label="Ver"] {
    grid-template-columns: 1fr !important;
    padding-top: 12px !important;
    text-align: left !important;
  }

  .section table.ios-mobile-table tbody td[data-label="Acción"]::before,
  .section table.ios-mobile-table tbody td[data-label="Acciones"]::before,
  .section table.ios-mobile-table tbody td[data-label="Ver"]::before {
    display: none !important;
  }

  .section table.ios-mobile-table tbody td[data-label="Acción"] > *,
  .section table.ios-mobile-table tbody td[data-label="Acciones"] > *,
  .section table.ios-mobile-table tbody td[data-label="Ver"] > * {
    width: 100% !important;
  }

  .section table.ios-mobile-table .ios-mobile-table-message {
    display: block !important;
    padding: 20px 4px !important;
    text-align: center !important;
  }

  .section table.ios-mobile-table .ios-mobile-table-message::before {
    display: none !important;
  }

  .orders-row-actions-inline,
  .reservation-actions-cell {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .orders-row-actions-inline > *,
  .reservation-actions-cell > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  .orders-pagination,
  .reservations-pagination,
  .contacts-pagination,
  .renditions-pagination {
    width: 100% !important;
    min-height: 58px !important;
    margin: 2px 0 0 !important;
    padding: 12px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    border-top: 1px solid var(--ios-line) !important;
  }

  .orders-pagination-actions,
  .reservations-pagination-actions,
  .contacts-pagination-actions,
  .renditions-pagination-actions {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .orders-pagination-actions button:last-child,
  .reservations-pagination-actions button:last-child,
  .contacts-pagination-actions button:last-child,
  .renditions-pagination-actions button:last-child {
    justify-self: stretch !important;
  }

  /* Order creation */
  .generated-order-form {
    padding: 16px !important;
  }

  .generated-progress,
  .order-progress-card {
    margin: 14px 0 !important;
    padding: 13px !important;
    border-radius: 13px !important;
  }

  .generated-progress .progress-steps,
  .progress-steps {
    display: none !important;
  }

  .generated-item-row,
  .item-row {
    position: relative !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 14px !important;
    background: #fafbfc !important;
  }

  .generated-totals,
  .totals-card {
    width: 100% !important;
    position: static !important;
  }

  .upload-area {
    min-height: 150px !important;
    padding: 18px !important;
    border-radius: 14px !important;
  }

  /* Contacts */
  .contacts-alphabet {
    width: 100% !important;
    padding: 6px 2px !important;
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .contacts-alphabet::-webkit-scrollbar {
    display: none !important;
  }

  .contacts-alphabet button {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  .contacts-toolbar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
  }

  .contacts-toolbar .contacts-search,
  .contacts-toolbar .field:first-child {
    grid-column: 1 / -1 !important;
  }

  /* Reservations */
  .reservations-shell {
    width: 100% !important;
    max-width: none !important;
  }

  .reservations-tabs {
    position: sticky !important;
    top: calc(66px + var(--ios-safe-top)) !important;
    z-index: 30 !important;
  }

  .reservation-form-section {
    margin: 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid var(--ios-line) !important;
  }

  .reservation-form-section:first-child {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .reservation-actions {
    position: sticky !important;
    bottom: calc(74px + var(--ios-safe-bottom)) !important;
    z-index: 20 !important;
    margin: 18px -16px -16px !important;
    padding: 12px 16px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    border-top: 1px solid var(--ios-line) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
  }

  /* Admin */
  .admin-panel,
  .admin-only,
  .users-directory {
    min-width: 0 !important;
  }

  .admin-users-board,
  .users-directory {
    overflow: visible !important;
  }

  .user-area-tabs {
    position: static !important;
  }

  /* Modals become iOS sheets */
  .modal,
  .users-modal,
  .commercial-ledger-modal,
  .renditions-detail-modal,
  .review-modal,
  .contact-modal,
  .calendar-event-modal {
    align-items: flex-end !important;
    padding: 0 !important;
    background: rgba(17, 24, 39, 0.32) !important;
  }

  .modal-card,
  .users-modal-card,
  .commercial-ledger-modal-card,
  .renditions-detail-sheet,
  .contact-modal-card,
  .calendar-event-sheet {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(94dvh - var(--ios-safe-top)) !important;
    margin: 0 !important;
    padding: 18px 16px calc(18px + var(--ios-safe-bottom)) !important;
    border: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -18px 60px rgba(17, 24, 39, 0.18) !important;
    overflow-y: auto !important;
  }

  .review-modal {
    padding: 0 !important;
  }

  .review-shell {
    width: 100% !important;
    height: calc(100dvh - var(--ios-safe-top)) !important;
    max-width: none !important;
    margin-top: var(--ios-safe-top) !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  .review-top {
    min-height: 62px !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    border-bottom: 1px solid var(--ios-line) !important;
  }

  .review-top h1 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .review-top .subtitle {
    display: none !important;
  }

  .review-actions {
    display: flex !important;
    gap: 6px !important;
  }

  .review-actions .btn {
    min-height: 40px !important;
    padding: 0 11px !important;
  }

  .review-content {
    height: calc(100dvh - 62px - var(--ios-safe-top)) !important;
    display: block !important;
    overflow-y: auto !important;
  }

  .review-pdf {
    width: 100% !important;
    min-height: 68dvh !important;
    height: 68dvh !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .review-document-viewer,
  .review-document-viewer iframe,
  .review-document-viewer object,
  .review-document-viewer embed {
    width: 100% !important;
    height: 100% !important;
    min-height: 68dvh !important;
    border: 0 !important;
  }

  .review-side {
    width: 100% !important;
    padding: 18px 14px calc(90px + var(--ios-safe-bottom)) !important;
    border: 0 !important;
    background: #fff !important;
  }

  /* Login */
  .login-screen {
    min-height: 100dvh !important;
    padding: calc(28px + var(--ios-safe-top)) 18px calc(28px + var(--ios-safe-bottom)) !important;
    align-items: center !important;
    background: #fff !important;
  }

  .login-card {
    width: 100% !important;
    max-width: 430px !important;
    padding: 28px 22px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 16px 48px rgba(17, 24, 39, 0.08) !important;
  }

  .login-card .brand {
    font-size: 42px !important;
    line-height: 1 !important;
  }

  .login-card p {
    color: var(--ios-muted) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* Keep content stable and readable */
  img,
  canvas,
  iframe,
  object,
  embed {
    max-width: 100% !important;
  }

  .pill,
  .orders-status-badge,
  .orders-payment-badge,
  .reservation-conformation-badge {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .toast-stack {
    top: calc(68px + var(--ios-safe-top)) !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
  }

  .toast {
    width: 100% !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 390px) {
  .dashboard-kpis,
  .reservation-stats-grid,
  .reservation-summary-grid,
  .contacts-stats-grid,
  .renditions-stats-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .orders-filter-heading-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .orders-row-actions-inline,
  .reservation-actions-cell {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile product system v4.2: expanded filters and native select legibility. */
@media (max-width: 760px) {
  body.mobile-ios-body .orders-filter-panel select,
  body.mobile-ios-body .orders-filter-panel select option {
    color: #101828 !important;
    -webkit-text-fill-color: #101828 !important;
    font-size: 15px !important;
    opacity: 1 !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-filter-heading {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 12px 10px !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-filter-heading > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-filter-heading > div:first-child strong {
    display: block !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .ios-filter-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-filter-heading-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 9px !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-sort-control {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-sort-control select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    padding-right: 34px !important;
    text-overflow: ellipsis !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded #clearOrderFiltersBtn {
    width: auto !important;
    min-width: 112px !important;
    min-height: 44px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-filter-heading-actions {
    grid-template-columns: minmax(0, 1fr) 110px !important;
  }
}

/* Reservations history v4.4: final cascade guard. */
@media (max-width: 760px) {
  body.mobile-ios-body #reservationsSection .reservations-history-surface {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e4e8ed !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .055) !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-head {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 18px 18px !important;
    border-bottom: 1px solid #edf0f3 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-head h2 {
    margin: 4px 0 0 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-head p {
    margin: 7px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important;
    gap: 11px 9px !important;
    align-items: end !important;
    border-bottom: 1px solid #edf0f3 !important;
    background: #fafbfc !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-search {
    grid-column: 1 / -1 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters .field {
    display: flex !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters label {
    margin: 0 !important;
    color: #475467 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters input,
  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    border: 1px solid #dfe3e8 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #182230 !important;
    -webkit-text-fill-color: #182230 !important;
    font-size: 14px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-refresh-btn {
    display: inline-flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: end !important;
    justify-self: end !important;
    border-radius: 9px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 14px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-bottom: 1px solid #edf0f3 !important;
    background: #fff !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item {
    min-width: 0 !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 15px 10px !important;
    border: 0 !important;
    border-right: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item:last-child {
    border-right: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item span {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item strong {
    margin-top: 5px !important;
    font-size: 23px !important;
    line-height: 1 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface > .orders-table-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f7f8fa !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table,
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table thead {
    display: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody tr {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 15px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 13px 14px !important;
    overflow: hidden !important;
    border: 1px solid #e4e8ed !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(16, 24, 40, .035) !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow: hidden !important;
    border: 0 !important;
    color: #344054 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td::before {
    display: block !important;
    margin: 0 !important;
    color: #8a94a3 !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(1),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(2),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(3),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(4),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(7),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(8) {
    grid-column: 1 / -1 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell strong,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-client-cell strong,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell small,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-client-cell small,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-property-cell {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-owner-cell {
    width: 100% !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-actions-cell {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-actions-cell .table-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-delete-btn {
    width: 42px !important;
    justify-self: end !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface > .pagination {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    border-top: 1px solid #edf0f3 !important;
    background: #fff !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservations-page-info {
    width: 100% !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservations-page-actions {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservations-page-actions .table-btn {
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
  }
}

/* Reservas / Historial v4.2: debe permanecer al final de la cascada. */
@media (max-width: 760px) {
  body.mobile-ios-body #reservationsSection .reservations-history-surface {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e3e7ec !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .05) !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-head {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 18px 17px !important;
    border-bottom: 1px solid #edf0f3 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important;
    gap: 9px !important;
    border-bottom: 1px solid #edf0f3 !important;
    background: #fafbfc !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-search {
    grid-column: 1 / -1 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters .field {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters input,
  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    color: #101828 !important;
    -webkit-text-fill-color: #101828 !important;
    font-size: 13px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-refresh-btn {
    grid-column: 3 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    align-self: end !important;
    padding: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-grid {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-bottom: 1px solid #edf0f3 !important;
    background: #fff !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item {
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 15px 8px !important;
    border: 0 !important;
    border-right: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item:last-child {
    border-right: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface > .orders-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
    border: 0 !important;
    background: #f7f8fa !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table,
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table thead {
    display: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody tr {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 15px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 13px 12px !important;
    overflow: hidden !important;
    border: 1px solid #e5e9ee !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .04) !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    color: #344054 !important;
    font-size: 13px !important;
    white-space: normal !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td::before {
    display: block !important;
    margin-bottom: 5px !important;
    color: #8a94a3 !important;
    content: attr(data-label) !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(1),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(2),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(3),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(4),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(7),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(8) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell strong,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-client-cell strong,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell small,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-client-cell small,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-property-cell,
  body.mobile-ios-body #reservationsSection .reservation-owner-cell,
  body.mobile-ios-body #reservationsSection .reservation-owner-cell > span:last-child {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-actions-cell {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-actions-cell .table-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface > .pagination {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    border-top: 1px solid #edf0f3 !important;
    background: #fafbfc !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservations-page-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Reservas / Historial v4.1: guard final contra estilos mobile globales posteriores. */
@media (max-width: 760px) {
  body.mobile-ios-body #reservationsSection .reservations-history-surface {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e3e7ec !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .05) !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-head {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 18px 17px !important;
    border-bottom: 1px solid #edf0f3 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-head h2 {
    margin: 3px 0 0 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-head p {
    margin: 7px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    border-bottom: 1px solid #edf0f3 !important;
    background: #fafbfc !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-search {
    grid-column: 1 / -1 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters .field {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters label {
    margin: 0 !important;
    font-size: 10px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters input,
  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    color: #101828 !important;
    -webkit-text-fill-color: #101828 !important;
    font-size: 13px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-refresh-btn {
    grid-column: 3 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    align-self: end !important;
    justify-self: stretch !important;
    padding: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-bottom: 1px solid #edf0f3 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item {
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 15px 10px !important;
    border: 0 !important;
    border-right: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item:first-child {
    padding-left: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item span {
    overflow: hidden !important;
    font-size: 9px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item strong {
    margin-top: 6px !important;
    font-size: 22px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface > .orders-table-scroll {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
    border: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table,
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table thead {
    display: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody {
    display: grid !important;
    gap: 10px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 13px 12px !important;
    width: 100% !important;
    padding: 15px !important;
    overflow: hidden !important;
    border: 1px solid #e5e9ee !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .04) !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    border: 0 !important;
    color: #344054 !important;
    font-size: 13px !important;
    white-space: normal !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td::before {
    display: block !important;
    margin-bottom: 5px !important;
    color: #8a94a3 !important;
    content: attr(data-label) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(1),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(2),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(3),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(4),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(7),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(8) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell strong,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-client-cell strong,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell small,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-client-cell small,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-property-cell {
    width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell strong {
    color: #f45a24 !important;
    font-size: 15px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell small,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-client-cell small {
    margin-top: 4px !important;
    color: #7a8492 !important;
    font-size: 11px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-owner-cell,
  body.mobile-ios-body #reservationsSection .reservation-owner-cell > span:last-child {
    width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-actions-cell {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-actions-cell .table-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface > .pagination {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    border-top: 1px solid #edf0f3 !important;
    background: #fafbfc !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservations-page-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservations-page-actions .table-btn {
    width: 100% !important;
    min-height: 40px !important;
  }
}

/* Reservas / Historial v4: experiencia mobile propia, sin tabla encogida. */
@media (max-width: 760px) {
  body.mobile-ios-body #reservationsSection .reservations-history-surface {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e3e7ec !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .05) !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-head {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 18px 17px !important;
    border-bottom: 1px solid #edf0f3 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-head h2 {
    margin: 3px 0 0 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-head p {
    margin: 7px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    border-bottom: 1px solid #edf0f3 !important;
    background: #fafbfc !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-search {
    grid-column: 1 / -1 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters .field {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters label {
    margin: 0 !important;
    font-size: 10px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters input,
  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-history-filters select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-refresh-btn {
    grid-column: 3 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    align-self: end !important;
    justify-self: stretch !important;
    padding: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-bottom: 1px solid #edf0f3 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item {
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 15px 10px !important;
    border: 0 !important;
    border-right: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item:first-child {
    padding-left: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item span {
    overflow: hidden !important;
    font-size: 9px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservation-summary-item strong {
    margin-top: 6px !important;
    font-size: 22px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface > .orders-table-scroll {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
    border: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table,
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table thead {
    display: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody {
    display: grid !important;
    gap: 10px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 13px 12px !important;
    width: 100% !important;
    padding: 15px !important;
    overflow: hidden !important;
    border: 1px solid #e5e9ee !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(16, 24, 40, .04) !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    border: 0 !important;
    color: #344054 !important;
    font-size: 13px !important;
    white-space: normal !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td::before {
    display: block !important;
    margin-bottom: 5px !important;
    color: #8a94a3 !important;
    content: attr(data-label) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(1),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(2),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(3),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(4),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(7),
  body.mobile-ios-body #reservationsSection .reservations-history-table tbody td:nth-child(8) {
    grid-column: 1 / -1 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell strong,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-client-cell strong,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell small,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-client-cell small,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-property-cell {
    width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell strong {
    color: #f45a24 !important;
    font-size: 15px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-main-cell small,
  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-client-cell small {
    margin-top: 4px !important;
    color: #7a8492 !important;
    font-size: 11px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-owner-cell {
    width: 100% !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-owner-cell > span:last-child {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-actions-cell {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-actions-cell .table-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-table .reservation-delete-btn {
    width: 100% !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface > .pagination {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    border-top: 1px solid #edf0f3 !important;
    background: #fafbfc !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservations-page-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-history-surface .reservations-page-actions .table-btn {
    width: 100% !important;
    min-height: 40px !important;
  }
}

/* Reservations mobile product surface v6. */
@media (max-width: 760px) {
  body.mobile-ios-body #reservationsSection {
    --reservation-mobile-ink: #101828;
    --reservation-mobile-muted: #667085;
    --reservation-mobile-line: #e4e7ec;
    --reservation-mobile-soft: #f7f8fa;
    --reservation-mobile-orange: #ff5a00;
  }

  body.mobile-ios-body #reservationsSection .reservations-shell {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-page-header {
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 2px 2px 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-heading-copy {
    display: block !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-eyebrow {
    margin-bottom: 7px !important;
    color: #d94d00 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .06em !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-page-header h1 {
    font-size: 30px !important;
    line-height: 1.08 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-page-header .subtitle {
    max-width: 330px !important;
    margin-top: 7px !important;
    color: var(--reservation-mobile-muted) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-header-context {
    display: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-tabs {
    position: sticky !important;
    top: calc(var(--ios-safe-top) + 59px) !important;
    z-index: 24 !important;
    width: calc(100% + 28px) !important;
    max-width: none !important;
    min-height: 51px !important;
    margin: 0 -14px 14px !important;
    padding: 0 14px !important;
    display: flex !important;
    gap: 22px !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(228, 231, 236, .7) !important;
    border-bottom: 1px solid var(--reservation-mobile-line) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: none !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-tabs::-webkit-scrollbar {
    display: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-tab {
    position: relative !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 50px !important;
    padding: 0 1px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-tab.active {
    color: #d94d00 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-tab::after {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: 2px !important;
    background: transparent !important;
    content: "" !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-tab.active::after {
    background: var(--reservation-mobile-orange) !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-tab-icon,
  body.mobile-ios-body #reservationsSection .reservations-tab-icon svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-panel {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-create-card,
  body.mobile-ios-body #reservationsSection .reservations-history-surface,
  body.mobile-ios-body #reservationsSection .reservations-list-surface,
  body.mobile-ios-body #reservationsSection .reservations-stats-surface,
  body.mobile-ios-body #reservationsSection .reservations-templates-surface {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 16px 16px !important;
    border: 1px solid var(--reservation-mobile-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .035) !important;
    overflow: hidden !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-surface-head,
  body.mobile-ios-body #reservationsSection .commercial-ledger-header {
    width: calc(100% + 32px) !important;
    min-height: 93px !important;
    margin: 0 -16px !important;
    padding: 18px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-bottom: 1px solid var(--reservation-mobile-line) !important;
    background: #fff !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-surface-kicker {
    margin-bottom: 6px !important;
    color: #d94d00 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-surface-head h2,
  body.mobile-ios-body #reservationsSection .commercial-ledger-header h2,
  body.mobile-ios-body #reservationsSection .reservations-stats-surface h2 {
    margin: 0 0 4px !important;
    color: var(--reservation-mobile-ink) !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-surface-head p,
  body.mobile-ios-body #reservationsSection .commercial-ledger-header p {
    max-width: 310px !important;
    color: var(--reservation-mobile-muted) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-new-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservations-new-btn::before {
    font-size: 22px !important;
    line-height: 1 !important;
    content: "+" !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-primary-fields,
  body.mobile-ios-body #reservationsSection .reservations-templates-surface > .layout {
    width: calc(100% + 32px) !important;
    margin: 0 -16px !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    border-bottom: 1px solid var(--reservation-mobile-line) !important;
    background: var(--reservation-mobile-soft) !important;
  }

  body.mobile-ios-body #reservationsSection .field,
  body.mobile-ios-body #reservationsSection .reservation-field {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-ios-body #reservationsSection .field > label,
  body.mobile-ios-body #reservationsSection .field-label {
    margin-bottom: 7px !important;
    color: #475467 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  body.mobile-ios-body #reservationsSection input,
  body.mobile-ios-body #reservationsSection select,
  body.mobile-ios-body #reservationsSection textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    border: 1px solid #d8dde5 !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    color: #182230 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  body.mobile-ios-body #reservationsSection textarea {
    min-height: 116px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-form-sections > .hint {
    margin: 16px 0 0 !important;
    padding: 22px 16px !important;
    border: 1px dashed #d8dde5 !important;
    border-radius: 14px !important;
    background: #f9fafb !important;
    color: var(--reservation-mobile-muted) !important;
    font-size: 13px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-form-section {
    padding: 22px 0 24px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-form-section + .reservation-form-section {
    border-top: 1px solid #eaecf0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-form-section h3 {
    margin: 0 0 16px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--reservation-mobile-ink) !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-form-section h3::before {
    position: static !important;
    width: 27px !important;
    height: 27px !important;
    flex: 0 0 27px !important;
    border-radius: 50% !important;
    background: #fff1e8 !important;
    color: #d94d00 !important;
    font-size: 10px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-fields-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 13px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-repeatable-row {
    width: 100% !important;
    grid-template-columns: 30px minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    align-items: start !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-repeatable-index {
    width: 30px !important;
    height: 30px !important;
    margin-top: 9px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-repeatable-remove {
    width: 42px !important;
    height: 42px !important;
    margin-top: 3px !important;
    border-radius: 11px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-actions {
    width: calc(100% + 32px) !important;
    min-height: 0 !important;
    margin: 0 -16px -16px !important;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
    border-top: 1px solid var(--reservation-mobile-line) !important;
    background: #fafbfc !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 12px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-actions .btn.secondary {
    order: 2 !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-status {
    order: 3 !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-history-filters,
  body.mobile-ios-body #reservationsSection .reservation-filter-panel {
    width: calc(100% + 32px) !important;
    margin: 0 -16px !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    background: var(--reservation-mobile-soft) !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-refresh-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 11px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-refresh-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-summary-grid,
  body.mobile-ios-body #reservationsSection .reservation-stats-grid {
    width: calc(100% + 32px) !important;
    min-height: 84px !important;
    margin: 0 -16px !important;
    padding: 0 8px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--reservation-mobile-line) !important;
    background: #fff !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-summary-item,
  body.mobile-ios-body #reservationsSection .reservation-stat {
    min-width: 0 !important;
    min-height: 84px !important;
    padding: 15px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-summary-item + .reservation-summary-item,
  body.mobile-ios-body #reservationsSection .reservation-stat + .reservation-stat {
    border-left: 1px solid #eaecf0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-summary-item span,
  body.mobile-ios-body #reservationsSection .reservation-stat span {
    color: #7a8492 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    letter-spacing: .025em !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-summary-item strong,
  body.mobile-ios-body #reservationsSection .reservation-stat strong {
    margin-top: 6px !important;
    color: var(--reservation-mobile-ink) !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-stats-grid + .orders-table-scroll,
  body.mobile-ios-body #reservationsSection .reservation-summary-grid + .orders-table-scroll,
  body.mobile-ios-body #reservationsSection .orders-table-scroll {
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin: 0 -16px !important;
    padding: 14px 16px !important;
    overflow: visible !important;
    background: #f7f8fa !important;
  }

  body.mobile-ios-body #reservationsSection table.ios-mobile-table {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    border: 0 !important;
  }

  body.mobile-ios-body #reservationsSection table.ios-mobile-table tbody {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.mobile-ios-body #reservationsSection table.ios-mobile-table tbody tr {
    padding: 15px !important;
    border: 1px solid #e2e6eb !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .025) !important;
  }

  body.mobile-ios-body #reservationsSection table.ios-mobile-table tbody td {
    color: #344054 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body.mobile-ios-body #reservationsSection table.ios-mobile-table tbody td::before {
    color: #98a2b3 !important;
    font-size: 9px !important;
  }

  body.mobile-ios-body #reservationsSection table.ios-mobile-table tbody td.ios-cell-acciones,
  body.mobile-ios-body #reservationsSection table.ios-mobile-table tbody td.actions {
    margin-top: 3px !important;
    padding-top: 12px !important;
    border-top: 1px solid #eaecf0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-actions-cell,
  body.mobile-ios-body #reservationsSection .table-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
    gap: 8px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-actions-cell > *,
  body.mobile-ios-body #reservationsSection .table-actions > * {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 11px !important;
  }

  body.mobile-ios-body #reservationsSection .pagination,
  body.mobile-ios-body #reservationsSection .reservations-pagination {
    width: calc(100% + 32px) !important;
    min-height: 62px !important;
    margin: 0 -16px -16px !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-top: 1px solid var(--reservation-mobile-line) !important;
    background: #fff !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-conformation-tabs {
    width: calc(100% + 32px) !important;
    min-height: 52px !important;
    margin: 0 -16px !important;
    padding: 0 16px !important;
    display: flex !important;
    gap: 22px !important;
    overflow-x: auto !important;
    border-bottom: 1px solid var(--reservation-mobile-line) !important;
    background: #fff !important;
    scrollbar-width: none !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-conformation-tabs > button {
    min-width: max-content !important;
    min-height: 51px !important;
    padding: 0 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  body.mobile-ios-body #reservationsSection .commercial-ledger-header .reservations-new-btn {
    align-self: center !important;
    flex: 0 0 44px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-template-editor {
    width: 100% !important;
    margin-top: 18px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-editor-toolbar {
    width: 100% !important;
    min-height: 48px !important;
    padding: 7px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-rich-editor {
    width: 100% !important;
    min-height: 460px !important;
    padding: 24px 18px !important;
    border-radius: 0 0 12px 12px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-field-manager,
  body.mobile-ios-body #reservationsSection .reservation-field-builder {
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    border: 1px solid var(--reservation-mobile-line) !important;
    border-radius: 14px !important;
    background: #f9fafb !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-template-footer-actions {
    width: calc(100% + 32px) !important;
    min-height: 0 !important;
    margin: 20px -16px -16px !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    background: #fafbfc !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-template-footer-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 12px !important;
  }

  body.mobile-ios-body #reservationsSection .commercial-ledger-modal-card {
    border-radius: 22px 22px 0 0 !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-colleague-toggle {
    min-height: 60px !important;
    padding: 12px !important;
    border-radius: 13px !important;
  }
}

@media (max-width: 390px) {
  body.mobile-ios-body #reservationsSection .reservation-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-summary-item {
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-summary-item strong {
    font-size: 19px !important;
  }

  body.mobile-ios-body #reservationsSection .reservation-summary-item span {
    font-size: 8px !important;
  }
}

/* Mobile product system v4: compact iOS navigation and progressive disclosure. */
.ios-filter-toggle {
  display: none;
}

@media (max-width: 760px) {
  body.mobile-ios-body {
    --ios-page-pad: 14px;
    --ios-card-radius: 18px;
    --ios-control-radius: 13px;
    background: #f4f5f7 !important;
    color: #101828 !important;
    -webkit-font-smoothing: antialiased !important;
  }

  body.app-authenticated.mobile-ios-body .app main {
    padding: 14px var(--ios-page-pad) 24px !important;
  }

  /* Every module starts with the same native page hierarchy. */
  .topbar,
  .topbar.dashboard-hero,
  .orders-page-header,
  .reservations-page-header,
  .contacts-page-header,
  .renditions-page-header,
  .calendar-page-header,
  .ai-page-header {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 2px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .topbar > div,
  .orders-page-header > div,
  .reservations-page-header > div,
  .contacts-page-header > div,
  .renditions-page-header > div,
  .calendar-page-header > div,
  .ai-page-header > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .topbar h1,
  .orders-page-header h1,
  .reservations-page-header h1,
  .contacts-page-header h1,
  .renditions-page-header h1,
  .calendar-page-header h1,
  .ai-page-header h1 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    color: #101828 !important;
    font-size: 27px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-wrap: pretty !important;
  }

  .subtitle,
  .topbar .subtitle,
  .orders-page-header .subtitle,
  .reservations-page-header p,
  .contacts-page-header p,
  .renditions-page-header p,
  .calendar-page-header p,
  .ai-page-header p {
    width: 100% !important;
    margin: 4px 0 0 !important;
    color: #667085 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .dashboard-actions,
  .orders-header-actions,
  .orders-page-actions,
  .reservations-page-actions,
  .contacts-page-actions,
  .renditions-header-actions,
  .calendar-header-actions,
  .audit-actions {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .dashboard-actions > *,
  .orders-header-actions > *,
  .orders-page-actions > *,
  .reservations-page-actions > *,
  .contacts-page-actions > *,
  .renditions-header-actions > *,
  .calendar-header-actions > *,
  .audit-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
  }

  /* Search stays available; secondary filters open only when requested. */
  .orders-filter-panel {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 12px !important;
    display: block !important;
    border: 1px solid #e4e7ec !important;
    border-radius: var(--ios-card-radius) !important;
    background: #fff !important;
  }

  .orders-filter-heading {
    width: 100% !important;
    margin: 0 0 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .orders-filter-heading > div:first-child {
    min-width: 0 !important;
  }

  .orders-filter-heading > div:first-child > :first-child {
    display: none !important;
  }

  .orders-filter-heading h2,
  .orders-filter-heading h3,
  .orders-filter-heading strong {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
  }

  .ios-filter-toggle {
    min-width: 94px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    border: 1px solid #d9dde5 !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
  }

  .ios-filter-toggle svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }

  .ios-filter-toggle[aria-expanded="true"] {
    border-color: rgba(255, 90, 0, .34) !important;
    background: #fff4ee !important;
    color: #e94f00 !important;
  }

  .orders-filter-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .orders-filter-grid > .field,
  .orders-filter-search {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
  }

  .orders-filter-panel:not(.ios-filters-expanded) .orders-filter-heading-actions,
  .orders-filter-panel:not(.ios-filters-expanded) .orders-filter-grid > .field:not(.orders-filter-search) {
    display: none !important;
  }

  .orders-filter-panel.ios-filters-expanded .orders-filter-heading-actions {
    width: 100% !important;
    margin: 0 0 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .orders-filter-panel.ios-filters-expanded .orders-filter-heading-actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .orders-filter-panel input,
  .orders-filter-panel select {
    min-height: 46px !important;
  }

  /* Operational surfaces should not feel like a desktop card inside the page. */
  .orders-page-surface,
  .reservations-shell,
  .reservations-history-surface,
  .reservations-list-surface,
  .contacts-directory,
  .contacts-surface,
  .renditions-surface {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .orders-table-scroll,
  .contacts-table-wrap,
  .users-table-wrap,
  .reservations-table-wrap,
  .renditions-table-wrap,
  .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .section table.ios-mobile-table tbody {
    width: 100% !important;
    display: grid !important;
    gap: 10px !important;
  }

  .section table.ios-mobile-table tbody tr {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    border: 1px solid #e4e7ec !important;
    border-radius: var(--ios-card-radius) !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03) !important;
    overflow: visible !important;
  }

  .section table.ios-mobile-table tbody td {
    width: calc(50% - 6px) !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    border: 0 !important;
    background: transparent !important;
    color: #344054 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  .section table.ios-mobile-table tbody td::before {
    position: static !important;
    width: auto !important;
    content: attr(data-label) !important;
    color: #98a2b3 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-orden,
  .section table.ios-mobile-table tbody td.ios-cell-numero,
  .section table.ios-mobile-table tbody td.ios-cell-reserva,
  .section table.ios-mobile-table tbody td.ios-cell-usuario,
  .section table.ios-mobile-table tbody td.ios-cell-apellido-y-nombre,
  .section table.ios-mobile-table tbody td.ios-cell-nombre-razon-social,
  .section table.ios-mobile-table tbody td.ios-cell-proveedor,
  .section table.ios-mobile-table tbody td.ios-cell-cliente,
  .section table.ios-mobile-table tbody td.ios-cell-inmueble,
  .section table.ios-mobile-table tbody td.ios-cell-direccion,
  .section table.ios-mobile-table tbody td.ios-cell-concepto,
  .section table.ios-mobile-table tbody td.ios-cell-descripcion,
  .section table.ios-mobile-table tbody td.ios-cell-email,
  .section table.ios-mobile-table tbody td.ios-cell-acciones,
  .section table.ios-mobile-table tbody td.ios-cell-accion {
    width: 100% !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-orden,
  .section table.ios-mobile-table tbody td.ios-cell-numero,
  .section table.ios-mobile-table tbody td.ios-cell-reserva,
  .section table.ios-mobile-table tbody td.ios-cell-usuario,
  .section table.ios-mobile-table tbody td.ios-cell-apellido-y-nombre,
  .section table.ios-mobile-table tbody td.ios-cell-nombre-razon-social {
    color: #101828 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-orden::before,
  .section table.ios-mobile-table tbody td.ios-cell-numero::before,
  .section table.ios-mobile-table tbody td.ios-cell-reserva::before,
  .section table.ios-mobile-table tbody td.ios-cell-usuario::before,
  .section table.ios-mobile-table tbody td.ios-cell-apellido-y-nombre::before,
  .section table.ios-mobile-table tbody td.ios-cell-nombre-razon-social::before,
  .section table.ios-mobile-table tbody td.ios-cell-acciones::before,
  .section table.ios-mobile-table tbody td.ios-cell-accion::before {
    display: none !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-acciones,
  .section table.ios-mobile-table tbody td.ios-cell-accion {
    margin-top: 3px !important;
    padding-top: 12px !important;
    border-top: 1px solid #eef0f3 !important;
  }

  .orders-row-actions-inline,
  .reservation-actions-cell {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px 46px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .orders-row-actions-inline > *,
  .reservation-actions-cell > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
  }

  .pagination,
  .orders-pagination,
  .reservation-pagination,
  .contacts-pagination {
    width: 100% !important;
    min-height: 52px !important;
    margin: 10px 0 0 !important;
    padding: 9px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-top: 1px solid #e4e7ec !important;
    background: transparent !important;
  }

  /* Forms use one calm column and never inherit desktop widths. */
  .generated-order-form,
  .reservation-create-card,
  .calendar-shell,
  .ai-shell,
  .users-shell,
  .admin-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .generated-order-form .form-grid,
  .generated-order-form .generated-order-grid,
  .reservation-form-grid,
  .reservation-form-sections,
  .users-form-grid,
  .calendar-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .generated-order-form > section,
  .generated-order-form > .card,
  .generated-order-form .order-form-section,
  .generated-order-form .generated-items-section,
  .generated-order-form .attachments-section,
  .reservation-form-section {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
    border: 1px solid #e4e7ec !important;
    border-radius: var(--ios-card-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .generated-item-row,
  .generated-order-item,
  .order-item-row {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    border: 1px solid #e4e7ec !important;
    border-radius: 15px !important;
    background: #f8f9fb !important;
  }

  .generated-item-row > *,
  .generated-order-item > *,
  .order-item-row > * {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
  }

  .order-totals,
  .generated-order-totals,
  .totals-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    border-radius: var(--ios-card-radius) !important;
  }

  /* Dense desktop dashboards become short, swipeable summaries. */
  .dashboard-kpis,
  .dashboard-metrics,
  .reservation-stats-grid,
  .reservation-summary-grid,
  .contacts-stats-grid,
  .renditions-stats-grid,
  .admin-summary-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dashboard-metric-card,
  .dashboard-kpi,
  .reservation-stat-card,
  .contacts-stat-card,
  .renditions-stat-card,
  .admin-summary-card {
    min-width: 0 !important;
    min-height: 108px !important;
    padding: 14px !important;
    border: 1px solid #e4e7ec !important;
    border-radius: var(--ios-card-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .dashboard-tabs,
  .reservations-tabs,
  .admin-tabs,
  .user-area-tabs {
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  .contacts-toolbar,
  .reservation-history-filters,
  .reservation-filter-panel,
  .renditions-filter-panel,
  .calendar-toolbar {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    border: 1px solid #e4e7ec !important;
    border-radius: var(--ios-card-radius) !important;
    background: #fff !important;
  }

  .contacts-toolbar > *,
  .reservation-history-filters > *,
  .reservation-filter-panel > *,
  .renditions-filter-panel > *,
  .calendar-toolbar > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Sheets and dialogs behave like native bottom sheets. */
  .modal-card,
  .users-modal-card,
  .commercial-ledger-modal-card,
  .renditions-detail-sheet {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(94dvh - var(--ios-safe-top)) !important;
    padding: 18px 16px calc(18px + var(--ios-safe-bottom)) !important;
    border-radius: 24px 24px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 390px) {
  body.mobile-ios-body {
    --ios-page-pad: 12px;
  }

  .dashboard-kpis,
  .dashboard-metrics,
  .reservation-stats-grid,
  .reservation-summary-grid,
  .contacts-stats-grid,
  .renditions-stats-grid,
  .admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-metric-card,
  .dashboard-kpi,
  .reservation-stat-card,
  .contacts-stat-card,
  .renditions-stat-card,
  .admin-summary-card {
    min-height: 102px !important;
    padding: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .mobile-sidebar-overlay,
  .modal-card,
  .users-modal-card,
  .commercial-ledger-modal-card,
  .renditions-detail-sheet {
    transition: none !important;
    animation: none !important;
  }
}

/* Mobile product system v3: native hierarchy, compact data and touch-first actions. */
@media (max-width: 760px) {
  :root {
    --ios-canvas: #f2f3f5;
    --ios-ink: #101828;
    --ios-muted: #667085;
    --ios-line: #e4e7ec;
    --ios-soft: #f8f9fb;
    --ios-orange-soft: #fff3ec;
    --ios-blue: #1677ff;
    --ios-success-soft: #ecfdf3;
    --ios-danger-soft: #fff1f0;
  }

  body.mobile-ios-body {
    background: var(--ios-canvas) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  body.app-authenticated.mobile-ios-body {
    padding-top: calc(58px + var(--ios-safe-top)) !important;
    padding-bottom: calc(72px + var(--ios-safe-bottom)) !important;
  }

  .mobile-app-header {
    height: calc(58px + var(--ios-safe-top)) !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  }

  .mobile-brand {
    font-size: 22px !important;
  }

  .app main {
    padding: 12px 12px 22px !important;
  }

  .section {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .section.hidden {
    display: none !important;
  }

  .topbar,
  .orders-page-header,
  .reservations-page-header,
  .contacts-page-header {
    gap: 12px !important;
    margin: 0 2px 14px !important;
    padding: 4px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .topbar h1,
  .orders-page-header h1,
  .reservations-page-header h1,
  .contacts-page-header h1 {
    margin: 0 !important;
    color: var(--ios-ink) !important;
    font-size: 26px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .subtitle,
  .topbar .subtitle {
    margin-top: 4px !important;
    color: var(--ios-muted) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .topbar > :last-child,
  .dashboard-actions,
  .orders-page-actions,
  .reservations-page-actions,
  .contacts-page-actions {
    width: 100% !important;
    min-width: 0 !important;
  }

  button,
  .btn,
  .table-btn,
  input,
  select,
  textarea {
    font-family: inherit !important;
  }

  .btn,
  .table-btn,
  button.primary,
  button.secondary {
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  .btn.primary,
  .btn:not(.secondary):not(.ghost):not(.danger).active {
    background: var(--ios-orange) !important;
    color: #fff !important;
  }

  .field label,
  .form-field label,
  .form-group label {
    margin-bottom: 7px !important;
    color: #344054 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  input,
  select,
  textarea,
  .searchable-select-trigger,
  .combobox-input {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border: 1px solid #d9dde5 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--ios-ink) !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
  }

  textarea {
    min-height: 108px !important;
    resize: vertical !important;
  }

  input:focus,
  select:focus,
  textarea:focus,
  .searchable-select-trigger:focus-within {
    outline: 0 !important;
    border-color: var(--ios-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12) !important;
  }

  .card,
  .orders-page-surface,
  .orders-filter-panel,
  .reservations-shell,
  .reservations-history-surface,
  .reservations-list-surface,
  .reservation-create-card,
  .generated-order-form,
  .contacts-directory,
  .contacts-toolbar,
  .admin-panel {
    min-width: 0 !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .card,
  .orders-filter-panel,
  .reservation-create-card,
  .generated-order-form,
  .contacts-toolbar,
  .admin-panel {
    padding: 14px !important;
  }

  /* Dashboard */
  .dashboard-tabs,
  .reservations-tabs,
  .admin-tabs {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 4px !important;
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    scrollbar-width: none !important;
  }

  .dashboard-tabs::-webkit-scrollbar,
  .reservations-tabs::-webkit-scrollbar,
  .admin-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .dashboard-tab,
  .reservations-tab,
  .admin-tab {
    min-width: max-content !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    flex: 1 0 auto !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--ios-muted) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    scroll-snap-align: start !important;
  }

  .dashboard-tab.active,
  .reservations-tab.active,
  .admin-tab.active {
    background: var(--ios-ink) !important;
    color: #fff !important;
  }

  .dashboard-toolbar,
  .orders-filter-panel,
  .reservation-history-filters,
  .reservation-filter-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  .dashboard-kpis,
  .dashboard-metrics,
  .reservation-stats-grid,
  .reservation-summary-grid,
  .contacts-stats-grid,
  .renditions-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dashboard-metric-card,
  .dashboard-kpi,
  .reservation-stat-card,
  .contacts-stat-card,
  .renditions-stat-card {
    min-width: 0 !important;
    min-height: 118px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .dashboard-metric-card strong,
  .dashboard-kpi strong,
  .reservation-stat-card strong,
  .contacts-stat-card strong,
  .renditions-stat-card strong {
    overflow-wrap: anywhere !important;
    color: var(--ios-ink) !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
  }

  .dashboard-rubro-split,
  .dashboard-budget-grid,
  .dashboard-provider-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  /* All operational tables become native list cards. */
  .section table.ios-mobile-table {
    margin: 0 !important;
    background: transparent !important;
  }

  .section table.ios-mobile-table tbody {
    display: grid !important;
    gap: 10px !important;
  }

  .section table.ios-mobile-table tbody tr {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px 12px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03) !important;
    overflow: visible !important;
  }

  .section table.ios-mobile-table tbody td {
    width: calc(50% - 6px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    border: 0 !important;
    background: transparent !important;
    color: #344054 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }

  .section table.ios-mobile-table tbody td::before {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    content: attr(data-label) !important;
    color: #98a2b3 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-orden,
  .section table.ios-mobile-table tbody td.ios-cell-numero,
  .section table.ios-mobile-table tbody td.ios-cell-reserva,
  .section table.ios-mobile-table tbody td.ios-cell-usuario,
  .section table.ios-mobile-table tbody td.ios-cell-apellido-y-nombre,
  .section table.ios-mobile-table tbody td.ios-cell-nombre-razon-social,
  .section table.ios-mobile-table tbody td.ios-cell-proveedor,
  .section table.ios-mobile-table tbody td.ios-cell-cliente,
  .section table.ios-mobile-table tbody td.ios-cell-inmueble,
  .section table.ios-mobile-table tbody td.ios-cell-direccion,
  .section table.ios-mobile-table tbody td.ios-cell-concepto,
  .section table.ios-mobile-table tbody td.ios-cell-descripcion,
  .section table.ios-mobile-table tbody td.ios-cell-email,
  .section table.ios-mobile-table tbody td.ios-cell-acciones,
  .section table.ios-mobile-table tbody td.ios-cell-accion {
    width: 100% !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-orden,
  .section table.ios-mobile-table tbody td.ios-cell-numero,
  .section table.ios-mobile-table tbody td.ios-cell-reserva,
  .section table.ios-mobile-table tbody td.ios-cell-usuario,
  .section table.ios-mobile-table tbody td.ios-cell-apellido-y-nombre,
  .section table.ios-mobile-table tbody td.ios-cell-nombre-razon-social {
    color: var(--ios-ink) !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-orden::before,
  .section table.ios-mobile-table tbody td.ios-cell-numero::before,
  .section table.ios-mobile-table tbody td.ios-cell-reserva::before,
  .section table.ios-mobile-table tbody td.ios-cell-usuario::before,
  .section table.ios-mobile-table tbody td.ios-cell-apellido-y-nombre::before,
  .section table.ios-mobile-table tbody td.ios-cell-nombre-razon-social::before {
    display: none !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-monto,
  .section table.ios-mobile-table tbody td.ios-cell-importe,
  .section table.ios-mobile-table tbody td.ios-cell-total,
  .section table.ios-mobile-table tbody td.ios-cell-total-usd {
    color: var(--ios-ink) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-acciones,
  .section table.ios-mobile-table tbody td.ios-cell-accion {
    margin-top: 4px !important;
    padding-top: 12px !important;
    border-top: 1px solid #eef0f3 !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-acciones::before,
  .section table.ios-mobile-table tbody td.ios-cell-accion::before {
    display: none !important;
  }

  .section table.ios-mobile-table .ios-mobile-table-message {
    width: 100% !important;
    min-height: 100px !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ios-muted) !important;
    text-align: center !important;
  }

  .orders-row-actions-inline,
  .reservation-actions-cell {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px 44px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .orders-row-actions-inline > *,
  .reservation-actions-cell > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .orders-row-actions-inline .table-btn:first-child,
  .reservation-actions-cell .table-btn:first-child {
    background: var(--ios-ink) !important;
    color: #fff !important;
    border-color: var(--ios-ink) !important;
  }

  .orders-status-badge,
  .orders-payment-badge,
  .reservation-conformation-badge,
  .pill {
    width: fit-content !important;
    min-height: 26px !important;
    padding: 5px 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .pagination,
  .orders-pagination,
  .reservation-pagination,
  .contacts-pagination {
    min-height: 52px !important;
    margin-top: 10px !important;
    padding: 8px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-top: 1px solid var(--ios-line) !important;
    background: transparent !important;
  }

  /* New order: a short sequence of calm form sections. */
  .generated-order-form {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .generated-order-form > section,
  .generated-order-form > .card,
  .generated-order-form .order-form-section,
  .generated-order-form .generated-items-section,
  .generated-order-form .attachments-section {
    margin-bottom: 12px !important;
    padding: 14px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  .generated-order-form .form-grid,
  .generated-order-form .generated-order-grid,
  .reservation-form-grid,
  .reservation-form-sections,
  .users-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .generated-item-row,
  .generated-order-item,
  .order-item-row {
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(88px, .34fr) !important;
    gap: 10px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 14px !important;
    background: var(--ios-soft) !important;
  }

  .generated-item-row > :first-child,
  .generated-order-item > :first-child,
  .order-item-row > :first-child {
    grid-column: 1 / -1 !important;
  }

  .order-totals,
  .generated-order-totals,
  .totals-card {
    padding: 16px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--ios-ink) !important;
    color: #fff !important;
  }

  .order-totals *,
  .generated-order-totals *,
  .totals-card * {
    color: inherit !important;
  }

  /* Reservations and contacts */
  .reservations-shell,
  .reservations-history-surface,
  .reservations-list-surface,
  .contacts-directory {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .reservation-actions {
    position: sticky !important;
    bottom: calc(72px + var(--ios-safe-bottom)) !important;
    z-index: 40 !important;
    margin: 12px -2px 0 !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 10px 30px rgba(16,24,40,.12) !important;
    backdrop-filter: blur(16px) !important;
  }

  .contacts-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .contacts-alphabet {
    width: 100% !important;
    padding: 8px 2px !important;
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .contacts-alphabet > * {
    min-width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 9px !important;
  }

  /* Full-screen operational sheets */
  .modal,
  .review-modal,
  .users-modal,
  .commercial-ledger-modal,
  .renditions-detail-modal {
    padding: 0 !important;
    align-items: flex-end !important;
    background: rgba(16, 24, 40, .28) !important;
  }

  .modal-card,
  .users-modal-card,
  .commercial-ledger-modal-card,
  .renditions-detail-sheet {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(94dvh - var(--ios-safe-top)) !important;
    margin: 0 !important;
    padding: 18px 16px calc(18px + var(--ios-safe-bottom)) !important;
    border: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -18px 60px rgba(16, 24, 40, .16) !important;
    overflow-y: auto !important;
  }

  .review-shell {
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    padding: calc(var(--ios-safe-top) + 10px) 0 calc(var(--ios-safe-bottom) + 76px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  .review-top {
    min-height: 52px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--ios-line) !important;
    background: #fff !important;
  }

  .review-top h1 {
    max-width: 72vw !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .review-content {
    height: calc(100dvh - var(--ios-safe-top) - var(--ios-safe-bottom) - 138px) !important;
    display: block !important;
    overflow-y: auto !important;
    background: #eef0f3 !important;
  }

  .review-pdf,
  .review-document-viewer {
    width: 100% !important;
    min-height: 72dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .review-side {
    margin: 10px !important;
    padding: 14px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  .review-actions {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 10040 !important;
    min-height: calc(70px + var(--ios-safe-bottom)) !important;
    padding: 10px 12px calc(10px + var(--ios-safe-bottom)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
    gap: 8px !important;
    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid var(--ios-line) !important;
    backdrop-filter: blur(18px) !important;
  }

  .review-actions .btn {
    width: 100% !important;
    min-height: 50px !important;
  }

  body.review-open .mobile-app-header,
  body.review-open .mobile-bottom-nav,
  body.review-open .mobile-bell,
  body.review-open .notification-panel {
    display: none !important;
  }

  /* Admin and login */
  .admin-hub-grid,
  .admin-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .admin-hub-card,
  .admin-summary-card {
    min-height: 112px !important;
    padding: 14px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  #loginScreen {
    min-height: 100dvh !important;
    padding: calc(24px + var(--ios-safe-top)) 20px calc(24px + var(--ios-safe-bottom)) !important;
    background: #fff !important;
  }

  .login-card {
    width: 100% !important;
    max-width: 430px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .login-card .btn {
    width: 100% !important;
    min-height: 50px !important;
  }
}

@media (max-width: 390px) {
  .dashboard-kpis,
  .dashboard-metrics,
  .reservation-stats-grid,
  .reservation-summary-grid,
  .contacts-stats-grid,
  .renditions-stats-grid,
  .admin-hub-grid,
  .admin-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section table.ios-mobile-table tbody td {
    width: 100% !important;
  }

  .orders-row-actions-inline,
  .reservation-actions-cell {
    grid-template-columns: minmax(0, 1fr) 44px 44px !important;
  }
}

/* Mobile product system v4.1: final cascade guard for every TSIGNS module. */
@media (max-width: 760px) {
  body.mobile-ios-body {
    overflow-x: hidden !important;
    background: #f5f6f8 !important;
  }

  body.app-authenticated.mobile-ios-body .app main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 14px 26px !important;
    overflow-x: hidden !important;
  }

  .topbar,
  .topbar.dashboard-hero,
  .orders-page-header,
  .reservations-page-header,
  .contacts-page-header,
  .renditions-page-header,
  .calendar-page-header,
  .ai-page-header {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 2px 0 0 !important;
    display: flex !important;
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .topbar > *,
  .orders-page-header > *,
  .reservations-page-header > *,
  .contacts-page-header > *,
  .renditions-page-header > *,
  .calendar-page-header > *,
  .ai-page-header > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  .topbar h1,
  .orders-page-header h1,
  .reservations-page-header h1,
  .contacts-page-header h1,
  .renditions-page-header h1,
  .calendar-page-header h1,
  .ai-page-header h1 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    color: #101828 !important;
    font-size: 27px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .dashboard-actions,
  .orders-header-actions,
  .orders-page-actions,
  .reservations-page-actions,
  .contacts-page-actions,
  .renditions-header-actions,
  .calendar-header-actions,
  .audit-actions,
  .topbar > :last-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .dashboard-actions > *,
  .orders-header-actions > *,
  .orders-page-actions > *,
  .reservations-page-actions > *,
  .contacts-page-actions > *,
  .renditions-header-actions > *,
  .calendar-header-actions > *,
  .audit-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
  }

  .orders-filter-panel {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 12px !important;
    display: block !important;
    border: 1px solid #e4e7ec !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .orders-filter-heading {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .orders-filter-heading > div:first-child {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .orders-filter-heading > div:first-child > :first-child:not(h1):not(h2):not(h3):not(strong) {
    display: none !important;
  }

  .ios-filter-toggle {
    width: auto !important;
    min-width: 96px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    border: 1px solid #d9dde5 !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
  }

  .ios-filter-toggle[aria-expanded="true"] {
    border-color: rgba(255, 90, 0, .35) !important;
    background: #fff3ec !important;
    color: #e94f00 !important;
  }

  .orders-filter-grid,
  .reservation-history-filters,
  .reservation-filter-panel,
  .contacts-toolbar,
  .dashboard-toolbar {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .orders-filter-grid > *,
  .orders-filter-search,
  .orders-filter-heading-actions {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
  }

  .orders-filter-panel:not(.ios-filters-expanded) .orders-filter-heading-actions,
  .orders-filter-panel:not(.ios-filters-expanded) .orders-filter-grid > .field:not(.orders-filter-search) {
    display: none !important;
  }

  .orders-filter-panel.ios-filters-expanded .orders-filter-heading-actions {
    margin: 0 0 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .orders-filter-panel.ios-filters-expanded .orders-filter-grid > .field {
    display: block !important;
  }

  .orders-page-surface,
  .reservations-shell,
  .reservations-history-surface,
  .reservations-list-surface,
  .contacts-directory,
  .contacts-surface,
  .renditions-surface {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .orders-table-scroll,
  .contacts-table-wrap,
  .users-table-wrap,
  .reservations-table-wrap,
  .renditions-table-wrap,
  .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .section table.ios-mobile-table tbody {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .section table.ios-mobile-table tbody tr {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    border: 1px solid #e4e7ec !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03) !important;
    overflow: visible !important;
  }

  .section table.ios-mobile-table tbody td {
    width: calc(50% - 6px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 6px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .section table.ios-mobile-table tbody td::before {
    color: #98a2b3 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-orden,
  .section table.ios-mobile-table tbody td.ios-cell-proveedor,
  .section table.ios-mobile-table tbody td.ios-cell-descripcion,
  .section table.ios-mobile-table tbody td.ios-cell-concepto,
  .section table.ios-mobile-table tbody td.ios-cell-inmueble,
  .section table.ios-mobile-table tbody td.ios-cell-acciones,
  .section table.ios-mobile-table tbody td.actions,
  .section table.ios-mobile-table tbody td[colspan] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .orders-row-actions-inline,
  .reservation-actions-cell,
  .table-actions,
  .actions-menu-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }

  .orders-row-actions-inline,
  .reservation-actions-cell,
  .table-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px 46px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .orders-row-actions-inline > *,
  .reservation-actions-cell > *,
  .table-actions > * {
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .generated-order-form,
  .reservation-create-card,
  .user-editor,
  .admin-panel {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid #e4e7ec !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .generated-order-form .form-grid,
  .reservation-create-card .form-grid,
  .user-editor .form-grid,
  .admin-panel .form-grid,
  .items-grid,
  .order-items-grid {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  .modal,
  .review-modal,
  .users-modal,
  .commercial-ledger-modal,
  .renditions-detail-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal-card,
  .users-modal-card,
  .commercial-ledger-modal-card,
  .renditions-detail-sheet {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(94dvh - var(--ios-safe-top)) !important;
    margin: 0 !important;
    padding: 18px 16px calc(18px + var(--ios-safe-bottom)) !important;
    border: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fff !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 390px) {
  .section table.ios-mobile-table tbody td {
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }

  .section table.ios-mobile-table tbody td.ios-cell-orden,
  .section table.ios-mobile-table tbody td.ios-cell-proveedor,
  .section table.ios-mobile-table tbody td.ios-cell-descripcion,
  .section table.ios-mobile-table tbody td.ios-cell-concepto,
  .section table.ios-mobile-table tbody td.ios-cell-inmueble,
  .section table.ios-mobile-table tbody td.ios-cell-acciones,
  .section table.ios-mobile-table tbody td.actions,
  .section table.ios-mobile-table tbody td[colspan] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .dashboard-kpis,
  .dashboard-metrics,
  .reservation-stats-grid,
  .reservation-summary-grid,
  .contacts-stats-grid,
  .renditions-stats-grid,
  .admin-hub-grid,
  .admin-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Mobile product system v4.3: final filter cascade guard. */
@media (max-width: 760px) {
  body.mobile-ios-body .orders-filter-panel select,
  body.mobile-ios-body .orders-filter-panel select option {
    color: #101828 !important;
    -webkit-text-fill-color: #101828 !important;
    font-size: 15px !important;
    opacity: 1 !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-filter-heading {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 12px 10px !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-filter-heading > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-filter-heading > div:first-child strong {
    display: block !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .ios-filter-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-filter-heading-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 9px !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-sort-control {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-sort-control select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    padding-right: 34px !important;
    text-overflow: ellipsis !important;
  }

  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded #clearOrderFiltersBtn {
    width: auto !important;
    min-width: 112px !important;
    min-height: 44px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  body.mobile-ios-body .orders-filter-panel.ios-filters-expanded .orders-filter-heading-actions {
    grid-template-columns: minmax(0, 1fr) 110px !important;
  }
}