/* Camada visual da Fase 2 (CSS puro, sobre a página REAL do produto). IDs e funções da base permanecem intactos — nada aqui esconde, com display:none, um elemento que o JS do produto usa
   (o quadro de avisos vai para a #fase2-reserva e volta; as caixas de administrador seguem a classe "hidden" que o PRODUTO controla). */
.app.interface-visual .unidade-content,
.app.interface-visual .bloco-content,
.app.interface-visual .blocos-content { max-width:1280px; margin:0 auto; padding:16px 20px 28px; }
.app.interface-visual .unidade-content > .card,
.app.interface-visual .bloco-content > .card,
.app.interface-visual .blocos-content > .card { border-radius:12px; }
.app.interface-visual #unidade-abas-categoria { display:flex; flex:1 1 100%; min-width:0; max-width:none!important; flex-wrap:nowrap!important; overflow-x:auto; scrollbar-width:thin; }
.app.interface-visual #unidade-abas-categoria > * { flex:0 0 auto; min-height:34px; white-space:nowrap; }
.app.interface-visual #unidade-sincronizar-caixa { flex:0 1 auto; align-items:center; justify-content:flex-end; gap:6px; }
.app.interface-visual #unidade-sincronizar-caixa > button,
.app.interface-visual .sync-progresso-parar { min-height:34px; padding:7px 10px; border-radius:8px; }
.app.interface-visual .sync-progresso { display:inline-flex; align-items:center; gap:6px; min-height:34px; }
.app.interface-visual .sync-progresso .barra-similaridade { width:92px; }
.app.interface-visual #unidade-modo-cadastrar .card > div:first-child { align-items:center; }
.app.interface-visual #btn-toggle-cadastro-massa { flex:0 0 auto; }
.app.interface-visual #btn-cadastrar-unidade { min-width:120px; margin-top:8px!important; }
.app.interface-visual .unidade-avisos-acoes,
.app.interface-visual .avisos-acoes { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.app.interface-visual .btn-avisos-acao { min-height:32px; padding:6px 10px; border-radius:8px; font-size:12px; }
.app.interface-visual #unidade-modo-historico .acoes,
.app.interface-visual #unidade-modo-visibilidade .acoes { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.app.interface-visual #unidade-modo-visibilidade { display:flex; flex-direction:column; gap:14px; }
.app.interface-visual #unidade-modo-visibilidade > #unidade-historico-config,
.app.interface-visual #unidade-modo-visibilidade > #unidade-oculto-admin-unidade { max-width:none!important; margin-top:0!important; }
.app.interface-visual .fase2-config-section { max-width:none; margin:0; }
.app.interface-visual .fase2-config-section h3 { margin:0 0 4px; font-size:15px; }
.app.interface-visual .fase2-config-help { margin:0 0 10px; color:var(--text-muted); font-size:13px; }
.app.interface-visual #fase2-config-sync #unidade-sincronizar-caixa { display:flex!important; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:8px; }
.app.interface-visual #fase2-config-sync #unidade-sincronizar-caixa > button { min-height:34px; padding:7px 12px; border-radius:8px; }
.app.interface-visual #unidade-abas-categoria .seg-btn:last-child { display:inline-flex; align-items:center; gap:6px; }
.app.interface-visual .fase2-configuracoes-gatilho { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text); white-space:nowrap; }
.app.interface-visual .fase2-configuracoes-gatilho[aria-expanded="true"] { border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, var(--surface-2)); }
.app.interface-visual .fase2-configuracoes-painel { margin:0 0 14px; padding:16px; }
.app.interface-visual .fase2-configuracoes-painel h2 { margin:0 0 4px; font-size:16px; }
.app.interface-visual .fase2-configuracoes-ajuda { margin:0 0 12px; color:var(--text-muted); font-size:13px; }
.app.interface-visual #fase2-configuracoes-blocos-painel #bloco-sincronizar-caixa { display:flex!important; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.app.interface-visual #fase2-configuracoes-blocos-painel #bloco-sincronizar-caixa > button { min-height:34px; padding:7px 12px; border-radius:8px; }
.app.interface-visual #fase2-configuracoes-blocos-painel #bloco-perfil-caixa { margin-top:4px; }
.app.interface-visual #btn-salvar-historico-config-unidade,
.app.interface-visual #btn-salvar-historico-config-todas-unidades { min-height:34px; padding:7px 12px; border-radius:8px; }
.app.interface-visual button { box-sizing:border-box; }
@media (max-width:900px) {
  .app.interface-visual .unidade-content,
  .app.interface-visual .bloco-content,
  .app.interface-visual .blocos-content { padding:10px 12px 20px; }
  .app.interface-visual #unidade-abas-categoria { max-width:100%; }
  .app.interface-visual #unidade-sincronizar-caixa { justify-content:flex-start; }
}
@media (max-height:620px) {
  .app.interface-visual .unidade-content,
  .app.interface-visual .bloco-content,
  .app.interface-visual .blocos-content { padding-top:8px; }
}

