/* O que o Compras Fácil acrescenta à estética do Imposto Fácil (css/app.css, copiado de lá). */

/* O ícone do canto superior esquerdo é um botão: abre a troca de módulo. */
.topo .botao-marca { background: none; border: 0; padding: 4px; cursor: pointer; text-align: left; border-radius: var(--raio); }
.topo .botao-marca:hover { background: var(--primaria-fundo); }
/* No celular o app.css esconde o nome do app; aqui ele fica (é o que diz em qual módulo a pessoa está). */
@media (max-width: 640px) {
  .topo .botao-marca .nome-app { display: block; font-size: 14px; }
  .topo .botao-marca .nome-app small { display: none; }
  .topo .botao-marca img { display: none; } /* não cabe junto com o nome */
}
.folha-modulos { padding: 10px 16px 14px; background: var(--primaria-fundo); border-bottom: 1px solid var(--borda); }
.folha-modulos p { margin: 0 0 8px; }

/* Painel de liberação (e o formulário aberto das Lojas) */
.corpo-liberacao { flex-basis: 100%; padding: 4px 0 6px; }
.corpo-liberacao p { margin: 10px 0 6px; }
.corpo-liberacao .chip { display: inline-flex; align-items: center; gap: 6px; }
.corpo-liberacao .chip input { width: 18px; height: 18px; }
h3 { margin: 18px 0 8px; }

/* A engrenagem do topo e as Configurações: menu estreito à esquerda e a tela escolhida ao lado;
   no celular o menu vira uma fileira de botões em cima. */
.topo .btn.btn-engrenagem { background: var(--cartao); color: var(--primaria); font-weight: 700; }
.topo .btn.btn-engrenagem:hover, .topo .btn.btn-engrenagem.ativa { background: var(--primaria); color: #fff; }
.config-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.config-menu {
  position: sticky; top: 140px; display: flex; flex-direction: column; gap: 2px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 8px; box-shadow: var(--sombra);
}
.config-titulo { margin: 4px 8px 8px; font-weight: 800; color: var(--primaria); }
.config-menu button {
  text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 8px;
  font-weight: 600; color: var(--texto); cursor: pointer; border-left: 4px solid transparent;
}
.config-menu button:hover { background: var(--fundo, #f3f4f6); }
.config-menu button.ativa { color: var(--primaria); background: var(--fundo, #f3f4f6); border-left-color: var(--destaque); }
.config-painel { min-width: 0; }
@media (max-width: 900px) {
  .config-layout { grid-template-columns: 1fr; }
  .config-menu { position: static; flex-direction: row; flex-wrap: wrap; padding: 6px; }
  .config-titulo { width: 100%; margin: 2px 6px 4px; }
  .config-menu button { border-left: 0; border-bottom: 3px solid transparent; padding: 8px 10px; }
  .config-menu button.ativa { border-bottom-color: var(--destaque); }
}
@media (max-width: 640px) { .topo .btn-engrenagem span { display: none; } }

/* O aviso do Início: quem espera liberação, com o atalho. */
.alerta-inicio {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; padding: 14px 16px;
  background: var(--alerta); border: 1px solid #fcd34d; border-left: 6px solid var(--destaque); border-radius: 12px;
}
.alerta-icone { font-size: 26px; }
.alerta-inicio > div { flex: 1; min-width: 200px; }
.alerta-inicio b { display: block; font-size: 17px; }
.alerta-inicio > div > small { display: block; color: #555; }

/* O que vem por aí (as próximas entregas do plano) */
.lista-entregas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cartao-entrega { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); }
.cartao-entrega .alerta-icone { font-size: 22px; }
.cartao-entrega > div { min-width: 0; }
.cartao-entrega small { display: block; color: var(--suave); }
.cartao-entrega b + small { display: inline; }

/* Lojas: a logo do cabeçalho do pedido */
.lista .item .logo-mini { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
.form-loja { display: grid; gap: 4px 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.form-loja .logo-loja, .form-loja .erro, .form-loja > .acoes { grid-column: 1 / -1; }
.logo-loja { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.logo-loja img { max-width: 200px; max-height: 100px; object-fit: contain; border: 1px solid var(--borda); border-radius: 8px; padding: 6px; background: #fff; }
.logo-loja small { flex-basis: 100%; }
.logo-loja label.btn { cursor: pointer; }