/* ===========================================================
   Painel do Supermercado (Automações) — porte da tela que rodava
   solta em ingest.azeha.com.br.

   TUDO aqui é prefixado `sm-` e vive dentro de `.sm`. O painel
   original usava os nomes genéricos do sistema (.card, .cal-cel,
   .grade, table) de propósito, para o dia do encaixe; só que aqui
   dentro esses nomes JÁ TÊM dono — .card é o cartão do kanban e
   .cal-cel é a célula do calendário de prazos. Reaproveitar
   quebraria as duas telas, então o encaixe virou renomeação.

   O que É reaproveitado da casca: .pagina, .segmentado, .overlay,
   .modal, .btn-icone e todos os tokens de cor/raio/sombra.
   =========================================================== */
.sm {
  --mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace;
}

.sm .pagina__cab-acoes { gap: 18px; flex-wrap: wrap; }

/* ---- relógio da última leitura ---- */
.sm-relogio { display: flex; align-items: center; gap: 9px; }
.sm-relogio__pulso {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--sucesso); box-shadow: 0 0 0 3px var(--sucesso-bg);
}
@media (prefers-reduced-motion: no-preference) {
  .sm-relogio__pulso { animation: sm-pisca 2.4s ease-in-out infinite; }
  @keyframes sm-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}
