/* Operação comercial mobile. Não altera o layout desktop nem regras dos módulos. */
@media (max-width: 768px) {
  :root { --header-height: 58px; }
  body { padding-bottom: 0; }
  .main-wrapper { height: 100dvh; min-height: 0; }
  .header { flex-shrink: 0; min-height: 58px; }
  .content-area:not(.inbox-mode) { padding: 16px 12px calc(88px + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); }
  .mobile-bottom-nav button[hidden] { display: none; }
  .mobile-bottom-nav button { min-width: 0; min-height: 48px; border-radius: 12px; font-size: 10px; }
  .mobile-bottom-nav button.is-current { color: #087f5b; background: #e6f8f1; }
  .mobile-bottom-nav button.is-current i { transform: translateY(-1px); }
  body:has(.drawer-overlay.active) .mobile-bottom-nav,
  body:has(.modal-overlay.active) .mobile-bottom-nav,
  body:has(.drawer-overlay.active) .mobile-push-prompt,
  body:has(.modal-overlay.active) .mobile-push-prompt { display: none; }
  body[data-mobile-page="leads"] .page-header,
  body[data-mobile-page="reservas"] .page-header { gap: 12px; margin-bottom: 16px; }
  body[data-mobile-page="leads"] .page-title,
  body[data-mobile-page="reservas"] .page-title { font-size: 24px; }
  body[data-mobile-page="reservas"] .grid-kpi { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px !important; }
  body[data-mobile-page="reservas"] .grid-kpi > * { flex: 0 0 160px; min-width: 160px; padding: 14px; }
  body[data-mobile-page="leads"] .page-actions,
  body[data-mobile-page="reservas"] .page-actions { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; }
  body[data-mobile-page="leads"] .page-actions .btn,
  body[data-mobile-page="reservas"] .page-actions .btn { flex: 1; min-height: 44px; white-space: normal; }
  body:is([data-mobile-page="leads"],[data-mobile-page="reservas"]) .crm-filter-bar { padding: 12px; }
  body:is([data-mobile-page="leads"],[data-mobile-page="reservas"]) .cfb-main { flex-direction: column; align-items: stretch; gap: 10px; }
  body:is([data-mobile-page="leads"],[data-mobile-page="reservas"]) .cfb-search { min-width: 0; width: 100%; max-width: none; flex: none; }
  body:is([data-mobile-page="leads"],[data-mobile-page="reservas"]) .cfb-search { display: flex; align-items: center; gap: 8px; background: var(--bg-elevated,#f1f5f9); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 0 12px; }
  body:is([data-mobile-page="leads"],[data-mobile-page="reservas"]) .cfb-search input { flex: 1; width: 100%; min-width: 0; min-height: 46px; font-size: 16px; border: 0; outline-offset: 2px; background: transparent; color: var(--text-primary); }
  body:is([data-mobile-page="leads"],[data-mobile-page="reservas"]) .cfb-selects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  body:is([data-mobile-page="leads"],[data-mobile-page="reservas"]) .cfb-select { min-width: 0; width: 100%; max-width: 100%; min-height: 44px; font-size: 14px; }
  body:is([data-mobile-page="leads"],[data-mobile-page="reservas"]) .crm-filter-bar:not(:has(.cfb-advanced)) .cfb-selects > :nth-child(n+3) { display: none; }
  body:is([data-mobile-page="leads"],[data-mobile-page="reservas"]) .cfb-actions { flex-wrap: wrap; gap: 8px; }
  body:is([data-mobile-page="leads"],[data-mobile-page="reservas"]) .cfb-actions button { min-height: 44px; min-width: 44px; }
  .cfb-input { font-size: 16px; min-height: 44px; }
  .cfb-advanced-grid { grid-template-columns: minmax(0,1fr); }
  /* Leads: a mesma linha vira um cartão; todos os handlers continuam os originais. */
  .leads-table-wrap { background: transparent; border: 0; box-shadow: none; overflow: visible !important; }
  .leads-table-wrap::after, .leads-table-head { display: none; }
  .leads-table-body { min-width: 0; display: grid; gap: 12px; }
  .leads-table-body .lead-row {
    display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px;
    min-width: 0; width: 100%; padding: 14px; border: 1px solid var(--border-subtle);
    border-radius: 14px; background: var(--bg-card,#fff); align-items: center;
  }
  .lead-row .lt-col { min-width: 0; width: auto; padding: 0; }
  .lead-row .lt-avatar { grid-column: 1; grid-row: 1; display: flex; }
  .lead-row .lt-nome { grid-column: 2; grid-row: 1; }
  .lead-row .lt-chk { grid-column: 3; grid-row: 1; }
  .lead-row .lt-chk input { width: 22px; height: 22px; }
  .lead-row .lead-row-name { font-size: 15px; white-space: normal; overflow-wrap: anywhere; max-width: none; }
  .lead-row .lead-row-phone { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
  .lead-row .lt-etapa { grid-column: 1 / 3; grid-row: 2; display: block; }
  .lead-row .etapa-selector-wrap, .lead-row .etapa-select { width: 100%; max-width: none; min-height: 44px; }
  .lead-row .etapa-select { font-size: 14px; }
  .lead-row .lt-temp { grid-column: 3; grid-row: 2; display: block; }
  .lead-row .lt-origem { grid-column: 1 / 3; grid-row: 3; display: block; overflow-wrap: anywhere; }
  .lead-row .lt-resp { grid-column: 3; grid-row: 3; display: block; }
  .lead-row .lt-ultima, .lead-row .lt-contatos, .lead-row .lt-prioridade, .lead-row .lt-data { display: none; }
  .lead-row .lt-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column: 1 / -1; gap: 8px; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
  .lead-row .lt-actions .action-btn { width: 100%; min-height: 44px; height: auto; gap: 6px; border: 1px solid var(--border-subtle); border-radius: 10px; font-size: 12px; }
  .lead-row .wpp-btn::after { content: 'Conversa'; }
  .lead-row .call-btn::after { content: 'Registrar'; }
  .lead-row .detail-btn::after { content: 'Abrir'; }
  /* Fichas de lead e reserva ocupam a tela, com uma só área de rolagem. */
  :is(#leadDrawerOverlay,#resDrawerOverlay) { z-index: 2200; }
  :is(#leadDrawerOverlay,#resDrawerOverlay) .drawer {
    width: 100%; max-width: 100%; height: var(--mobile-viewport-height,100dvh); max-height: 100dvh;
    top: 0; bottom: auto; border-radius: 0; display: flex; flex-direction: column;
  }
  :is(#leadDrawer,#resDrawer) .drawer-header { padding: 12px 14px; gap: 8px; flex-shrink: 0; }
  :is(#leadDrawer,#resDrawer) .drawer-header > div:first-child { min-width: 0; flex: 1; }
  #leadDrawer .drawer-header { position: relative; flex-wrap: wrap; }
  #leadDrawer .drawer-header > div:first-child { flex: 0 0 100% !important; padding-right: 48px; }
  #leadDrawer #drawerBadges { flex-wrap: wrap; }
  #leadDrawer #drawerBadges .btn-icon { position: absolute; right: 12px; top: 12px; }
  #resDrawer .drawer-header { position: relative; flex-wrap: wrap; }
  #resDrawer .drawer-header > div:first-child { flex: 0 0 100% !important; padding-right: 48px; }
  #resDrawer .drawer-header > div:last-child { flex-wrap: wrap; max-width: 100%; }
  #resDrawer .drawer-header .btn-icon { position: absolute; right: 12px; top: 12px; }
  :is(#leadDrawer,#resDrawer) .drawer-title { white-space: normal; overflow-wrap: anywhere; font-size: 16px; }
  :is(#leadDrawer,#resDrawer) .drawer-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
  :is(#leadDrawer,#resDrawer) .drawer-layout { flex-direction: column; height: auto; overflow: visible; }
  :is(#leadDrawer,#resDrawer) .drawer-sidenav { display: flex; width: 100%; gap: 6px; padding: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  :is(#leadDrawer,#resDrawer) .drawer-sidenav-group { display: flex; flex-shrink: 0; margin: 0; padding: 0; border: 0; }
  :is(#leadDrawer,#resDrawer) .dsn-label { display: inline; }
  :is(#leadDrawer,#resDrawer) .drawer-sidenav-item { min-height: 44px; padding: 10px; white-space: nowrap; }
  :is(#leadDrawer,#resDrawer) .drawer-content-area { flex: none; padding: 14px; overflow: visible; }
  :is(#leadDrawer,#resDrawer) :is(.form-row,.dca-form-row) { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
  :is(#leadDrawer,#resDrawer) :is(.dca-header,.dca-header-actions) { flex-wrap: wrap; gap: 8px; }
  :is(#leadDrawer,#resDrawer) .drawer-footer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  :is(#leadDrawer,#resDrawer) .drawer-footer .btn { flex: 1; min-height: 46px; white-space: normal; font-size: 12px; padding: 8px; }
  :is(#leadDrawer,#resDrawer) :is(.btn,.dca-action-btn,.pcd-doc-btn) { min-height: 44px; }
  :is(#leadDrawer,#resDrawer) .btn-icon { min-width: 44px; }
  :is(#leadDrawer,#resDrawer) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea) { min-height: 44px; font-size: 16px; max-width: 100%; }
  #resDrawer .pcd-docs-grid { grid-template-columns: minmax(0,1fr); }
  #resDrawer .pcd-doc-card { flex-wrap: wrap; min-width: 0; }
  #resDrawer .pcd-doc-actions { flex-wrap: wrap; }
  #resCardsList > .card { border-radius: 14px; }
  #resCardsList > .card > div:nth-child(2) { padding: 14px !important; gap: 12px !important; }
  #resCardsList > .card [style*="min-width:200px"], #resCardsList > .card [style*="min-width:180px"] { min-width: 0 !important; flex-basis: 100% !important; overflow-wrap: anywhere; }
  :is(#modalNovoLeadOverlay,#modalAgendamentoOverlay,#modalDescarteOverlay) { z-index: 2300; padding: 0; }
  :is(#modalNovoLeadOverlay,#modalAgendamentoOverlay,#modalDescarteOverlay) .modal { display: flex; flex-direction: column; width: 100% !important; height: var(--mobile-viewport-height,100dvh); max-height: 100dvh; border-radius: 0; }
  :is(#modalNovoLeadOverlay,#modalAgendamentoOverlay,#modalDescarteOverlay) .modal-body { min-height: 0; overflow-y: auto; }
  :is(#modalNovoLeadOverlay,#modalAgendamentoOverlay,#modalDescarteOverlay) .modal-footer { flex-shrink: 0; position: static; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  :is(#modalNovoLeadOverlay,#modalAgendamentoOverlay,#modalDescarteOverlay) .form-row { display: grid; grid-template-columns: minmax(0,1fr); }
  :is(#modalNovoLeadOverlay,#modalAgendamentoOverlay,#modalDescarteOverlay) :is(input,select,textarea) { min-height: 44px; font-size: 16px; }
  .toast-container { bottom: calc(78px + env(safe-area-inset-bottom)); right: 12px; left: 12px; width: auto; max-width: none; pointer-events: none; }
  .toast-container .toast { max-width: 100%; pointer-events: auto; }
}