/* ══════════════════════════════════════════════════════════════════════════════════════════
   Painel "Gerenciar fotos" da SC (views/compras-fotos.js)

   Mora dentro de "Produtos": o cabeçalho e as abas da SC ficam, a vitrine sai e este painel
   entra (classe is-fotos na raiz, posta por compras.js). É uma FILA DE TRABALHO, e o desenho
   segue daí: a grade anda, e a gaveta que abre por cima dela, pela direita, é a bancada onde
   se confere a foto antes de gravar. O quadro vazio tem MARCAS DE CORTE nos cantos, de visor de câmera: diz
   "falta foto aqui" sem virar um buraco cinza, e é a mesma linguagem na grade e na gaveta.

   Tudo no sistema do portal (tokens.css). Botões: a base é `background-color`, para o
   state-layer relativo global (components.css) escurecer o que o botão já é; a elevação de
   1px do hover global sai daqui, porque num painel de cards ela faria a grade pular.

   O diálogo de Permissões é montado pelo ui.dialog na raiz do <body>, fora da view: por isso
   os seletores .cf-perm-* são GLOBAIS e não descem de .compras-view.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.compras-view.is-fotos > :not(.cf-host):not(.compras-head):not(.compras-queues):not(#comprasError) { display: none !important; }
.compras-view.is-fotos > .compras-queues { margin-bottom: var(--space-4); }
.cf-host { min-width: 0; }

/* Botão do cabeçalho: ligado enquanto o painel está aberto. */
.compras-view.is-sc #comprasFotosBtn[aria-pressed="true"] {
  border: 1.5px solid var(--brand-500); background-color: #d7e3ff; color: var(--brand-700);
}
@media (max-width: 640px) {
  .compras-view.is-sc #comprasFotosBtn {
    flex: none; width: 40px; min-height: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 12px;
  }
  .compras-view.is-sc #comprasFotosBtn > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .compras-view.is-sc #comprasFotosBtn.hidden { display: none; }

  /* Com este botão, o "Configurações" por extenso estourava a linha do celular em 21px (selo 150,
     menu 170 e fotos 40 numa faixa de 351). Ele vira só ícone, como os outros, e vai para a
     ponta: o menu abre ancorado à direita do gatilho e, no meio da linha, sairia da tela. */
  .compras-view.is-sc .compras-head-actions:has(#comprasFotosBtn:not(.hidden)) .compras-settings.is-grouped { flex: none; order: 1; }
  .compras-view.is-sc .compras-head-actions:has(#comprasFotosBtn:not(.hidden)) .compras-settings-trigger {
    width: 40px; min-height: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 12px;
  }
  .compras-view.is-sc .compras-head-actions:has(#comprasFotosBtn:not(.hidden)) .compras-settings-trigger > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

.cf {
  --cf-borda: color-mix(in srgb, var(--line-strong) 34%, transparent);
  --cf-borda-forte: color-mix(in srgb, var(--line-strong) 55%, transparent);
  --cf-visor: #f4f6fb;
  --cf-marca: #8a93a3;
  --cf-ease: cubic-bezier(0.2, 0, 0, 1);
  display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; font-family: var(--font-ui);
}
.cf-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.cf button:hover, .cf button:active { transform: none; box-shadow: none; }
.cf-cod { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .68rem; color: var(--text-secondary); }

/* ── Botões ─────────────────────────────────────────────────────────────────────────────── */
.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; height: 44px; padding: 0 16px; border-radius: 12px;
  font-size: .86rem; font-weight: 600; white-space: nowrap;
}
.cf-btn svg { width: 16px; height: 16px; flex: none; }
.cf-btn-pri { background-color: var(--brand-500); color: #fff; font-weight: 700; }
.cf-btn-sec { border: 1px solid var(--cf-borda-forte); background-color: var(--bg-surface); color: var(--brand-700); }
.cf-btn-contorno { border: 1.5px solid var(--brand-500); background-color: var(--bg-surface); color: var(--brand-700); font-weight: 700; }
.cf-btn.is-largo { flex: 1 1 auto; }
.cf-btn.is-mini { min-height: 40px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: .78rem; gap: 5px; }
.cf-btn.is-mini svg { width: 13px; height: 13px; }
.cf-icone {
  display: grid; place-items: center; flex: none; width: 44px; min-height: 44px; height: 44px; padding: 0;
  border-radius: 12px; background-color: transparent; color: var(--text-secondary);
}
.cf-icone svg { width: 17px; height: 17px; }
.cf-icone.is-perigo { color: var(--danger-600); }

/* ── Topo: voltar, título, medidor, permissões ──────────────────────────────────────────── */
.cf-barra { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.cf-voltar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 8px;
  border-radius: 12px; background-color: transparent; color: var(--brand-700); font-size: .88rem; font-weight: 700;
}
.cf-voltar svg { width: 17px; height: 17px; }
.cf-titulos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cf-titulo { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary); }
.cf-sub { margin: 0; font-size: .8rem; color: var(--text-secondary); }
.cf-medidor { margin-left: auto; display: flex; flex-direction: column; gap: 6px; width: 260px; }
.cf-medidor-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.cf-medidor-rot { font-size: .76rem; font-weight: 600; color: var(--text-secondary); }
.cf-medidor-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--text-secondary); }
.cf-medidor-num b { font-weight: 600; color: var(--text-primary); }
.cf-medidor-trilho { display: block; height: 6px; border-radius: 999px; background: #e3e8f2; overflow: hidden; }
.cf-medidor-barra { display: block; height: 100%; border-radius: 999px; background: var(--brand-500); transition: width .6s var(--cf-ease); }

/* ── Filtros ────────────────────────────────────────────────────────────────────────────── */
.cf-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* A busca encolhe até 220px antes de a linha quebrar; quando quebra, os dois seletores descem
   juntos (.cf-filtros-dir) e ela volta a crescer até 420px. */
.cf-busca { position: relative; flex: 1 1 220px; min-width: 220px; max-width: 420px; }
.cf-busca > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-secondary); pointer-events: none;
}
.cf-busca input {
  width: 100%; height: 44px; padding: 0 42px 0 40px; border-radius: 12px; font-size: .9rem;
  border: 1px solid var(--cf-borda-forte); background: var(--bg-surface);
}
.cf-busca input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--focus-ring); outline: none; }
/* Vazia, o "x" de limpar some e a folga dele volta para o texto de ajuda, que cortava na busca curta. */
.cf-busca input:placeholder-shown { padding-right: 12px; }
.cf-busca input::-webkit-search-cancel-button { display: none; }
.cf-busca-x {
  position: absolute; right: 6px; top: 0; bottom: 0; margin: auto 0; display: grid; place-items: center;
  width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; background-color: transparent; color: var(--text-secondary);
}
.cf-busca-x svg { width: 14px; height: 14px; }
.cf-busca-x[hidden] { display: none; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; transition: opacity .2s; }
.cf-chips.is-em-busca { opacity: .5; }
.cf-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid #c9cfdb; background-color: var(--bg-surface); color: #262d38;
  font-size: .86rem; font-weight: 600;
}
.cf-chip.is-ativo { border: 1.5px solid var(--brand-500); background-color: var(--brand-500); color: #fff; font-weight: 700; }
.cf-chip-n { font-family: var(--font-mono); font-size: .74rem; opacity: .8; }
.cf-chip[aria-disabled="true"] { cursor: default; }

/* Departamento: o select com busca do portal (components/select-dropdown.js) vestido como o botão
   do Ordenar e colado nele. Com departamento escolhido o gatilho ganha a cor da marca, que é o
   sinal de que a grade está recortada (só o texto mudando passava batido). */
.cf-filtros-dir { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cf-depsel { min-width: 0; transition: opacity .2s; }
.cf-depsel[hidden] { display: none; }
.cf-depsel.is-em-busca { opacity: .5; }
.cf-depsel .gsel { width: auto; }
.cf-depsel .gsel-trigger {
  gap: 8px; min-height: 44px; height: 44px; padding: 0 12px 0 14px;
  border-radius: 12px; border: 1px solid #c9cfdb; background-color: var(--bg-surface); color: var(--text-primary);
  font-size: .86rem; white-space: nowrap;
}
.cf-depsel .gsel-trigger:disabled { cursor: default; }
.cf-depsel-ico { width: 16px; height: 16px; flex: none; color: var(--text-secondary); }
.cf-depsel-rot { flex: none; color: var(--text-secondary); }
.cf-depsel .gsel-value { flex: 0 1 auto; max-width: 190px; font-weight: 600; color: var(--brand-700); }
.cf-depsel .gsel-chevron { width: 16px; height: 16px; color: var(--text-secondary); }
.cf-depsel .gsel.is-filtrando .gsel-trigger {
  border-color: var(--brand-500); background-color: color-mix(in srgb, var(--brand-500) 8%, var(--bg-surface));
}
.cf-depsel .gsel.is-filtrando .cf-depsel-ico,
.cf-depsel .gsel.is-filtrando .gsel-chevron { color: var(--brand-600); }
.cf-depsel .gsel-panel {
  z-index: 65; width: 288px; min-width: 100%;
  border: 1px solid var(--cf-borda); border-radius: 14px; box-shadow: 0 14px 36px rgba(16, 26, 45, .16);
}
.cf-depsel .gsel-panel:not(.is-busca),
.cf-depsel .gsel-panel.is-busca .gsel-list { max-height: min(392px, 55vh); }
.cf-depsel .gsel-panel .gsel-option,
.cf-depsel .gsel-panel.is-busca .gsel-option { min-height: 38px; padding: 6px 10px; font-size: .86rem; }
.cf-depsel-n { flex: none; font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cf-depsel .gsel-option.is-vazio { color: var(--text-secondary); }
.cf-depsel .gsel-option.is-vazio .cf-depsel-n { opacity: .6; }
@media (pointer: coarse) { .cf-depsel .gsel-panel .gsel-option { min-height: 44px; } }

/* Ordenar: um botão com menu. A opção ativa mostra a seta do sentido; clicar nela de novo inverte
   (a seta gira) e o terceiro clique volta a "Mais pedidos". */
.cf-ordem { position: relative; }
.cf-ordem-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; height: 44px; padding: 0 12px 0 14px;
  border-radius: 12px; border: 1px solid #c9cfdb; background-color: var(--bg-surface); color: var(--text-primary);
  font-size: .86rem; font-weight: 400; white-space: nowrap;
}
.cf-ordem-btn > svg { width: 16px; height: 16px; flex: none; color: var(--text-secondary); transition: transform .18s var(--cf-ease); }
.cf-ordem-btn b { font-weight: 600; color: var(--brand-700); }
.cf-ordem-rot { color: var(--text-secondary); }
.cf-ordem-btn[aria-expanded="true"] { border-color: var(--brand-500); }
.cf-ordem-btn[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.cf-ordem-menu {
  position: absolute; z-index: 65; top: calc(100% + 8px); right: 0; width: 272px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border: 1px solid var(--cf-borda); border-radius: 14px; background: var(--bg-surface);
  box-shadow: 0 14px 36px rgba(16, 26, 45, .16);
}
@media (prefers-reduced-motion: no-preference) {
  .cf-ordem-menu { animation: cf-menu .16s var(--cf-ease); }
}
@keyframes cf-menu { from { opacity: 0; transform: translateY(-4px); } }
.cf-ordem-op {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px;
  padding: 6px 12px; border-radius: 10px; background-color: transparent; color: var(--text-primary);
  font-size: .88rem; font-weight: 500; text-align: left;
}
.cf-ordem-op.is-ativa { background-color: #edf1ff; color: var(--brand-700); font-weight: 600; }
.cf-ordem-op > svg { width: 18px; height: 18px; flex: none; color: var(--brand-500); }
.cf-ordem-op.is-invertida > svg { transform: rotate(180deg); }
.cf-ordem-op:disabled { color: #8a93a3; cursor: not-allowed; }
.cf-ordem-op:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.cf-ordem-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cf-ordem-txt small { font-size: .74rem; font-weight: 400; color: var(--text-secondary); }
.cf-ordem-op:disabled .cf-ordem-txt small { color: #8a93a3; }
.cf-ordem-dica {
  margin: 4px 0 0; padding: 8px 12px 4px; border-top: 1px solid #edf1fa;
  font-size: .74rem; line-height: 1.4; color: var(--text-secondary);
}

/* ── Corpo: a grade ─────────────────────────────────────────────────────────────────────── */
.cf-corpo { min-width: 0; }
.cf-grade { min-width: 0; }
.cf-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 14px;
}
/* Altura igual na linha: o item da grade estica (stretch) e o card ocupa a altura toda, com os
   pedidos presos no pé. */
.cf-tile { position: relative; display: flex; min-width: 0; }
.cf-tile-main {
  display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; min-width: 0; padding: 0; text-align: left;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--cf-borda-forte); background-color: var(--bg-surface);
  color: var(--text-primary); font-weight: 400; box-shadow: 0 1px 2px rgba(16, 26, 45, .08);
  transition: border-color .18s var(--cf-ease), box-shadow .18s var(--cf-ease);
}
@media (hover: hover) {
  .cf .cf-tile-main:hover { border-color: var(--brand-500); background-image: none; }
}
/* A borda de 2 px vem de 1 px de borda + 1 px de sombra: engrossar a borda crescia o card meio
   pixel e empurrava as linhas de baixo, atrás da gaveta. */
.cf-tile.is-sel .cf-tile-main { border-color: var(--brand-500); box-shadow: 0 0 0 1px var(--brand-500), 0 0 0 5px rgba(69, 98, 143, .14); }
/* A foto fica numa camada absoluta, como o `.cl-card-foto` da vitrine: em fluxo, a imagem em pe
   (avental, bone) virava o tamanho minimo da caixa de aspect-ratio e esticava o card e a fileira. */
.cf-face {
  position: relative; display: block; flex: none; aspect-ratio: 4 / 3; min-height: 0; background: #fff;
  border-bottom: 1px solid var(--md-sys-color-surface-container, #edf1fa);
}
.cf-face > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.cf-tile-corpo { display: flex; flex-direction: column; flex: 1 1 auto; gap: 4px; padding: 10px 12px 12px; min-width: 0; }
.cf-tile-corpo .cf-cod { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-nome {
  font-size: .8rem; font-weight: 600; line-height: 1.3; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cf-ped {
  margin-top: auto; padding-top: 6px; font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  color: var(--brand-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Quantas opções o produto tem: selo no pé da foto, para não disputar a linha do código. */
.cf-opc {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(69, 98, 143, .3);
  background: var(--bg-surface); color: var(--brand-600); font-family: var(--font-mono); font-size: .64rem;
  font-weight: 600; white-space: nowrap;
}
.cf-opc svg { width: 11px; height: 11px; flex: none; }
.cf-cam { display: none; }
.cf-selo {
  position: absolute; top: 7px; left: 7px; display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: 999px; font-size: .64rem; font-weight: 700;
}
.cf-selo svg { width: 11px; height: 11px; }
.cf-selo.is-req { background: #fdf0e1; color: #8a4a0e; }
.cf-selo.is-ok { left: auto; right: 7px; background: #e3f0e6; color: #2c5e36; animation: cf-pop .32s var(--cf-ease); }
@keyframes cf-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* O visor: quadro vazio com marcas de corte nos quatro cantos. */
.cf-visor {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px; background: var(--cf-visor); color: var(--cf-marca); text-align: center;
}
.cf-visor > svg { width: 22px; height: 22px; }
.cf-visor-txt { font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cf-visor-sub { font-size: .78rem; color: var(--text-secondary); max-width: 250px; line-height: 1.4; }
.cf-marca { position: absolute; width: 11px; height: 11px; border: 0 solid currentColor; }
.cf-marca.is-a { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.cf-marca.is-b { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.cf-marca.is-c { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.cf-marca.is-d { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.cf-visor.is-grande { gap: 8px; }
.cf-visor.is-grande > svg { width: 32px; height: 32px; }
.cf-visor.is-grande .cf-visor-txt { font-size: .74rem; }
.cf-visor.is-grande .cf-marca { width: 16px; height: 16px; }
.cf-tile.is-sel .cf-visor { background: #eef3fd; color: var(--brand-500); }

/* Esqueleto enquanto a grade carrega. */
.cf-lista.is-esqueleto .cf-tile { border-radius: 14px; overflow: hidden; border: 1px solid var(--cf-borda); background: var(--bg-surface); }
.cf-lista.is-esqueleto .cf-face { background: var(--bg-muted); }
.cf-sk { display: block; height: 10px; border-radius: 6px; background: var(--bg-muted); }
.cf-sk.is-curto { width: 55%; }
@media (prefers-reduced-motion: no-preference) {
  .cf-lista.is-esqueleto .cf-face, .cf-sk { animation: cf-pulso 1.4s ease-in-out infinite; }
}
@keyframes cf-pulso { 50% { opacity: .55; } }
.cf-sentinela { height: 1px; }
.cf-estado {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-8) var(--space-6); border: 1px dashed var(--cf-borda-forte); border-radius: 16px;
  color: var(--text-secondary); font-size: .9rem;
}
.cf-estado p { margin: 0; }

/* ── Gaveta (a bancada) ─────────────────────────────────────────────────────────────────── */
/* Por cima da grade, como a gaveta de foto da Requisição (.req-drawer): o mesmo véu, a mesma
   sombra, a mesma camada (60/61) e a entrada pela direita. A grade de trás não muda de largura
   nem de colunas: a trava de rolagem devolve a largura da barra em padding (travarFundo). */
.cf-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(16, 26, 45, .42); }
.cf-scrim[hidden] { display: none; }
.cf-gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(440px, 92vw);
  display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain;
  background: var(--bg-surface); box-shadow: -8px 0 30px rgba(16, 26, 45, .2);
}
.cf-gaveta[hidden] { display: none; }
.cf-gaveta:focus { outline: none; }
/* Saindo, ela ainda está na tela por 180 ms: o clique já passa para a grade. */
.cf-gaveta.is-saindo, .cf-scrim.is-saindo { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .cf-gaveta { animation: cf-entra .22s var(--cf-ease); }
  .cf-gaveta.is-saindo { animation: cf-sai .18s var(--cf-ease) forwards; }
  .cf-scrim { animation: cf-vela .22s ease; }
  .cf-scrim.is-saindo { animation: cf-vela-sai .18s ease forwards; }
}
@keyframes cf-entra { from { transform: translateX(100%); } }
@keyframes cf-sai { to { transform: translateX(100%); } }
@keyframes cf-vela { from { opacity: 0; } }
@keyframes cf-vela-sai { to { opacity: 0; } }
body.cf-gaveta-aberta { overflow: hidden; }
.cf-gaveta-cab { display: flex; align-items: flex-start; gap: 10px; padding: 16px 12px 12px 18px; border-bottom: 1px solid #edf1fa; }
.cf-gaveta-tit { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.cf-gaveta-tit h3 { margin: 0; font-family: var(--font-display); font-size: 1.02rem; font-weight: 800; line-height: 1.25; color: var(--text-primary); }
/* flex 1: na tela cheia do celular o rodapé desce para onde o polegar alcança. */
.cf-gaveta-corpo { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.cf-gaveta-pe { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid #edf1fa; }

.cf-alvo { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--md-sys-color-surface-container, #edf1fa); }
.cf-alvo button {
  flex: 1; min-height: 38px; height: 38px; padding: 0 8px; border-radius: 9px;
  background-color: transparent; color: #404752; font-size: .8rem; font-weight: 600;
}
.cf-alvo button[aria-checked="true"] { background-color: #fff; color: var(--brand-700); font-weight: 700; box-shadow: 0 1px 3px rgba(16, 26, 45, .16); }

.cf-quadro {
  position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--cf-borda); background: #fff;
}
.cf-quadro > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cf-quadro.is-soltar { border: 1.5px dashed #9aa6bd; cursor: pointer; }
.cf-quadro.is-soltar .cf-visor { background: #eef3fd; color: var(--brand-500); }
.cf-quadro.is-soltar.is-arrastando { border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--focus-ring); }
.cf-quadro.is-soltar.is-arrastando .cf-visor { background: #e3ebfb; }
.cf-quadro.is-preparando .cf-visor { background: #eef3fd; color: var(--brand-500); }
@media (prefers-reduced-motion: no-preference) {
  .cf-quadro.is-preparando .cf-visor > svg { animation: cf-pulso 1s ease-in-out infinite; }
  .cf-quadro.is-salvo { animation: cf-salvo .5s var(--cf-ease); }
}
@keyframes cf-salvo { 0% { box-shadow: 0 0 0 0 rgba(63, 138, 79, .45); } 100% { box-shadow: 0 0 0 12px rgba(63, 138, 79, 0); } }
.cf-medida {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: 999px; background: rgba(23, 28, 36, .78); color: #fff; font-family: var(--font-mono); font-size: .66rem;
}
.cf-nota { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--text-secondary); }
.cf-origem {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px;
  background: var(--bg-muted); color: var(--text-secondary); font-size: .8rem; font-weight: 600; line-height: 1.4;
}
.cf-origem svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.cf-origem.is-req { background: #fdf5ea; color: #7a430f; }
.cf-origem.is-ok { background: #eaf4ec; color: #2c5e36; }

.cf-opcoes { list-style: none; margin: 0; padding: 0; }
.cf-opcao { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid #edf1fa; border-radius: 10px; }
.cf-opcao.is-arrastando { background: #eef3fd; box-shadow: inset 0 0 0 1.5px var(--brand-500); }
.cf-opcao-mini {
  position: relative; flex: none; width: 56px; height: 42px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--cf-borda); background: #fff;
}
.cf-opcao-mini > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cf-opcao-mini .cf-visor { padding: 0; }
.cf-opcao-mini .cf-visor > svg { width: 15px; height: 15px; }
.cf-opcao-mini .cf-marca { width: 7px; height: 7px; border-width: 0; }
.cf-opcao-mini .cf-marca.is-a { top: 4px; left: 4px; border-width: 1.5px 0 0 1.5px; }
.cf-opcao-mini .cf-marca.is-b { top: 4px; right: 4px; border-width: 1.5px 1.5px 0 0; }
.cf-opcao-mini .cf-marca.is-c { bottom: 4px; left: 4px; border-width: 0 0 1.5px 1.5px; }
.cf-opcao-mini .cf-marca.is-d { bottom: 4px; right: 4px; border-width: 0 1.5px 1.5px 0; }
.cf-ponto-req { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #c9771f; box-shadow: 0 0 0 2px #fff; }
.cf-opcao-info { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.cf-opcao-info b { font-size: .82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Celular: a grade vira lista com o botão da câmera à direita (fotografar do corredor), e a
   gaveta vira a tela inteira. */
@media (max-width: 760px) {
  .cf { gap: var(--space-3); }
  .cf-barra { gap: var(--space-2) var(--space-3); }
  .cf-voltar { width: 44px; min-height: 44px; padding: 0; justify-content: center; background-color: #edf1fa; }
  .cf-voltar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cf-sub { display: none; }
  .cf-medidor { order: 5; width: 100%; margin-left: 0; }
  .cf-permissoes { margin-left: auto; }
  .cf-permissoes span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cf-permissoes { width: 44px; padding: 0; }
  .cf-busca { flex: 1 1 100%; max-width: none; }
  /* Departamento e Ordenar na mesma linha: o Ordenar vira só o ícone (o texto segue para o leitor
     de tela) e ganha um ponto quando a ordem não é a padrão; o Departamento fica com o resto. */
  .cf-filtros-dir { flex: 1 1 100%; }
  .cf-depsel { flex: 1 1 auto; }
  .cf-depsel .gsel { width: 100%; }
  .cf-depsel .gsel-value { flex: 1 1 auto; max-width: none; }
  .cf-ordem-btn { position: relative; width: 44px; padding: 0; justify-content: center; }
  .cf-ordem-btn > .cf-ordem-rot,
  .cf-ordem-btn > b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cf-ordem-btn > svg:last-child { display: none; }
  .cf-ordem-btn.is-mudada::after {
    content: ''; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-500); box-shadow: 0 0 0 2px var(--bg-surface);
  }
  .cf-lista { grid-template-columns: 1fr; gap: 0; }
  .cf-tile { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf1fa; }
  .cf-tile-main {
    flex-direction: row; align-items: center; gap: 12px; border: 0; border-radius: 0; box-shadow: none;
    background-color: transparent; flex: 1 1 auto; min-width: 0;
  }
  .cf-tile.is-sel .cf-tile-main { border: 0; box-shadow: none; }
  .cf-face { flex: none; width: 64px; aspect-ratio: auto; height: 52px; border-radius: 10px; overflow: hidden; border: 1px solid var(--cf-borda); }
  .cf-face .cf-visor-txt, .cf-face .cf-selo, .cf-face .cf-opc { display: none; }
  .cf-face .cf-visor > svg { width: 17px; height: 17px; }
  .cf-face .cf-marca { width: 8px; height: 8px; }
  .cf-tile-corpo { padding: 0; }
  .cf-tile-corpo .cf-cod { display: none; }
  .cf-nome { min-height: 0; font-size: .86rem; }
  .cf-cam {
    display: grid; place-items: center; flex: none; width: 48px; min-height: 48px; height: 48px; padding: 0;
    border-radius: 14px; background-color: var(--brand-500); color: #fff;
  }
  .cf-cam svg { width: 20px; height: 20px; }
  .cf-lista.is-esqueleto .cf-tile { border: 0; border-bottom: 1px solid #edf1fa; border-radius: 0; }
  /* Tela inteira, acima da barra inferior do portal (100). O toast (110) sobe junto, senão o
     "Foto salva." e os erros do envio ficavam escondidos atrás dela. */
  .cf-gaveta { left: 0; width: auto; z-index: 1200; box-shadow: none; }
  body.cf-gaveta-aberta .toast-stack { z-index: 1202; }
  .cf-gaveta-pe { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cf-btn { min-height: 48px; height: 48px; }
}

/* ── Diálogo de Permissões (global: vive na raiz do <body>) ─────────────────────────────── */
.cf-perm { display: flex; flex-direction: column; gap: var(--space-2); min-width: min(460px, 78vw); }
.cf-perm-busca { position: relative; display: block; }
.cf-perm-busca > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px;
  color: var(--text-secondary); pointer-events: none;
}
/* `.modal-card input[type="search"]` (views.css) vence um seletor de duas classes: por isso o tipo. */
.cf-perm .cf-perm-busca input[type="search"] {
  width: 100%; height: 42px; padding: 0 12px 0 36px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 55%, transparent);
}
.cf-perm .cf-perm-busca input[type="search"]:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--focus-ring); outline: none; }
.cf-perm-rolagem { max-height: 52vh; overflow-y: auto; padding-right: 2px; }
.cf-perm-sec {
  margin: var(--space-3) 0 2px; font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary);
}
.cf-perm-sec:first-child { margin-top: var(--space-1); }
.cf-perm-sec[hidden], .cf-perm-linha[hidden], .cf-perm-vazio[hidden] { display: none; }
.cf-perm-lista { list-style: none; margin: 0; padding: 0; }
.cf-perm-linha { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #edf1fa; }
.cf-perm-ini {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #edf1fa; color: var(--brand-700); font-size: .72rem; font-weight: 700;
}
.cf-perm-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.cf-perm-info b { font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-perm-info small { font-size: .72rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-perm-papel { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: var(--text-secondary); }
.cf-perm-papel svg { width: 14px; height: 14px; }
.cf-perm-chave { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .8rem; font-weight: 600; color: #404752; }
.cf-perm-chave input { position: absolute; opacity: 0; width: 42px; height: 24px; right: 0; margin: 0; cursor: pointer; }
.cf-chave {
  position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: #c9cfdb;
  transition: background-color .18s ease;
}
.cf-chave::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s cubic-bezier(0.2, 0, 0, 1);
}
.cf-perm-chave input:checked + .cf-chave { background: var(--brand-500); }
.cf-perm-chave input:checked + .cf-chave::after { transform: translateX(18px); }
.cf-perm-chave input:focus-visible + .cf-chave { box-shadow: 0 0 0 4px var(--focus-ring); }
.cf-perm-chave input:disabled + .cf-chave { opacity: .55; }
.cf-perm-chave:has(input:disabled) { cursor: not-allowed; }
.cf-perm-vazio { margin: var(--space-3) 0; font-size: .84rem; color: var(--text-secondary); }
.cf-perm-nota { margin: var(--space-2) 0 0; font-size: .74rem; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .cf-chave, .cf-chave::after, .cf-medidor-barra, .cf-tile-main, .cf-ordem-btn > svg { transition: none; }
  .cf-selo.is-ok { animation: none; }
}