/* ============================================================
   Cardápio v2 (Fase A6) - sheet de produto em 3 campos +
   "mais opções", foto da galeria e lista polida.
   Tokens do styles.css; whitelabel --brand preservado.
   Nunca travessão, só hífen.
   ============================================================ */

/* miniatura na lista de produtos */
.cdp-thumb{width:44px;height:44px;object-fit:cover;border-radius:10px;display:block;background:var(--creme)}
.cdp-thumb.vazia{display:flex;align-items:center;justify-content:center;color:var(--suave);font-size:18px;border:1px dashed var(--linha)}

/* linha do seletor de foto no sheet */
.cdp-foto-line{display:flex;align-items:center;gap:10px}
.cdp-foto-prev{width:56px;height:56px;object-fit:cover;border-radius:12px;background:var(--creme);flex:0 0 auto}
.cdp-foto-prev.vazia,.cdp-foto-prev.erro{display:flex;align-items:center;justify-content:center;color:var(--suave);font-size:22px;border:1px dashed var(--linha)}
.cdp-foto-btn{flex:1;min-height:48px;justify-content:center}

/* "mais opções" colapsado */
.cdp-more{margin:4px 0 0}
.cdp-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:44px;font-size:13.5px;font-weight:600;color:var(--brand-strong);user-select:none}
.cdp-more>summary::-webkit-details-marker{display:none}
.cdp-more>summary .ti-chevron-down{transition:transform .18s ease;font-size:15px}
.cdp-more[open]>summary .ti-chevron-down{transform:rotate(180deg)}
.cdp-more-body{padding-top:6px;border-top:1px dashed var(--linha);margin-top:2px}

/* linha de custo/margem da receita (nível Completo, como o mockup) */
.cdp-receita-sum{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:baseline;font-size:12.5px;font-weight:600;color:var(--brand-strong);background:var(--brand-softer,rgba(15,181,166,.08));border-radius:8px;padding:4px 8px;margin:2px 0 8px}

/* resumo compacto sob o título (só celular; no desktop ficam os KPIs) */
.cdp-sub{display:none;font-size:13.5px;color:var(--suave);margin:-8px 0 12px}

