/* ═════════════════════════════════════════════════════════════════════
   Componentes que o design system não traz: aviso flutuante, esqueleto
   de carregamento, estado vazio, barra de uso, cartão de plano e Pix.

   Botão, campo, cartão, tabela e diálogo já existem em _ds/styles.css
   e não são reimplementados aqui.
   ═════════════════════════════════════════════════════════════════════ */

/* — avisos —
   Canto inferior direito: no PDV o alto da tela é do operador, e um aviso
   cobrindo o total da venda seria pior que não avisar. */
.avisos {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(400px, calc(100vw - var(--space-8)));
}

/* Cartão branco, texto escuro. A cor mora no ícone e no filete da esquerda,
   nunca no bloco inteiro: o vermelho fica reservado ao erro de verdade. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: aviso-entra 160ms ease-out;
}

.aviso-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  border-radius: 50%;
  color: #fff;
}

.aviso-texto { padding-top: 1px; }

.aviso-ok      { border-left-color: var(--color-success); }
.aviso-ok      .aviso-icone { background: var(--color-success-text); }
.aviso-info    { border-left-color: var(--color-primary); }
.aviso-info    .aviso-icone { background: var(--color-primary-dark); }
.aviso-atencao { border-left-color: var(--color-warning); }
.aviso-atencao .aviso-icone { background: var(--color-warning); color: #3d2b00; }
.aviso-erro    { border-left-color: var(--color-danger); }
.aviso-erro    .aviso-icone { background: var(--color-danger-text); }

.aviso-saindo { opacity: 0; transition: opacity 200ms ease-out; }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aviso { animation: none; }
}

/* — esqueleto —
   Mostra a forma do que vem, não um spinner girando no vazio. */
.esqueleto {
  height: 16px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-border-soft) 37%,
    var(--color-surface) 63%
  );
  background-size: 400% 100%;
  animation: esqueleto-brilho 1.4s ease infinite;
}

.esqueleto:nth-child(2) { width: 82%; }
.esqueleto:nth-child(3) { width: 64%; }

@keyframes esqueleto-brilho {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
}

/* — estado vazio —
   Sempre o mesmo desenho: ícone de traço, título em negrito, apoio em
   cinza e a ação logo abaixo, tudo centralizado. */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

.vazio-icone { color: var(--color-icon); margin-bottom: var(--space-2); }
.vazio-titulo { margin: 0; font-size: 18px; font-weight: 700; color: var(--color-text); }
.vazio-texto { margin: 0; max-width: 42ch; font-size: 14px; color: var(--color-text-3); }
.vazio .btn { margin-top: var(--space-4); }

/* — barra de uso —
   Quanto do limite do plano já foi gasto. Azul enquanto folgado, amarelo
   a partir de 80% e vermelho no estouro: a cor só muda quando aperta. */
.uso { display: flex; flex-direction: column; gap: var(--space-2); }

.uso-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
}

.uso-numero { font-variant-numeric: tabular-nums; font-weight: 600; }