/* Unidade: ações rápidas no mesmo cabeçalho e conteúdo em duas colunas. */
.app.interface-visual .topbar > div:first-child { gap:8px; }
.app.interface-visual .unidade-avisos-icone {
  width:36px; height:34px; min-width:36px; padding:7px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:8px;
}
.app.interface-visual .unidade-avisos-icone svg { width:18px; height:18px; }
.app.interface-visual #unidade-modo-cadastrar { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr); gap:14px; align-items:start; }
.app.interface-visual #unidade-modo-cadastrar > .card:first-child { grid-column:1; grid-row:1; min-width:0; }
.app.interface-visual #unidade-modo-cadastrar > #unidade-cadastro-massa { grid-column:1 / -1; grid-row:2; min-width:0; }
.app.interface-visual #unidade-modo-cadastrar > .unidade-mural { display:contents; }
.app.interface-visual #unidade-modo-cadastrar #cadastros-recentes { grid-column:2; grid-row:1; margin-top:0; min-width:0; }
.app.interface-visual #unidade-validade-campos { align-items:center; }
.app.interface-visual #btn-toggle-cadastro-massa { min-height:34px; margin-left:2px; white-space:nowrap; }
.app.interface-visual .topbar > .unidade-avisos-icone { order:2; margin-left:auto; }
.app.interface-visual .topbar > .aparencia-rapida { order:3; margin-left:0; }
@media (max-width:900px) {
  .app.interface-visual #unidade-modo-cadastrar { grid-template-columns:1fr; }
  .app.interface-visual #unidade-modo-cadastrar > .card:first-child,
  .app.interface-visual #unidade-modo-cadastrar > #unidade-cadastro-massa,
  .app.interface-visual #unidade-modo-cadastrar #cadastros-recentes { grid-column:1; grid-row:auto; }
}
.app.interface-visual #unidade-validade-campos { align-items:center; }

/* ---- reserva (o quadro de avisos real mora aqui enquanto o diálogo está fechado) ---- */
#fase2-reserva[hidden] { display:none !important; }

/* ---- quadro de avisos REAL dentro do diálogo central arrastável (P3/P4/P7) ---- */
.fase2-dialogo #quadro-avisos { margin:0; padding:0; border:0; box-shadow:none; background:transparent; min-width:0; }
.fase2-dialogo #quadro-avisos > div:first-child > h3 { display:none; }              /* o título já está na cabeça do diálogo */
.fase2-dialogo #quadro-avisos > div:first-child { justify-content:flex-end; }        /* PDF e Lixeira à direita, como no popup de avisos */
.fase2-dialogo #quadro-avisos .quadro-avisos-form textarea { width:100%; box-sizing:border-box; }
.app.interface-visual .unidade-avisos-icone[hidden] { display:none !important; }
.fase2-config-section[hidden], .fase2-configuracoes-gatilho[hidden] { display:none !important; }

/* ---- diálogos do PRODUTO (.cropper-overlay > .cropper-box) arrastáveis pelo título ---- */
.fase2-alca { cursor:grab; touch-action:none; user-select:none; }
.fase2-arrastando .fase2-alca { cursor:grabbing; }
.cropper-box { max-height:calc(100vh - 16px); overflow:auto; }
.cropper-box.fase2-arrastando { box-shadow:0 26px 64px rgba(10,14,25,.44); }

/* ---- "Cadastro em massa" junto da validade (envoltório sempre visível) ---- */
.app.interface-visual .fase2-validade-linha { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.app.interface-visual .fase2-validade-linha > #unidade-validade-campos { margin:0; }

/* ---- tira de abas numa linha só: compacta em telas pequenas e ⚙ Configurações sempre à vista (a tira rola por dentro) ---- */
@media (max-width:1180px) {
  .app.interface-visual #unidade-abas-categoria > .seg-btn { padding:6px 9px; font-size:12px; }
}
.app.interface-visual #unidade-abas-categoria > .seg-btn[data-categoria="__visibilidade__"]:not(.active) { position:sticky; right:0; z-index:1; background:var(--surface-2); box-shadow:-10px 0 8px -4px var(--surface-2); }
.app.interface-visual #unidade-abas-categoria > .seg-btn[data-categoria="__visibilidade__"].active { position:sticky; right:0; z-index:1; }