/* lista de toque do celular (foto/nome/preço/toggle, como o mockup) */
.cdp-list{display:none;padding:4px 14px}
.cdp-list-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--linha);cursor:pointer;min-height:56px}
.cdp-list-row:last-child{border-bottom:none}
.cdp-list-info{flex:1;min-width:0}
.cdp-list-nome{font-weight:600;font-size:14.5px;color:var(--marrom);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdp-list-sub{font-size:12.5px;color:var(--suave);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* switch do "no cardápio" (área de toque 44px, trilho 40x24) */
.cdp-switch{position:relative;flex:0 0 auto;width:44px;height:44px;border:none;background:none;cursor:pointer;padding:0}
.cdp-switch::before{content:"";position:absolute;left:2px;top:10px;width:40px;height:24px;border-radius:99px;background:var(--linha);transition:background .15s ease}
.cdp-switch::after{content:"";position:absolute;left:5px;top:13px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(12,29,27,.25);transition:transform .15s ease}
.cdp-switch.on::before{background:var(--brand)}
.cdp-switch.on::after{transform:translateX(16px)}

/* toque confortável no celular */
@media(max-width:780px){
  .cdp-sheet .btn{min-height:48px}
  .cdp-sheet input,.cdp-sheet select{min-height:44px}
  /* KPIs e tabela dão lugar ao resumo + lista de toque
     (só a tabela da PÁGINA - .cdp-tbl; as tabelas de receita e
     variações do sheet continuam aparecendo) */
  .cdp-page .grid-kpi{display:none}
  .cdp-page .cdp-tbl{display:none}
  .cdp-sub{display:block}
  .cdp-list{display:block}
}

/* ============================================================
   Frente A - "Puxar do catálogo" (sugestões de cardápio).
   Whitelabel: só tokens (--brand e derivadas) - vale pra qualquer tenant.
   ============================================================ */

/* empurrão pra quem chega com o cardápio vazio */
.cat-promo{display:flex;align-items:center;gap:14px;margin-bottom:16px;
  border:1px solid var(--brand-soft,rgba(15,181,166,.25));
  background:var(--brand-softer,rgba(15,181,166,.06))}
.cat-promo-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;font-size:22px;color:var(--on-brand,#fff);background:var(--brand)}
.cat-promo-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cat-promo-txt b{font-size:15px;color:var(--marrom)}
.cat-promo-txt span{font-size:13px;color:var(--suave)}

/* sheet */
.cat-sheet{max-width:640px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.cat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cat-title{font-size:21px;color:var(--terra);margin:0;display:flex;align-items:center;gap:8px}
.cat-sub{font-size:13px;color:var(--suave);margin-top:2px}

/* chips de subcategoria */
.cat-chips{display:flex;flex-wrap:wrap;gap:8px}
.cat-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linha);
  background:#fff;border-radius:99px;padding:6px 12px;font-size:13px;font-weight:600;
  color:var(--marrom);cursor:pointer;min-height:36px}
.cat-chip.on{border-color:var(--brand);background:var(--brand-softer,rgba(15,181,166,.08));color:var(--brand-strong)}
.cat-chip-n{font-size:11px;font-weight:700;color:var(--suave);background:var(--creme);border-radius:99px;padding:1px 7px}
.cat-chip.on .cat-chip-n{color:var(--brand-strong)}

/* lista de receitas */
.cat-list{display:flex;flex-direction:column;gap:8px}
.cat-item{display:flex;align-items:center;gap:12px;border:1px solid var(--linha);
  border-radius:14px;padding:10px 12px;background:#fff}
.cat-item.feito{background:var(--brand-softer,rgba(15,181,166,.05));border-color:var(--brand-soft,rgba(15,181,166,.25))}
.cat-emoji{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--creme);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.cat-emoji.lg{width:52px;height:52px;font-size:30px}
.cat-item-info{flex:1;min-width:0;cursor:pointer}
.cat-item-nome{font-weight:600;font-size:14.5px;color:var(--marrom)}
.cat-item-desc{font-size:12.5px;color:var(--suave);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-item-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;font-size:11.5px;color:var(--suave)}
.cat-item-meta span{display:inline-flex;align-items:center;gap:3px}
.cat-item-actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.cat-feito{white-space:nowrap}

.cat-vazio{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--suave)}

/* previa da ficha */
.cat-ficha{display:flex;flex-direction:column;gap:14px}
.cat-voltar{align-self:flex-start;display:inline-flex;align-items:center;gap:4px}
.cat-ficha-head{display:flex;gap:14px;align-items:flex-start}
.cat-ficha-nome{font-size:19px;margin:0;color:var(--marrom)}
.cat-ficha-desc{font-size:13.5px;color:var(--suave);margin:2px 0 0}
.cat-partida{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--brand-strong);
  background:var(--brand-softer,rgba(15,181,166,.08));border-radius:10px;padding:9px 11px}
.cat-partida .ti{margin-top:1px}
.cat-tags{display:flex;flex-wrap:wrap;gap:6px}
.cat-blk h4{font-size:14px;color:var(--marrom);margin:0 0 8px;font-weight:700}
.cat-blk-n{font-weight:500;color:var(--suave)}
.cat-ing{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.cat-ing li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
  padding:6px 2px;border-bottom:1px dashed var(--linha)}
.cat-ing li:last-child{border-bottom:none}
.cat-ing li span{color:var(--marrom)}
.cat-ing li b{color:var(--brand-strong);white-space:nowrap}
.cat-fluxo{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cat-fluxo-et{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--linha);
  border-radius:99px;padding:5px 11px;font-size:12.5px;color:var(--marrom);background:#fff}
.cat-fluxo-sep{color:var(--suave);font-size:14px}
.cat-ficha-actions{display:flex;justify-content:flex-end;padding-top:4px}

@media(max-width:780px){
  .cat-item-actions{flex-direction:column;align-items:stretch}
  .cat-sheet .btn{min-height:44px}
}