.uso-trilho {
  height: 8px;
  background: var(--color-primary-tint);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.uso-preenchido {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width 240ms ease-out;
}

.uso-aperto .uso-preenchido  { background: var(--color-warning); }
.uso-estouro .uso-preenchido { background: var(--color-danger); }
.uso-estouro .uso-numero     { color: var(--color-danger-text); }

/* — cartão de plano —
   O plano em destaque ganha borda azul de 2px, não sombra mais forte. */
.plano {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.plano-atual { border: 2px solid var(--color-primary); box-shadow: var(--shadow-md); }

.plano-preco {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.plano-preco small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--color-text-3); }

.plano-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.plano-lista li {
  font-size: 14px;
  padding-left: 26px;
  position: relative;
  color: var(--color-text-2);
}

/* Marca de "incluído": check azul. */
.plano-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-primary-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.6 2.6L9 1.2' fill='none' stroke='%230073e6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Recurso ausente: cinza e riscado. Ver o que falta é o que faz subir de plano. */
.plano-lista li.ausente { color: var(--color-text-3); text-decoration: line-through; }
.plano-lista li.ausente::before {
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1 1l6 6M7 1L1 7' fill='none' stroke='%23888787' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* — Pix —
   O QR e o copia-e-cola lado a lado; empilha no celular, que é onde a
   maioria vai pagar. */
.pix { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; }

.pix img {
  width: 180px;
  height: 180px;
  padding: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.pix-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-all;
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  max-height: 96px;
  overflow-y: auto;
}

@media (max-width: 560px) {
  .pix { grid-template-columns: 1fr; }
  .pix img { width: 100%; max-width: 220px; height: auto; }
}

/* — confirmação —
   Mensagem de sucesso em linha (cadastro criado, link de senha enviado). */
.sucesso {
  padding: var(--space-4);
  background: var(--color-success-tint);
  color: var(--color-success-text);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
}

/* ═════════════════════════════════════════════════════════════════════
   Telas de app (painel e PDV)
   ═════════════════════════════════════════════════════════════════════ */

/* — cabeçalho de página: título à esquerda, ações à direita — */
.pagina-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.pagina-cabeca h1 { margin: 0; font-size: 36px; }
.pagina-acoes { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Barra de busca + filtros acima da tabela. */
.barra-ferramentas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.barra-ferramentas .busca { flex: 1 1 280px; max-width: 480px; }

/* — tabela clicável — */
.tabela-rolagem { overflow-x: auto; }
.table .direita { text-align: right; }
.table td.numero { font-variant-numeric: tabular-nums; }
.table tr.clicavel { cursor: pointer; }
.table td .linha { gap: var(--space-3); }
.table .sub { display: block; font-size: 12px; color: var(--color-text-3); }

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* — indicadores do painel — */
.indicadores { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--space-6); }

.indicador {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.indicador-rotulo { font-size: 13px; color: var(--color-text-2); }
.indicador-valor { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
/* Precisa de atenção (devedor vencido, estoque baixo) mas não é falha: âmbar. */
.indicador-atencao { border-color: var(--color-warning); background: var(--color-warning-tint); }
.indicador-atencao .indicador-valor { color: var(--color-warning-text); }
.indicador-destaque { background: var(--color-primary-tint); border-color: transparent; }

.blocos { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.bloco { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.bloco h2 { font-size: 20px; margin-bottom: var(--space-4); }

/* — contador "0/100" no rótulo do campo — */
.field > label { display: flex; gap: 2px; }
.field .contador { margin-left: auto; font-size: 12px; color: var(--color-text-3); }

/* — rodapé fixo de formulário —
   Preso à base da tela, à direita da sidebar. Só aparece quando há o que
   salvar (ou sempre, nos formulários de cadastro). */
.rodape-form {
  position: fixed;
  left: var(--lateral-largura);
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

.rodape-form.visivel { display: block; }
.rodape-form-conteudo { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-8); }
.lateral-recolhida .rodape-form { left: var(--lateral-recolhida); }
.tem-rodape-form .app-pagina { padding-bottom: 112px; }

@media (max-width: 900px) {
  .rodape-form, .lateral-recolhida .rodape-form { left: 0; }
  .rodape-form-conteudo { padding: var(--space-3) var(--space-4); }
}

/* — abas dentro de uma página — */
.abas { margin-bottom: var(--space-6); overflow-x: auto; }
.aba { white-space: nowrap; }

/* — formulário de cadastro em página inteira — */
.form-pagina { display: grid; gap: var(--space-6); max-width: 880px; }
.form-pagina .cartao-form { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.form-pagina .cartao-form > h2 { font-size: 18px; margin: 0; }
.form-linha { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* — detalhe em duas colunas (rótulo / valor) — */
.detalhe { display: grid; gap: var(--space-3); font-size: 15px; }
.detalhe > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.detalhe .rotulo { color: var(--color-text-3); }
.total-linha { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-3); border-top: 1px solid var(--color-border-soft); font-weight: 700; font-size: 18px; }

.cupom { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-sm); max-height: 260px; overflow: auto; }

/* — alertas em linha: mesma linguagem dos avisos —
   Variação pela classe: alerta-info | alerta-atencao | alerta-erro | alerta-sucesso. */
.alerta-info    { background: var(--color-primary-tint);  color: var(--color-primary-deep); border-left-color: var(--color-primary); }
.alerta-atencao { background: var(--color-warning-tint);  color: var(--color-warning-text); border-left-color: var(--color-warning); }
.alerta-erro    { background: var(--color-danger-tint);   color: #7a0000;                   border-left-color: var(--color-danger); }
.alerta-sucesso { background: var(--color-success-tint);  color: var(--color-success-text); border-left-color: var(--color-success); }

/* — alerta de bloqueio —
   Faixa vermelho-clara com régua à esquerda: é a única coisa que importa
   na tela quando a conta está travada. */
/* Só o formato; a cor vem da variação (alerta-info, -atencao, -erro, -sucesso). */
.alerta {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-left: 4px solid transparent;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
}

/* — seletor de loja (lista de todas as lojas do usuário) — */
.lista-lojas { display: grid; gap: var(--space-2); }
.loja-opcao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: var(--space-3) var(--space-4);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font: inherit; text-align: left; cursor: pointer;
}
.loja-opcao:hover { background: var(--color-primary-tint); }
.loja-opcao:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; }
.loja-opcao.atual { border-color: var(--color-primary); background: var(--color-primary-tint); }
.loja-opcao .loja-nome { font-weight: 600; color: var(--color-text); }
.loja-opcao .miudo { margin: 0; }

/* — matriz de permissões (Perfis de acesso) — */
.tabela-matriz th.centro, .tabela-matriz td.centro { text-align: center; }
.tabela-matriz input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }
.tabela-matriz input[type='checkbox']:disabled { cursor: not-allowed; }
.matriz-detalhe > td { background: var(--color-surface); }
.matriz-acoes { display: grid; gap: var(--space-2); padding: var(--space-2) 0; }
.matriz-acao { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4); align-items: center; padding: var(--space-2) var(--space-3); background: var(--color-bg); border-radius: var(--radius-sm); }
.matriz-acao .miudo { min-width: 90px; text-align: right; margin: 0; }
.matriz-senha { font-size: 13px; color: var(--color-text-2); }
@media (max-width: 640px) { .matriz-acao { grid-template-columns: 1fr; } .matriz-acao .miudo { text-align: left; } }

/* — cliente escolhido num diálogo (fiado): impossível de passar batido — */
.cliente-escolhido { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--color-primary-tint); border: 2px solid var(--color-primary); border-radius: var(--radius-md); }
.cliente-escolhido .avatar { width: 48px; height: 48px; font-size: 18px; flex: none; }
.cliente-escolhido-dados { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cliente-escolhido-rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary-deep); font-weight: 700; }
.cliente-escolhido-nome { font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }

/* — item da entrada de mercadoria — */
.item-entrada { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.item-entrada-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }

/* — foto do produto — */
.foto-bloco { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.foto-previa { width: 120px; height: 120px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); display: flex; align-items: center; justify-content: center; flex: none; }
.foto-produto { width: 100%; height: 100%; object-fit: cover; }
.foto-vazia { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--color-text-3); }

