/* Shared responsive contract. Module tables keep their own column widths;
   only their scrolling viewport is constrained. */
:root { --app-touch-size: 44px; }
#auth { height: auto; min-height: 100vh; min-height: 100svh; }
#auth #auth-card { min-width: 0; max-width: min(420px, 100%); }
#auth :is(input:not([type=checkbox]), select, textarea) { font-size: 16px; min-height: 44px; }
#auth :is(.btn, .auth-link) { min-height: 44px; }
#auth .auth-link { display: inline-flex; align-items: center; }
#error .img-error { max-width: 100%; height: auto; }
#error .error-title { font-size: clamp(2rem, 8vw, 4rem); overflow-wrap: anywhere; }
@media (max-height: 600px) { #auth { align-items: flex-start !important; padding-top: 1rem; padding-bottom: 1rem; } }
.mobile-app-header, .sidebar-backdrop { display: none; }
.sidebar-wrapper { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #74839d transparent; }
.sidebar-wrapper::-webkit-scrollbar { width: 6px; }
.sidebar-wrapper::-webkit-scrollbar-thumb { background: #74839d; border-radius: 8px; }
.sidebar-wrapper .sidebar-link span { min-width: 0; overflow-wrap: anywhere; }
.admin-topbar__account-details { padding: .6rem .85rem; border-bottom: 1px solid #eadfce; }
.admin-topbar__account-details strong, .admin-topbar__account-details span { display: block; overflow-wrap: anywhere; }
.admin-topbar__account-details span { color: #60708a; font-size: .85rem; }
.admin-topbar__user-menu { min-width: 0; }
.admin-topbar__avatar, .admin-topbar__logo { flex-shrink: 0; }
.admin-footer__left, .admin-footer__right { min-width: 0; flex-wrap: wrap; }
.admin-footer__copy, .admin-footer__meta { overflow-wrap: anywhere; }
.responsive-table-scroll { max-width: 100%; min-width: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.responsive-table-hint { display: block; margin: .35rem 0; color: #60708a; font-size: .78rem; }
.responsive-table-hint[hidden] { display: none; }
.responsive-table-scroll:focus-visible, [data-responsive-scroll]:focus-visible { outline: 3px solid #e98735; outline-offset: 2px; }
.mobile-app-header button:focus-visible, .sidebar-hide:focus-visible { outline: 3px solid #e98735; outline-offset: 2px; }

@media (max-width: 1199px) {
  .mobile-app-header {
    display: flex; align-items: center; gap: .8rem; min-height: 68px;
    padding: calc(.6rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) .6rem max(1rem, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid #e8dfd4; background: #fffdf9;
  }
  .mobile-app-header .burger-btn, .sidebar-wrapper .sidebar-hide {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
    width: 44px; height: 44px; padding: 0; border: 1px solid #dfd5c8;
    border-radius: 12px; background: #fff; color: #223759; cursor: pointer;
  }
  .mobile-app-header .burger-btn i { font-size: 1.6rem !important; line-height: 1; color: inherit; }
  .sidebar-wrapper .sidebar-hide i { display: block; width: 1em; height: 1em; font-size: 1.125rem; line-height: 1; }
  .sidebar-wrapper .sidebar-hide i::before { display: block; vertical-align: 0; }
  .mobile-app-brand { display: inline-flex; align-items: center; gap: .65rem; color: #223759; font-weight: 900; letter-spacing: .04em; }
  .mobile-app-brand img { width: 36px; height: 36px; object-fit: contain; }
  .mobile-app-brand small { display: block; font-size: .7rem; font-weight: 600; color: #68768a; letter-spacing: 0; }
  #sidebar .sidebar-wrapper {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1060;
    width: min(320px, calc(100vw - 56px)); height: 100vh; height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateX(-105%); visibility: hidden; overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    transition: transform .22s ease, visibility .22s;
  }
  body.sidebar-open-mobile #sidebar .sidebar-wrapper { left: 0; transform: translateX(0); visibility: visible; }
  body.sidebar-open-mobile { overflow: hidden; }
  .sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: #10203a80; z-index: 1055; }
  .sidebar-wrapper .sidebar-header { padding: 1rem; }
  .sidebar-wrapper .sidebar-header .logo .sidebar-brand { gap: .5rem; font-size: 1rem; }
  .sidebar-wrapper .menu { padding: 0 .8rem 1.5rem; margin-top: .8rem; }
  .sidebar-wrapper .menu .sidebar-link, .sidebar-wrapper .menu .submenu .submenu-item a { min-height: 44px; font-size: .95rem; }
  .sidebar-wrapper .menu .submenu .submenu-item a { padding: .7rem 1rem .7rem 1.8rem; }
  #main { min-width: 0; }
  #main :is(.section, .page-content, .card, .card-body, .plan-shell, .plan-panel, .dataTable-wrapper, .dataTables_wrapper, .table-responsive, .plan-table-wrap, .row > *) { min-width: 0; max-width: 100%; }
  #main :is(.table-responsive, .dataTable-container, .dataTables_scrollBody, .plan-table-wrap, [data-responsive-scroll]) { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #main :is(.dataTable-top, .dataTable-bottom) { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
  #main :is(.dataTable-search, .dataTable-dropdown, .dataTables_filter, .dataTables_length) { max-width: 100%; }
  #main :is(.dataTable-input, .dataTables_filter input) { max-width: 100%; }
  #main :is(.pagination, .dataTable-pagination ul) { display: flex; flex-wrap: wrap; padding-left: 0; }
  #main :is(.breadcrumb, .nav-tabs) { flex-wrap: wrap; overflow-wrap: anywhere; }
  #main :is(.btn, .page-link, .nav-link, .dataTable-pagination a) { min-height: 44px; }
  #main :is(.form-control, .form-select, .dataTable-input, .dataTable-selector, .choices__inner) { min-height: 44px; }
  #main :is(.modal-dialog, dialog) { max-width: calc(100% - 1rem); }
  #main .modal-dialog { margin: .5rem auto; }
  #main .modal-content { max-height: calc(100dvh - 1rem); }
  #main .modal-body { overflow-y: auto; min-height: 0; }
  #main .modal-footer { flex-wrap: wrap; gap: .5rem; }
  .admin-topbar__actions { min-width: 0; }
  .admin-topbar__user-copy strong, .admin-topbar__user-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 767px) {
  html { font-size: 16px; }
  body { font-size: 1rem; }
  #app #main { padding: .85rem !important; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important; }
  #main .admin-topbar-wrap { margin-bottom: 1rem; }
  #main .admin-topbar { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 0; }
  #main .admin-topbar__brand, #main .admin-topbar__chip { display: none; }
  #main .admin-topbar__actions { display: block; margin: 0; width: 100%; }
  #main .admin-topbar__user { width: 100%; min-height: 56px; padding: .55rem .7rem; gap: .65rem; border-radius: 14px; }
  #main .admin-topbar__avatar { width: 34px; height: 34px; }
  #main .admin-topbar__user-copy strong { font-size: .85rem; line-height: 1.35; }
  #main .admin-topbar__user-copy span { font-size: .75rem; line-height: 1.35; }
  #main .admin-topbar__dropdown { position: static; margin-top: .4rem; width: 100%; }
  #main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]), select, textarea) { font-size: 16px; max-width: 100%; }
  #main :is(.form-control, .form-select) { min-width: 0; }
  #main :is(.btn, .nav-link) { white-space: normal; overflow-wrap: anywhere; }
  #main :is(.table, .dataTable-table) :is(th, td) { font-size: .85rem; padding: .65rem .55rem; }
  #main :is(.table, .dataTable-table) .btn { min-width: 44px; font-size: .85rem; }
  #main .input-group { flex-wrap: wrap; }
  #main .dataTable-search { width: 100%; }
  #main .dataTable-search input { width: 100%; margin: 0; }
  #main .dataTables_filter { text-align: left; }
  #main .dataTables_filter label { display: flex; align-items: center; gap: .4rem; }
  #main .dataTables_filter input { min-width: 0; width: 100%; margin-left: 0; }
  #main .dataTables_wrapper :is(.dataTables_paginate, .dataTables_info) { float: none; text-align: left; white-space: normal; }
  #main .admin-footer { padding: .85rem 0; margin-top: 1rem; border-radius: 0; border: 0; border-top: 1px solid #e6ddd2; background: none; box-shadow: none; gap: .6rem; text-align: left; }
  #main .admin-footer__left, #main .admin-footer__right { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-start; }
  #main .admin-footer__copy, #main .admin-footer__meta { font-size: .75rem; line-height: 1.5; }
  #main .admin-footer__meta { width: 100%; }
  #main .admin-footer-wrap { padding-bottom: 72px; }
  #main .settings-hero__aside { min-width: 0; }
  #main #alertas-container { flex-wrap: wrap; gap: .5rem; }
  #main #alertas-container .alert { min-width: 0 !important; max-width: 100%; overflow-wrap: anywhere; }
  #main .plan-grid { grid-template-columns: minmax(0, 1fr); }
  #main :is(.plan-panel__header, .plan-toolbar-top, .summary, .order-board__exports) { flex-wrap: wrap; gap: .65rem; }
  #main :is(.plan-panel__header, .plan-toolbar-top) > * { min-width: 0; max-width: 100%; }
  #main :is(.plan-hero, .plan-panel, .plan-shell) { overflow-wrap: anywhere; }
  #main :is(.plan-shell, .chat-page) { padding-left: 0; padding-right: 0; }
  #main :is(.plan-module-nav__main, .plan-module-nav__secondary) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main :is(.plan-module-nav__link, .plan-module-nav__group > summary) { min-width: 0; white-space: normal; }
  #main :is(.order-board__btn, [data-order-step]) { min-width: 44px; min-height: 44px; }
  #main :is(.summary, .order-board__reorder-note) { overflow-wrap: anywhere; }
  #main .order-table__grab { min-width: 56px; }
  #main .order-table__grab button { display: block; margin: .2rem auto; }
}

/* Floating helpers must not cover modal controls or steal navigation focus. */
body.sidebar-open-mobile .ai-chatbot, body.modal-open .ai-chatbot { visibility: hidden; pointer-events: none; }
body.app-keyboard-open .ai-chatbot:has([data-ai-chatbot-panel][hidden]) { visibility: hidden; pointer-events: none; }
@media (max-width: 640px) {
  .ai-chatbot .ai-chatbot__launcher { width: 52px; height: 52px; }
  .ai-chatbot .ai-chatbot__pulse { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar .sidebar-wrapper { transition: none; }
}
@media print {
  .mobile-app-header, .sidebar-backdrop, .responsive-table-hint, .ai-chatbot { display: none !important; }
  .responsive-table-scroll { overflow: visible; }
}