/* Presentation only: the desktop layout and existing business operations stay intact. */
.mobile-dashboard-hero, .mobile-dashboard-shortcuts { display: none; }
.client-menu { display: contents; }
.client-menu > summary { display: none; }

@media (max-width: 767px) {
    /* Display rules must never unhide conditional fields or disabled flow steps. */
    [hidden]:not([hidden="until-found"]) { display: none !important; }
    body.admin-body {
        --bg: #f3f1e9; --surface: #fffcf6; --surface-subtle: #f7f4ec; --line: #e5e1d7; --mobile-nav-h: 76px;
        font-size: 16px; line-height: 1.5; background: var(--bg);
        padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
    }
    .admin-body[data-theme="dark"] { --bg: #101512; --surface: #19211d; --surface-subtle: #202b24; --line: #344139; }
    .admin-body *, .public-body * { min-width: 0; }
    :is(.admin-body, .public-body) :is(p, h1, h2, h3, strong) { overflow-wrap: anywhere; }
    .admin-body .button, .public-body .button { min-height: 48px; height: auto; padding: 12px 16px; font-size: .9375rem; line-height: 1.35; border-radius: 14px; white-space: normal; }
    :is(.admin-body, .public-body) :is(.field input, .field select, .field textarea, .schedule-time select) { width: 100%; max-width: 100%; min-height: 52px; font-size: 16px; border-radius: 13px; padding: 12px; color: var(--ink); background: var(--surface); }
    html.food-public .field input, html.food-public .field select, html.food-public .field textarea, html.food-public .quantity-control input { color: var(--field-ink, var(--ink)); background: var(--field-bg, var(--surface)); }
    :is(.admin-body, .public-body) .field > span { font-size: .875rem; }
    :is(.admin-body, .public-body) .field textarea { min-height: 104px; }
    :is(.admin-body, .public-body) :is(.text-link, .calendar-tab, .schedule-tab, .icon-button, .sheet-close) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
    :is(.admin-body, .public-body) :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    :is(.admin-body, .public-body) :is(input, select, textarea, button, a) { scroll-margin-block: 90px; }
    .public-body .booking-page :is(input, select, textarea, button, a, label) { scroll-margin-block: 8px; }
    .admin-content { padding: 20px 18px 36px; }
    .admin-page { gap: 20px; }
    .admin-body .panel { padding: 20px; border-radius: 24px; }
    .admin-body h2 { font-size: 1.18rem; line-height: 1.3; }
    .admin-body .page-intro { font-size: .9375rem; line-height: 1.55; }
    .admin-body .eyebrow { font-size: .75rem; }
    .admin-body .muted { font-size: .875rem; }
    .admin-body .status-pill { font-size: .75rem; padding: 5px 9px; width: fit-content; }
    .admin-topbar { padding: calc(10px + env(safe-area-inset-top)) 18px 10px; min-height: 76px; background: var(--bg); border-bottom: 0; }
    .admin-topbar-title { flex: 1; }
    .admin-topbar-title > div { flex: 1; text-align: center; padding-right: 8px; }
    .admin-topbar h1, .admin-topbar .topbar-title { font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
    .topbar-context { font-size: .6875rem; max-width: 48vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: auto; }
    .admin-menu, .topbar-public-link { width: 44px; height: 44px; flex: 0 0 44px; }
    .topbar-public-link { font-size: 0; }
    .admin-sidebar { max-width: min(86vw, 300px); width:min(86vw, 300px); height:100svh; max-height:100svh; padding: calc(14px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
    .admin-nav, .admin-nav-main { display: flex; flex-direction: column; flex: none; height: auto; }
    .admin-nav { overflow-y: auto; scrollbar-width: none; }
    .admin-nav::-webkit-scrollbar { display: none; }
    .admin-nav a { min-height: 44px; height: auto; flex: none; font-size: .95rem; }
    .mobile-nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -3px 18px #18201c05; }
    .mobile-nav a, .mobile-nav button { min-height: 56px; gap: 5px; font-size: .75rem; border-radius: 16px; }
    .mobile-nav .icon { width: 25px; height: 25px; }
    .page-actions { gap: 14px; }
    .page-actions > .button { width: 100%; }
    .page-actions.schedule-save-bar { justify-content: flex-end; }
    .page-actions.schedule-save-bar > .button { width: auto; margin-left: auto; }

    /* Existing daily work precedes the reports on phones. */
    .dashboard { display: flex; flex-direction: column; }
    .dashboard > * { order: 5; }
    .dashboard > .mobile-dashboard-hero { order: 0; }
    .dashboard > .flash, .dashboard > .setup-checklist { order: 1; }
    .dashboard > .dashboard-today { order: 2; }
    .dashboard > .mobile-dashboard-shortcuts { order: 3; }
    .dashboard > .page-intro { order: 4; margin-top: 8px; }
    .mobile-dashboard-hero { display: grid; gap: 5px; margin: -20px -18px 0; padding: 26px 24px 30px; background: #141b17; color: #fffdf6; border-radius: 0 0 32px 32px; }
    .mobile-dashboard-hero p { color: #d5cfba; font-size: 1rem; font-weight: 700; }
    .mobile-dashboard-hero h2 { font-size: 2rem; font-weight: 800; }
    .mobile-dashboard-hero > span { color: #d5cfba; font-size: .875rem; }
    .mobile-dashboard-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mobile-dashboard-shortcuts a { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; min-height: 100px; padding: 18px 14px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 2px 2px #18201c05; }
    .mobile-dashboard-shortcuts .icon { width: 29px; height: 29px; color: var(--accent-ink); }
    .mobile-dashboard-shortcuts strong { font-size: .9375rem; }
    .mobile-dashboard-shortcuts a > span { display: none; }
    .dashboard-today { box-shadow: 0 8px 20px #18201c0a; }
    .dashboard-today .panel-head { display: grid; gap: 12px; }
    .dashboard-today .panel-head > .button { justify-self: start; }
    .today-turn { grid-template-columns: 64px minmax(0, 1fr); padding: 16px 0; gap: 8px 14px; }
    .today-turn-time { font-size: 1.1rem; }
    .today-turn-body .today-turn-client { font-size: 1rem; }
    .today-turn-body p { font-size: .875rem; }
    .today-turn:first-child .today-turn-time { font-size: 1.35rem; }
    .metric-grid { gap: 12px; }
    .metric-card { border-radius: 22px; padding: 18px; min-height: 130px; }
    .metric-card strong { font-size: 1.8rem; }
    .metric-card span { font-size: .75rem; }
    .metric-card small { display: block; font-size: .8125rem; }
    .dashboard-range { gap: 12px; }
    .dashboard-periods, .agenda-v2-days { margin-inline: -18px; padding-inline: 18px; }

    .clients-page .page-actions-copy { display: none; }
    .has-sheets .clients-page .page-actions > .button { position: fixed; z-index: 59; right: max(18px, env(safe-area-inset-right)); bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 16px); width: auto; min-height: 56px; padding: 16px 20px; border-radius: 21px; box-shadow: 0 8px 20px #18201c26; }
    .has-sheets .clients-page .page-actions { display: contents; }
    .clients-page { padding-bottom: 80px; }
    .clients-search { gap: 10px; align-items: end; padding: 14px; border-radius: 18px; }
    .clients-search .field { min-width: 0; }
    .clients-search input { min-height: 58px; }
    .clients-search .button { min-height: 52px; }
    .admin-body .clients-list-panel { padding: 0; border: 0; background: none; box-shadow: none; }
    .clients-list-panel .panel-head > div { display: none; }
    .clients-list-panel .panel-head { margin-bottom: 12px; }
    .client-list { gap: 12px; }
    .client-row { position: relative; grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 5px 12px; padding: 20px 14px; border: 0; border-radius: 24px; background: var(--surface); }
    .client-avatar { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 50%; font-size: 1rem; background: var(--line); color: var(--ink-soft); }
    .client-name-row { gap: 6px; }
    .client-name-row > strong { font-size: 1.0625rem; }
    .client-name-row .status-activo { display: none; }
    .client-meta { display: grid; gap: 2px; font-size: .875rem; overflow-wrap: anywhere; }
    .client-last { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px; text-align: left; }
    .client-last span, .client-last strong { font-size: .75rem; font-weight: 500; text-transform: none; letter-spacing: normal; }
    .client-menu { display: block; grid-column: 3; grid-row: 1 / 3; align-self: center; }
    .client-menu > summary { display: grid; place-items: center; width: 44px; height: 48px; list-style: none; cursor: pointer; border-radius: 13px; color: var(--ink-soft); font-size: 1.75rem; }
    .client-menu > summary::-webkit-details-marker { display: none; }
    .client-menu[open] > summary { background: var(--accent-soft); }
    .client-menu[open] .client-actions { display: grid; position: absolute; right: 12px; top: calc(100% - 10px); z-index: 8; width: 190px; grid-template-columns: 1fr; gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }

    .data-table.is-stackable { font-size: .9375rem; }
    .data-table.is-stackable tr { gap: 12px; padding: 20px 0; }
    .data-table.is-stackable td { grid-template-columns: 86px minmax(0, 1fr); align-items: start; overflow-wrap: anywhere; }
    .data-table.is-stackable td::before { font-size: .75rem; }
    .data-table .table-actions { flex-wrap: wrap; gap: 10px; }
    .data-table .table-actions .text-link { min-height: 46px; padding: 10px 14px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 12px; }
    .data-table .table-actions .table-delete { min-width: 46px; min-height: 46px; }
    .catalog-category { border-radius: 24px; padding: 18px; }
    .catalog-category-head { flex-wrap: wrap; gap: 12px; }
    .catalog-product { padding: 16px 0; gap: 12px; }
    .catalog-product-actions { flex-wrap: wrap; gap: 8px; }
    .catalog-product-actions .button { font-size: .8125rem; padding: 10px; }
    .agenda-v2-item { padding: 18px; gap: 12px; border-radius: 22px; }
    .agenda-v2-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .agenda-v2-actions > * { flex: 1 1 100px; }
    .agenda-v2-actions .button { width: 100%; }
    .calendar-grid-month { gap: 3px; }
    .calendar-grid-month .calendar-day { min-height: 60px; padding: 7px 1px; border-radius: 10px; }
    .calendar-grid-month .calendar-day small { font-size: .625rem; height: auto; padding: 2px; white-space: normal; }
    .calendar-weekday { font-size: .75rem; padding-inline: 0; }
    .calendar-layout, .schedule-grid { grid-template-columns: minmax(0, 1fr); }
    .week-grid { gap: 12px; padding-bottom: 12px; }
    .week-col { flex-basis: 88%; border-radius: 18px; }
    .week-col-head { min-height: 48px; align-items: center; }
    .cal-event, .day-item { min-height: 52px; padding: 12px; }
    .schedule-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    .schedule-sep { display: none; }
    .schedule-remove { grid-column: 1 / -1; }
    .schedule-day-card { padding: 16px; border-radius: 18px; }
    .schedule-day-head { flex-wrap: wrap; gap: 10px; }
    .toolbar { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
    .form, .form-grid, .field-row { gap: 18px; }
    .form-grid, .field-row, .plan-grid, .settings-grid { grid-template-columns: minmax(0, 1fr); }
    .social-row { flex-wrap: wrap; gap: 12px; }
    .account-site-row .button, .business-order-settings .button, .account-card-actions .button { width: 100%; }
    .check-list label, .settings-choice, .visibility-options label { min-height: 52px; padding: 12px; }
    .manual-product-grid label { min-height: 0; padding: 8px 10px; }
    .manual-product-grid .qty-stepper input { font-size: 16px; min-height: 32px; width: 34px; }
    .has-sheets [data-sheet].is-open { max-height: 94dvh; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)) !important; overscroll-behavior: contain; scroll-padding-block: 76px 24px; }
    .sheet-head { top: -22px; margin: -22px -20px 4px; padding: 16px 20px 12px; }
    .sheet-close { width: 44px; height: 44px; }
    .slot-choice-grid span { min-height: 50px; }
    .flow-progress span { font-size: .75rem; }
    .appointment-summary { flex-wrap: wrap; font-size: .875rem; }
    .appearance-options { gap: 8px; }
    .appearance-options span { font-size: .8125rem; min-height: 50px; }

    /* Public booking, menu, checkout, receipts and access screens. */
    .public-body { font-size: 16px; }
    .public-body .container, .public-body .container.narrow { width: calc(100% - 32px); }
    .public-body .food-page .container { padding-inline: 0; }
    .booking-layout, .food-order-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .booking-identity { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px 14px; align-items: center; }
    .booking-avatar, img.booking-photo { width: 96px; height: 96px; border-radius: 24px; }
    .booking-identity-copy { display: grid; gap: 10px; }
    .booking-identity h1 { font-size: 1.55rem; }
    .booking-chip { min-height: 40px; }
    .booking-chip strong { max-width: 100%; white-space: nowrap; }
    .booking-social { min-height: 40px; height: 40px; }
    .booking-step, .booking-summary-card, .booking-receipt { padding: 20px; border-radius: 24px; }
    .booking-step-head { gap: 10px; }
    .booking-step-head h2 { font-size: 1.2rem; }
    .booking-step-head p { font-size: .875rem; }
    .choice-card { min-height: 76px; padding: 16px; border-radius: 18px; }
    .choice-card strong { font-size: 1rem; }
    .choice-card small { font-size: .875rem; }
    .date-chip { min-height: 52px; font-size: 1rem; }
    .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .page-business .booking-aside, .food-page .booking-aside { position: static; margin: 0; padding: 0; background: none; }
    .food-page .booking-summary-card { border-radius: 24px; }
    html.food-public:not(.food-style-lista):not(.food-style-compacto) .food-product,
    html.food-public:not(.food-style-lista):not(.food-style-compacto) .food-product:not(:has(img)) { display: flex; flex-direction: column; gap: 0; padding: 0 0 14px; border-radius: 20px; }
    html.food-public:not(.food-style-lista):not(.food-style-compacto) .food-product > img { width: 100%; height: 140px; }
    html.food-public.food-style-lista .food-product, html.food-public.food-style-compacto .food-product { display: grid; }
    .food-product strong { font-size: 1.0625rem; }
    .food-product p { font-size: .9375rem; }
    .quantity-control { grid-column: 1 / -1; width: 100%; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    .quantity-control label { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: .875rem; }
    .quantity-control input { width: 80px; min-height: 48px; flex: 0 0 80px; }
    .quantity-control .text-link { padding: 10px; }
    .food-checkout { gap: 20px; }
    .delivery-choice { gap: 10px; }
    .delivery-choice label { padding: 14px; }
    .summary-list li, .booking-summary-list li { gap: 8px; font-size: .9375rem; }
    .auth-card { border-radius: 24px; padding: 24px 20px; }
    .auth-section { padding-top: 22px; }
    .confirmation-main-card { padding: 18px; }
    .confirmation-main-card h2 { font-size: 1.0625rem; }
    .confirmation-note p { font-size: .875rem; }
}
@media (min-width: 768px) and (pointer: coarse) {
    :is(.admin-body, .public-body) .button { min-height: 44px; }
    :is(.admin-body, .public-body) .field :is(input, select, textarea) { font-size: 16px; min-height: 48px; }
}