/* 33.9.48 — Camada visual isolada, carregada por ÚLTIMO.
   (1) Pedidos: leitura em celular e acabamento no desktop (somente #ped-raiz e o botão
       flutuante de chamados enquanto Pedidos está aberta).
   (2) Clientes: ficha-espelho "Ver" (somente #modal-cli-box .cli-espelho).
   Nenhuma regra de negócio, nenhum data-ped e nenhum cálculo alterados: apenas apresentação. */

/* ---------- Desktop e tablet largo: linhas legíveis e alinhadas ---------- */
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-list{
  display:flex!important;flex-direction:column!important;gap:10px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;padding:0!important;
}
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-row,
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-row.has-bulk-select,
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-row:not(.has-bulk-select){
  min-height:96px!important;padding:14px 18px!important;
  background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:14px!important;
  box-shadow:0 1px 2px rgba(16,24,40,.04)!important;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-row:hover{
  border-color:var(--border-strong)!important;box-shadow:0 4px 14px rgba(16,24,40,.07)!important;background:var(--surface)!important;
}
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-client{
  font-size:15px!important;font-weight:700!important;line-height:1.3!important;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Valores: rótulo pequeno em cima, número grande e tabular embaixo. */
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-main{grid-template-columns:minmax(0,1fr) 190px!important}
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-card-values{display:grid;gap:3px}
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-card-value{display:flex;flex-direction:column;align-items:flex-end;gap:0}
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-card-value>span{font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-card-value>strong{font-size:18px;line-height:1.2;font-variant-numeric:tabular-nums;font-weight:750}
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-card-value:not(:first-child)>strong{font-size:13px;font-weight:650}
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-amount>div:last-child{font-size:12px!important;color:var(--text-3)!important;margin-top:4px!important}
/* Status: selos numa linha e o representante embaixo, sem "flutuar" no meio. */
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-status{gap:6px!important;align-content:center!important}
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-status>span:not(.badge){
  order:9;flex:0 0 100%;margin-left:0!important;font-size:12px!important;color:var(--text-3)!important;
}
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-actions .btn{min-height:38px!important;border-radius:10px!important;font-weight:650}
/* Faixa de seleção e abas: menos altura, mesma função. */
body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-bulkbar{min-height:40px!important;padding:6px 12px!important;margin-bottom:12px!important;background:var(--surface)!important}

/* ---------- Celular ---------- */
@media (max-width:640px){
  /* O botão flutuante de chamados não cobre mais valores nem datas. */
  body:has(#ped-raiz) .support-fab{bottom:76px!important;right:12px!important;width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;opacity:.92}
  body:has(#ped-raiz) .support-fab *{font-size:15px}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz{padding-bottom:96px!important}

  /* Cabeçalho e filtros mais baixos: a lista aparece sem rolar muito. */
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-page-panel{gap:12px!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-page-heading{padding:14px!important;gap:10px!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-page-heading h1{font-size:24px!important;margin:2px 0 0!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-page-description{font-size:13px!important;margin:4px 0 0!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-create-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-create-actions .btn{min-height:42px!important;padding:0 8px!important;font-size:14px!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .of-filter-bar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;align-items:stretch!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .of-filter-bar .btn{min-height:38px!important;padding:0 4px!important;font-size:12.5px!important;white-space:nowrap;width:100%;justify-content:center}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .of-filter-bar .of-filter-actions{grid-column:1 / -1}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .of-filters{padding:10px!important}

  /* Cartão do pedido em coluna única: nome inteiro, valor ao lado do rótulo, selos e botão. */
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-list{gap:10px!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-row,
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-row.has-bulk-select,
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-row:not(.has-bulk-select){
    position:relative;display:grid!important;grid-template-columns:minmax(0,1fr)!important;row-gap:10px!important;
    min-height:0!important;padding:14px!important;
  }
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-row::before{display:none!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-row>*{grid-column:1!important;grid-row:auto!important}
  /* Caixa de seleção (Gestão) sai da coluna e vai para o canto, sem roubar largura do nome. */
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-row>.ped-bulk-check{
    position:absolute;top:10px;right:10px;width:30px;height:30px;z-index:1;
  }
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-row.has-bulk-select .ios-order-client{padding-right:34px}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-main{grid-template-columns:minmax(0,1fr)!important;row-gap:8px!important;align-items:stretch!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-client{-webkit-line-clamp:3;font-size:15px!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-amount{
    display:flex!important;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2px 12px;
    text-align:left!important;padding-top:8px;border-top:1px dashed var(--border);
  }
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-card-values{flex:1 1 auto;min-width:0}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-card-value{align-items:flex-start;flex-direction:row;justify-content:space-between;align-items:baseline;gap:10px}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-card-value>strong{font-size:19px}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-amount>div:last-child{flex:0 0 auto;margin:0!important;text-align:right}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-status{display:flex!important;flex-wrap:wrap!important;gap:6px!important;min-height:0!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-status .badge{min-height:26px!important;padding:3px 9px!important;font-size:11.5px!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-actions .btn:only-child{grid-column:1 / -1}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ios-order-actions .btn{min-height:42px!important}
  body:has(.ios-shell):not(.odem-tv-mode) #ped-raiz .ped-bulkbar{flex-wrap:wrap}
}

/* ---------- Clientes: ficha-espelho (somente leitura, feita para copiar) ---------- */
#modal-cli-box .cli-esp-nota{margin:2px 0 12px;font-size:12.5px;color:var(--text-3)}
#modal-cli-box .cli-espelho{display:block;max-height:min(62vh,560px);overflow:auto;padding-right:2px;-webkit-overflow-scrolling:touch}
#modal-cli-box .cli-espelho,
#modal-cli-box .cli-espelho *{-webkit-user-select:text;user-select:text}
#modal-cli-box .cli-esp-secao{margin:0 0 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
#modal-cli-box .cli-esp-titulo{margin:0;padding:8px 12px;font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);background:var(--surface-2);border-bottom:1px solid var(--border)}
#modal-cli-box .cli-esp-linha{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
#modal-cli-box .cli-esp-linha:last-child{border-bottom:0}
#modal-cli-box .cli-esp-r{font-size:12.5px;color:var(--text-3);font-weight:600}
#modal-cli-box .cli-esp-v{font-size:14px;color:var(--text);font-weight:600;line-height:1.35;overflow-wrap:anywhere;white-space:pre-wrap}
#modal-cli-box .cli-esp-v.is-vazio{color:var(--text-3);font-weight:400}
#modal-cli-box .cli-esp-acoes{display:inline-flex;gap:6px;justify-content:flex-end}
#modal-cli-box .cli-esp-copiar{min-height:30px;padding:0 10px;font-size:12px;border-radius:8px}
#modal-cli-box .cli-esp-rodape{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
@media (max-width:640px){
  #modal-cli-box .cli-espelho{max-height:none;overflow:visible}
  #modal-cli-box .cli-esp-linha{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  #modal-cli-box .cli-esp-r{grid-column:1 / -1;font-size:11.5px}
  #modal-cli-box .cli-esp-copiar{min-height:38px;min-width:48px}
  #modal-cli-box .cli-esp-rodape{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #modal-cli-box .cli-esp-rodape .btn{min-height:44px;width:100%}
  #modal-cli-box .cli-esp-rodape .btn-primary{grid-column:1 / -1}
}

/* Celular: o botão flutuante de chamados não cobre botões de janelas abertas (Clientes e Pedidos). */
@media (max-width:640px){
  body:has(#modal-cli.open) .support-fab,
  body:has(#modal-ped.open) .support-fab{display:none!important}
}

/* Clientes: CNPJ sem quebrar no meio (desktop) e barra de filtros compacta (celular). */
#cli-raiz table.table td.mono{white-space:nowrap}
@media (max-width:640px){
  #cli-raiz .of-filter-bar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;align-items:stretch!important}
  #cli-raiz .of-filter-bar .btn{min-height:38px!important;padding:0 4px!important;font-size:12.5px!important;white-space:nowrap;width:100%;justify-content:center}
  #cli-raiz .of-filter-bar .of-filter-actions{grid-column:1 / -1}
  #cli-raiz .of-filter-bar .of-filter-actions .btn{min-height:42px!important;font-size:14px!important}
}