/* tablet-tweaks.css · Lumíxis AI · 2026-09-20
 * Ajustes de layout específicos pra tablets (iPad 10" e 11" landscape).
 * Foco: uso real em óticas — o vendedor segura o tablet, precisa ler bem
 * com braço estendido, precisa clicar em áreas grandes.
 *
 * Breakpoints reais:
 *   iPad 10.2": 1080x810 landscape (aprox — safe area <= 1180 & >= 768)
 *   iPad Air 11": 1180x820 landscape
 *   iPad Pro 11": 1194x834 landscape
 *
 * Estratégia: max-width 1180px + landscape (min-aspect-ratio: 4/3).
 * Também cobre notebook 13" com resoluções escaladas (Ex: MacBook 1366x768).
 */

/* ─── Tablet landscape (iPad 10"–11") ─── */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
  /* Aumenta fontes-base pra leitura em distância ergonômica */
  body { font-size: 15px; }

  /* Botões maiores (área de toque confortável) */
  .btn, .btn-primary, .btn-ghost, .btn-amber { min-height: 44px; padding: 12px 18px; font-size: 14px; }

  /* Wizard stepper — reduz padding lateral pra caber sem cortar */
  .wizard-stepper { padding: 10px 14px !important; gap: 6px !important; }
  .wizard-step-body { display: none !important; } /* só o número + ícone no tablet */
  .wizard-step-num { width: 34px !important; height: 34px !important; font-size: 15px !important; }
  .wizard-arrow { font-size: 14px !important; }

  /* Cards de anamnese — grid mais compacto */
  .anamnese-cards { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .anamnese-cards > * { padding: 12px 14px !important; }

  /* Grid de armações — 2 colunas em vez de 4 (foto maior) */
  .frame-choice { min-height: 140px !important; }
  #armacaoGrid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Grid de lentes — mantém 3 col mas com padding maior */
  #lentesGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

  /* Whisper Mode — chat com fonte maior */
  #whisperPanel .conversation .msg { font-size: 15px !important; padding: 10px 14px !important; }
  #whisperPanel { max-width: 380px !important; }

  /* Carrinho lateral — largura reduzida pra não cortar conteúdo */
  :root { --cart-width: 280px !important; }
  body.cart-pinned #step-armacao,
  body.cart-pinned #step-lentes,
  body.cart-pinned #step-venda,
  body.cart-pinned #step-crosssell { padding-right: calc(280px + 14px) !important; }

  /* Modais — largura máxima em vez de fixed 600 */
  .modal { max-width: 92vw !important; max-height: 90vh !important; overflow-y: auto !important; }

  /* Painel sidebar (dashboard/admin) — mais estreito */
  .side { width: 180px !important; }
  .side .brand { padding: 12px 14px !important; font-size: 15px !important; }
  .side-link { padding: 10px 12px !important; font-size: 13px !important; }
  .main { margin-left: 180px !important; }
}

/* ─── Tablet portrait (raro em atendimento, mas suportar) ─── */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  body { font-size: 15px; }
  /* Stepper em coluna? Não — mantém horizontal mas com scroll */
  .wizard-stepper { overflow-x: auto !important; flex-wrap: nowrap !important; padding: 8px 12px !important; }
  .anamnese-cards { grid-template-columns: 1fr !important; }
  #armacaoGrid, #lentesGrid { grid-template-columns: 1fr 1fr !important; }
  /* Carrinho vira drawer que abre por baixo */
  :root { --cart-width: 100vw !important; }
  body.cart-pinned #step-armacao,
  body.cart-pinned #step-lentes,
  body.cart-pinned #step-venda,
  body.cart-pinned #step-crosssell { padding-right: 0 !important; padding-bottom: 200px !important; }
  .side { width: 60px !important; }
  .side-link { justify-content: center !important; }
  .side-link .label, .side-link span:not(.ic) { display: none !important; }
  .main { margin-left: 60px !important; }
}

/* ─── Touch fine-tuning (qualquer touchdevice) ─── */
@media (hover: none) and (pointer: coarse) {
  /* Áreas de toque maiores em elementos clicáveis pequenos */
  .chip, .tile, .frame-choice, .anam-tile { min-height: 40px; }
  /* Hover states desabilitados (não fazem sentido em touch) */
  .btn:hover, .btn-primary:hover, .btn-amber:hover { transform: none !important; }
  /* Scroll com momentum */
  * { -webkit-overflow-scrolling: touch; }
}

/* ─── Landscape em altura reduzida (evita corte da UI) ─── */
@media (max-height: 820px) and (orientation: landscape) {
  .wizard-stepper { padding: 6px 12px !important; }
  .anamnese-header, .venda-header { padding: 10px 14px !important; }
  .anamnese-header > div:first-child, .venda-header > div:first-child { width: 40px !important; height: 40px !important; font-size: 18px !important; }
}