.sm.defasado .sm-relogio__pulso {
  background: var(--urg-atras); box-shadow: 0 0 0 3px var(--urg-atras-bg); animation: none;
}
.sm-relogio__txt { display: flex; flex-direction: column; line-height: 1.25; }
.sm-relogio__rotulo {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.sm-relogio__hora { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sm-relogio__hora em { font-style: normal; margin-left: 7px; color: var(--urg-atras); }

/* ---- aviso de dado velho ---- */
.sm-aviso[hidden] { display: none; }
.sm-aviso {
  display: flex; align-items: flex-start; gap: 11px; margin-bottom: 20px;
  padding: 13px 16px; font-size: 13.5px; line-height: 1.5;
  color: var(--urg-atras); background: var(--urg-atras-bg);
  border: 1px solid color-mix(in srgb, var(--urg-atras) 30%, transparent);
  border-radius: var(--r-sm);
}
.sm-aviso__ico {
  width: 19px; height: 19px; flex: none; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  background: var(--urg-atras); color: #fff; font-size: 12px; font-weight: 700;
}

/* ---- grade e cartões ---- */
.sm-grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-bottom: 20px; }
.sm-c5 { grid-column: span 5; }
.sm-c6 { grid-column: span 6; }
.sm-c7 { grid-column: span 7; }
.sm-c12 { grid-column: span 12; }
@media (max-width: 1180px) { .sm-c5, .sm-c6, .sm-c7 { grid-column: span 12; } }

.sm-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sombra-card);
  padding: 22px 24px 24px; min-width: 0; display: flex; flex-direction: column;
}
.sm-card > * { min-width: 0; }
.sm-card__cab {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border);
}
.sm-card__titulo { font-size: 16px; }
.sm-card__meta {
  margin-left: auto; font-size: 12.5px; color: var(--ink-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sm-rotulo {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ---- número grande + variação + minigráfico ---- */
.sm-num {
  font-family: var(--fonte-titulo);
  font-size: 38px; font-weight: 600; letter-spacing: -.025em; line-height: 1.05;
  margin-top: 6px; font-variant-numeric: tabular-nums;
}
.sm-delta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; align-self: flex-start;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
}
.sm-delta.sobe { color: var(--urg-prazo); background: var(--urg-prazo-bg); }
.sm-delta.desce { color: var(--urg-atras); background: var(--urg-atras-bg); }
.sm-delta span { font-weight: 500; opacity: .8; }
.sm-spark { display: block; width: 100%; height: 44px; margin-top: 16px; }

/* ---- calendário de vencimentos ---- */
/* Navegação de mês, no cabeçalho do card. O calendário é o único bloco que
   anda por conta própria — os outros seguem o período do topo da tela. */
.sm-card__cab--nav { align-items: center; }
.sm-mesnav { display: flex; align-items: center; gap: 4px; }
.sm-mesnav__seta {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: var(--transicao); padding: 0;
}
.sm-mesnav__seta:hover { background: var(--surface-3); color: var(--ink); border-color: var(--border-forte); }
.sm-mesnav__seta svg { width: 16px; height: 16px; display: block; }
.sm-mesnav__seta--tras svg { transform: rotate(180deg); }
.sm-mesnav__mes {
  min-width: 148px; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--ink-2);
}
.sm-mesnav__hoje {
  margin-left: 4px; font: inherit; font-size: 12px; cursor: pointer;
  padding: 5px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  transition: var(--transicao); white-space: nowrap;
}
.sm-mesnav__hoje:hover { background: var(--surface-3); color: var(--ink); border-color: var(--border-forte); }

.sm-cal {
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
  background: var(--surface-2);
}
/* Sete dias + a coluna da SEMANA (17/09/2026). As duas grades — cabeçalho e
   corpo — têm de declarar as MESMAS colunas, senão o rótulo "semana" desalinha
   da coluna que ele nomeia. */
.sm-cal__cab, .sm-cal__corpo {
  grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(86px, .9fr);
}
.sm-cal__cab {
  display: grid;
  background: var(--surface-3); border-bottom: 1px solid var(--border);
}
.sm-cal__cab--semana { color: var(--ink-2); font-weight: 700; }
.sm-cal__cab span {
  padding: 10px 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.sm-cal__corpo { display: grid; }

.sm-cel {
  min-width: 0; min-height: 104px; padding: 9px 11px 11px; text-align: left;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 3px;
  transition: var(--transicao); position: relative;
}
/* ⚠️ A última coluna da linha agora é a OITAVA (a da semana) — com `7n` a borda
   sumia no sábado e sobrava na ponta direita. */
.sm-cel:nth-child(8n) { border-right: none; }
/* A coluna do total é um resumo, não um dia: fundo diferente, sem número de dia
   e com o valor NO MEIO da célula (pedido do Higor em 17/09/2026) — encostado
   na base ele parecia o valor do sábado, e não o fecho da linha. */
.sm-cel--semana {
  background: var(--surface-3);
  align-items: center; justify-content: center; text-align: center;
}
/* ⚠️ Nos dias o valor é empurrado para baixo por `margin-top: auto`; aqui isso
   tem de sair, senão ele desce de novo e o "centralizado" vira só horizontal. */
.sm-cel--semana .sm-cel__valor { color: var(--ink); margin-top: 0; }
.sm-cel--semana .sm-cel__travessao { margin-top: 0; }
.sm-cel--fora, .sm-cel--vazio { background: var(--surface-2); }

button.sm-cel { width: 100%; font: inherit; color: inherit; cursor: pointer; }
button.sm-cel:hover { background: var(--surface-3); border-color: var(--border-forte); z-index: 1; }
button.sm-cel:hover .sm-cel__valor { color: var(--accent-texto); }

.sm-cel__num {
  width: 25px; height: 25px; display: grid; place-items: center; flex: none;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; border-radius: 50%;
}
.sm-cel.hoje .sm-cel__num { background: var(--accent); color: #fff; }
.sm-cel--fora .sm-cel__num, .sm-cel--vazio .sm-cel__num { color: var(--ink-3); opacity: .6; }

.sm-cel__valor {
  margin-top: auto; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap; transition: var(--transicao);
}
.sm-cel__qtd {
  font-size: 11px; color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sm-cel__travessao { margin-top: auto; font-size: 15px; color: var(--ink-3); opacity: .5; }

/* peso do dia: barra proporcional ao maior vencimento do mês */
.sm-cel__barra {
  display: block; height: 3px; border-radius: 2px;
  background: var(--surface-3); margin-top: 8px;
}
.sm-cel__barra i { display: block; height: 100%; border-radius: 2px; background: var(--accent); opacity: .85; }

/* dia já vencido e ainda em aberto */
/* Dia que já passou: VERDE (17/09/2026). Era vermelho de "vencido em aberto" e
   acendia em quase todo dia passado — alarme que toca sempre ninguém escuta.
   ⚠️ Verde aqui é "já venceu", NÃO "foi pago": o ERP não sabe dizer quem pagou. */
.sm-cel.passou { background: var(--urg-prazo-bg); }
.sm-cel.passou .sm-cel__valor { color: var(--urg-prazo); }
.sm-cel.passou .sm-cel__barra i { background: var(--urg-prazo); }
button.sm-cel.passou:hover { background: color-mix(in srgb, var(--urg-prazo) 16%, var(--surface)); }
button.sm-cel.passou:hover .sm-cel__valor { color: var(--urg-prazo); }

.sm-legenda { display: flex; align-items: center; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.sm-legenda span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.sm-legenda i { width: 9px; height: 9px; border-radius: 3px; display: block; flex: none; }

/* No celular o mês rola de lado em vez de encolher. Encolher até caber em
   375px quebra "R$ 37,4 mil" em três linhas e mata a leitura de longe, que é
   o ponto do painel inteiro. */
.sm-cal__rolagem { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.sm-cal__mes { min-width: 700px; }
@media (max-width: 900px) {
  .sm-cel { min-height: 88px; padding: 7px 9px 9px; }
  .sm-cel__valor { font-size: 13.5px; }
}

/* ---- tabelas ---- */
.sm-rolagem { overflow-x: auto; margin: 0 -4px; padding: 0 4px; min-width: 0; max-width: 100%; }
.sm-rolagem .sm-tabela { min-width: 340px; table-layout: fixed; }
.sm-rolagem--larga .sm-tabela { min-width: 520px; }
.sm-tabela { width: 100%; border-collapse: collapse; }
.sm-tabela th {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); text-align: left; padding: 0 10px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.sm-tabela td { padding: 11px 10px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.sm-tabela tbody tr:last-child td { border-bottom: none; }
.sm-tabela tbody tr { transition: background var(--transicao); }
.sm-tabela tbody tr:hover { background: var(--surface-2); }
.sm-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.sm-tabela td.num { font-weight: 600; }
.sm-tabela td.prod { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-tabela td.hora { font-weight: 600; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.sm-tabela td.doc { color: var(--ink-3); white-space: nowrap; font-family: var(--mono); font-size: 11.5px; }

/* ---- sem dados ---- */
.sm-vazio {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 104px; padding: 20px;
  border: 1px dashed var(--border-forte); border-radius: var(--r-sm);
  color: var(--ink-3); font-size: 13px; font-style: normal;
}

/* ---- dado velho: os cartões recuam, o aviso é que fala ---- */
.sm.defasado .sm-card { opacity: .6; }

/* ---- faixa: vendas por meio de pagamento ---- */
/* "Em paisagem", como o Higor pediu: os meios lado a lado, numa tira só. O
   auto-fit cuida do resto — sete formas no monitor da loja, duas por linha no
   celular, sem media query nova. */
.sm-pags {
  /* 132px: é o menor bloco em que "TRANSFERÊNCIA PIX" e um valor de seis
     dígitos ainda cabem — e é o que faz as SETE formas caberem numa tira só
     dentro da largura útil do painel (~1180px). Com 148px, "Outros" caía
     sozinho numa segunda linha, que era justamente o que "em paisagem" não
     quer dizer. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 22px 20px;
}
.sm-pag { min-width: 0; }
.sm-pag__forma {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sm-pag__valor {
  font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.sm-pag__barra {
  height: 4px; border-radius: 2px; background: var(--surface-2);
  margin: 10px 0 7px; overflow: hidden;
}
.sm-pag__barra i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--accent); opacity: .85;
}
.sm-pag__pe { font-size: 11px; color: var(--ink-3); }

/* ---- carregando ---- */
.sm.carregando .sm-painel :is(.sm-rotulo, .sm-num, .sm-delta, .sm-card__meta, .sm-card__titulo,
  .sm-tabela td, .sm-tabela th, .sm-cel__num, .sm-cel__valor, .sm-cel__qtd,
  .sm-cel__travessao, .sm-cal__cab span, .sm-legenda span,
  .sm-pag__forma, .sm-pag__valor, .sm-pag__pe) {
  color: transparent !important;
  background: var(--surface-3) !important;
  border-radius: 6px;
  animation: sm-respira 1.5s ease-in-out infinite;
}
.sm.carregando .sm-painel .sm-spark * { stroke: transparent !important; fill: transparent !important; }
.sm.carregando .sm-painel :is(.sm-spark, .sm-cel__barra i, .sm-legenda i) {
  background: var(--surface-3) !important; border-radius: 6px;
  animation: sm-respira 1.5s ease-in-out infinite;
}
.sm.carregando .sm-painel .sm-cel { background: var(--surface) !important; }
.sm.carregando .sm-painel .sm-vazio { border-color: transparent; }
@keyframes sm-respira { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sm.carregando .sm-painel * { animation: none !important; } }

/* ---- modal: os boletos de um dia ---- */
.sm-modal { max-width: 660px; }
.sm-modal__sub {
  display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.sm-modal__corpo { max-height: min(60vh, 520px); overflow-y: auto; }
.sm-modal__corpo .sm-vazio { margin: 20px; }

.sm-linha {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; border-bottom: 1px solid var(--border);
}
.sm-linha:last-child { border-bottom: none; }
.sm-linha__qual { min-width: 0; flex: 1; }
.sm-linha__nome {
  font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sm-linha__sob {
  margin-top: 2px; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sm-linha__val {
  font-size: 14.5px; font-weight: 600; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* 🔥 Título fora da conta. Ele CONTINUA na lista, riscado e apagado: sumir de
   vez faria o painel divergir do Clipp sem deixar rastro — daqui a um mês
   ninguém saberia por que o total não bate com o ERP. */
.sm-linha--ignorada .sm-linha__nome,
.sm-linha--ignorada .sm-linha__val { text-decoration: line-through; opacity: .55; }
.sm-linha--ignorada .sm-linha__sob { opacity: .75; }
.sm-linha--ignorada .sm-linha__sob b { color: var(--ink-2); font-weight: 600; }
/* O botão fica SEMPRE à vista e na cor do sistema (pedido do dono, 18/09/2026
   — o mesmo tratamento do "criar tarefa" da bolha do WhatsApp): escondido no
   hover ninguém descobre que a linha tem ação, e cinza ele some no meio dos
   números. */
.sm-linha__acao {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--accent-suave); color: var(--accent-texto); cursor: pointer;
  transition: var(--transicao);
}
.sm-linha__acao:hover { background: var(--accent); color: #fff; }
.sm-linha__acao:disabled { opacity: .4; cursor: default; }
.sm-linha__acao svg { width: 15px; height: 15px; }
.sm-modal__fora { color: var(--ink-3); }
/* O que acabou de acontecer FORA deste dia — as outras parcelas da nota vencem
   em outro mês e o modal não as mostra. Sem este recado, quem manda tirar as
   três vê uma linha mudar e fica sem saber se as outras foram. */
.sm-modal__recado { color: var(--accent-texto); font-weight: 600; }

/* ---- a nota tem mais parcelas: três saídas, não duas ---- */
/* Um `confirm()` só oferece sim e não, e a pergunta aqui tem três respostas:
   todas, só esta, e desistir. Empilhar dois `confirm()` faria o Cancelar do
   segundo parecer que cancela tudo. */
.sm-parcelas { max-width: 520px; }
.sm-parcelas .sm-modal__corpo { max-height: min(42vh, 320px); }
.sm-parcelas__pe {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--border);
}
/* O "Cancelar" vai para a ponta oposta: colado nos outros dois, é clicado por
   engano por quem mira no "Só esta". */
.sm-parcelas__pe [data-cancelar] { margin-left: auto; }
/* 🔥 No tema ESCURO o `.btn--secundario` fica da cor do próprio modal (os dois
   são `--surface`) e a borda de 13% de branco não salva: o "Só esta" sumia, e
   o diálogo virava "tirar todas ou cancelar" — justo a escolha que ele existe
   para oferecer. Visto na tela antes de entregar, no escuro e no celular.
   ⚠️ Corrigido AQUI e não no componente: `.btn--secundario` sobre `--surface`
   é um problema de todo modal escuro do sistema, e mexer nele daqui mudaria
   botão de tela que ninguém olhou. */
.sm-parcelas__pe .btn--secundario {
  background: var(--surface-3); border-color: var(--ink-3);
}
.sm-parcelas__pe .btn--secundario:hover { border-color: var(--ink-2); }
@media (max-width: 480px) {
  /* No celular os três botões em linha espremem o primeiro até o texto
     quebrar no meio. Empilhados, cada um fica legível e a ordem (o mais
     provável em cima) continua a mesma. */
  .sm-parcelas__pe { flex-direction: column; align-items: stretch; }
  .sm-parcelas__pe [data-cancelar] { margin-left: 0; }
}
/* ---- celular ---- */
/* O cabeçalho da página é o único ponto que não cabe: relógio + quatro
   pílulas de período dão mais que a largura de um celular. Eles descem para
   uma linha só deles, e as pílulas rolam de lado em vez de empurrar a página. */
@media (max-width: 760px) {
  .sm .pagina__cab { flex-wrap: wrap; }
  .sm .pagina__cab-acoes { width: 100%; justify-content: space-between; gap: 12px; }
  .sm .segmentado { max-width: 100%; overflow-x: auto; }
}

@media (max-width: 640px) {
  .sm-card { padding: 18px; }
  .sm-card__cab { flex-wrap: wrap; }
  .sm-card__meta { margin-left: 0; white-space: normal; }
  /* O cabeçalho do calendário tem título, navegação e total: em 375px os três
     lado a lado espremem o nome do mês até ele quebrar no meio. */
  .sm-mesnav { width: 100%; order: 3; }
  .sm-mesnav__mes { flex: 1; min-width: 0; }
  .sm-num { font-size: 31px; }
  /* A quebra em duas linhas existia para o nome do fornecedor não ficar com
     onze caracteres, espremido entre o selo e o valor. Sem o selo (tirado em
     27/08) sobra largura de sobra, e quebrar deixaria o valor sozinho numa
     linha à toa. */
  .sm-linha { padding: 12px 16px; gap: 10px; }
}

/* ── Período: os botões prontos + o recorte escolhido no calendário ──
   A linha das datas fica ABAIXO dos botões e só aparece em "Escolher datas":
   dois campos sempre visíveis roubariam a atenção de quem só quer "Hoje". */
.sm-periodo { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sm-datas[hidden] { display: none; }
.sm-datas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sm-datas label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3);
}
.sm-datas input[type="date"] {
  padding: 5px 9px; border: 1px solid var(--border-forte); border-radius: 7px;
  background: var(--surface); color: var(--ink);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.sm-datas input[type="date"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-suave);
}
/* O ícone nativo do calendário é escuro sobre fundo escuro no tema padrão. */
.sm-datas input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.6); cursor: pointer; }
[data-tema="claro"] .sm-datas input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
@media (max-width: 640px) { .sm-periodo { align-items: stretch; } }