/* — conversa de chamado — */
.conversa { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.mensagem { max-width: 82%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); }
.mensagem-minha { align-self: flex-end; background: var(--color-info-bg, #e8f4fe); border-color: transparent; }
.mensagem-outra { align-self: flex-start; }
.mensagem-cabeca { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-1); }
.mensagem-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversa-sistema { align-self: center; margin: 0; color: var(--color-text-3); font-size: var(--text-sm, 0.875rem); text-align: center; }
@media (max-width: 640px) { .mensagem { max-width: 100%; } }

/* — gráficos do painel — */
.grafico { width: 100%; height: auto; display: block; }
.grafico-barra { fill: var(--color-primary, #0098f9); }
.grafico-barra:hover { fill: var(--color-primary-hover, #0078c8); }
.grafico-eixo { stroke: var(--color-border); stroke-width: 1; }
.grafico-rotulo { fill: var(--color-text-3, #777); font-size: 11px; }
.barra-forma { display: grid; grid-template-columns: minmax(80px, 140px) 1fr auto; gap: var(--space-3); align-items: center; margin: var(--space-2) 0; }
.barra-forma-trilho { background: var(--color-surface, #f4f4f4); border-radius: 999px; height: 10px; overflow: hidden; }
.barra-forma-preenchida { background: var(--color-primary, #0098f9); height: 100%; border-radius: 999px; }
.periodo-cartao { margin-top: var(--space-6); }
.periodo-bloqueado { text-align: center; padding: var(--space-6); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }

/* — linhas de detalhe (rótulo + valor): o valor quebra em vez de estourar o cartão — */
.detalhe > div { flex-wrap: wrap; }
.detalhe > div > :last-child { min-width: 0; margin-left: auto; text-align: right; overflow-wrap: anywhere; }
.plano-linha { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }

/* — perfis: módulo que o plano não inclui — */
.matriz-fora-do-plano td { color: var(--color-text-3); }
.matriz-fora-do-plano .sub { display: block; font-weight: 400; }

/* — diálogo: rodapé quebra linha em vez de estourar; dica de atalho no botão — */
.dialog-actions { flex-wrap: wrap; row-gap: var(--space-2); }
.dialog-actions .btn { white-space: nowrap; }
.atalho { margin-left: 8px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px; font: 600 11px/1.4 ui-monospace, Menlo, Consolas, monospace; opacity: .75; }

/* Aviso ao vivo do usuário no cadastro do site (disponível / em uso). */
.login-status { display: block; min-height: 18px; margin-top: 4px; font-size: 13px; font-weight: 500; }
.login-status:empty { min-height: 0; margin: 0; }
.login-status-ok { color: var(--color-success-text); }
.login-status-erro { color: var(--color-danger-text); }
.login-status-espera { color: var(--color-text-3); font-weight: 400; }

/* Minha conta → Caixas: lista de terminais da loja. */
.caixa-lista { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.caixa-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.caixa-info { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.caixa-info .input { min-width: 220px; }
.caixa-nome { font-weight: 600; }
.caixa-acoes { display: flex; gap: var(--space-2); }
.caixa-inativo .caixa-nome { color: var(--color-text-3); text-decoration: line-through; }
.caixa-novo { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.caixa-novo .input { max-width: 280px; }