/* ==========================================================================
   TAGJÁ — componentes do design system (web). Servido em /marca/.
   Ordem de carga em todas as páginas:
     /marca/tagja-tokens.css  ->  /marca/tagja-componentes.css  ->  /admin/admin.css  ->  CSS da página
   (admin.css = base: reset, topo, formulários e telas do admin; o CSS da página
   só acrescenta o que é dela). Vitrine: /marca/componentes.html.
   Tudo aqui saiu do que JÁ estava aprovado nas telas (admin, site, /assinar,
   painel e rede) — sem estilo novo. Cores só por var(--tj-*) / aliases.
   ========================================================================== */

/* ---------------------------------------------------------------- Botões --- */
/* Padrão (contorno), primário (marinho), fantasma e pequeno. */
.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--tj-borda); background: var(--tj-branco); color: var(--tj-texto);
  padding: 9px 14px; border-radius: var(--tj-raio-sm); font-size: 14px; font-weight: 600;
}
.btn.primary { background: var(--tj-marinho); border-color: var(--tj-marinho); color: var(--tj-branco); }
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 10px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: default; }

/* Pílula (cards de planos do site): secundária branca e destaque dourado. */
.btn-pill { display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border-radius: var(--tj-raio-pill); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; font-family: inherit; border: 1px solid var(--tj-borda); }
.btn-pill.ghost { background: var(--tj-branco); color: var(--tj-texto); border-color: var(--tj-borda-forte); }
.btn-pill.ghost:hover { border-color: var(--tj-marinho); }
.btn-pill.ouro { background: var(--tj-dourado); color: var(--tj-marinho); border-color: var(--tj-dourado); }
.btn-pill.ouro:hover { filter: brightness(.95); }

/* CTA grande de conversão (/assinar): dourado com texto marinho. */
.btn-cta {
  display: block; width: 100%; background: var(--tj-dourado); color: var(--tj-marinho);
  border: 1px solid var(--tj-dourado); border-radius: var(--tj-raio); padding: 16px 20px;
  font-size: 18px; font-weight: 800; cursor: pointer; font-family: inherit;
  box-shadow: var(--tj-sombra-cta);
}
.btn-cta:hover { filter: brightness(.96); }
.btn-cta:disabled { opacity: .6; cursor: default; filter: none; }

/* Botão de bloco (largura total) dos modais: marinho; variante dourada. */
.tj-btn-bloco, .forasp-ok { display: block; width: 100%; background: var(--tj-marinho); color: var(--tj-branco); border: 1px solid var(--tj-marinho); border-radius: var(--tj-raio-md); padding: 12px 16px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
.tj-btn-bloco:hover, .forasp-ok:hover { background: var(--tj-marinho-700); }
.tj-btn-bloco.ouro, .forasp-ok-ouro { background: var(--tj-dourado); color: var(--tj-marinho); border-color: var(--tj-dourado); }
.tj-btn-bloco.ouro:hover, .forasp-ok-ouro:hover { background: var(--tj-dourado); filter: brightness(.96); }
.tj-btn-bloco.ouro:disabled, .forasp-ok-ouro:disabled { opacity: .55; cursor: default; filter: none; }

/* Link em texto (ação secundária dentro de formulários). */
.link-inline { display: inline-block; background: none; border: 0; padding: 0; margin-top: 6px; color: var(--tj-marinho); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: underline; font-family: inherit; }
.link-inline:hover { text-decoration: none; }

/* ----------------------------------------------------------------- Cards --- */
.card {
  background: var(--tj-card); border: 1px solid var(--tj-borda); border-radius: var(--tj-raio);
  padding: 18px; margin-bottom: 16px;
}
.card.narrow { max-width: 420px; margin: 48px auto; }
.card h1 { font-size: 20px; margin: 0 0 6px; }
.card h2 { font-size: 16px; margin: 0 0 12px; }
.alerta { border-color: var(--tj-erro); }

/* Card de destaque (marinho + dourado): valor em estoque do painel. */
.tj-card-destaque, .hero-valor { background: var(--tj-marinho); color: var(--tj-branco); border-radius: var(--tj-raio-lg); padding: 20px 22px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-bottom: 3px solid var(--tj-dourado); }
.hero-rot { font-size: 13px; color: rgba(255, 255, 255, .78); font-weight: 600; }
.hero-v { font-size: 34px; font-weight: 800; color: var(--tj-dourado); line-height: 1.15; overflow-wrap: anywhere; }
.btn.hero-btn { background: var(--tj-dourado); border-color: var(--tj-dourado); color: var(--tj-marinho); font-weight: 700; }

/* Cartões de número do dashboard (painel e rede). */
.cards4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.cards4 .card { margin: 0; text-align: center; }
.cards4 .card .big { font-size: 28px; font-weight: 800; }
.cards4 .card .rot { color: var(--tj-muted); font-size: 13px; }
.cards4 .card.bad .big { color: var(--tj-erro); }
.cards4 .card.good .big { color: var(--tj-ok); }
.cards4 .card.clicavel:hover { border-color: var(--tj-marinho); }
.cards4 .card.destaque { background: var(--tj-marinho); }
.cards4 .card.destaque .big { color: var(--tj-dourado); }
.cards4 .card.destaque .rot { color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------- Mensagem / toast (.msg) --- */
.erro { color: var(--tj-erro); font-size: 13px; }
.msg { padding: 12px 14px; border-radius: var(--tj-raio-sm); margin-bottom: 14px; font-size: 14px; }
.msg.ok { background: var(--tj-ok-bg); color: var(--tj-ok); }
.msg.err { background: var(--tj-erro-bg); color: var(--tj-erro); }
.msg.info { background: var(--tj-info-bg); color: var(--tj-info); }
.msg.atencao { background: var(--tj-atencao-bg); color: var(--tj-atencao); }

/* ----------------------------------------------------------------- Chips --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Base neutra (gelo + marinho); o estado vem SEMPRE do modificador. */
.chip { background: var(--tj-gelo); color: var(--tj-marinho); border-radius: var(--tj-raio-pill); padding: 4px 12px; font-size: 13px; }
.chip.neutro { background: var(--tj-gelo); color: var(--tj-marinho); }
.chip.erro { background: var(--tj-erro-bg); color: var(--tj-erro); }
.chip.atencao { background: var(--tj-atencao-bg); color: var(--tj-atencao); }
.chip.ok { background: var(--tj-ok-bg); color: var(--tj-ok); }
.chip.info { background: var(--tj-info-bg); color: var(--tj-info); }

/* ------------------------------------------------------- Badges de status --- */
.badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--tj-raio-pill); }
/* Genéricos (resumos de Kanban etc.) */
.badge.neutro { background: var(--tj-gelo); color: var(--tj-marinho); }
.badge.erro { background: var(--tj-erro-bg); color: var(--tj-erro); font-size: 12px; }
.badge.atencao { background: var(--tj-atencao-bg); color: var(--tj-atencao); }
.badge.ok { background: var(--tj-ok-bg); color: var(--tj-ok); }
.badge.info { background: var(--tj-info-bg); color: var(--tj-info); }
/* Assinatura (status do Pix Automático incluídos) */
.badge.em_dia, .badge.trial { background: var(--tj-ok-bg); color: var(--tj-ok); }
.badge.aguardando_autorizacao { background: var(--tj-atencao-bg); color: var(--tj-atencao); }
.badge.inadimplente, .badge.cancelada, .badge.sem_assinatura,
.badge.autorizacao_rejeitada, .badge.bloqueado { background: var(--tj-erro-bg); color: var(--tj-erro); }
/* Pedidos de etiquetas */
.badge.aberto, .badge.pendente, .badge.em_aberto { background: var(--tj-atencao-bg); color: var(--tj-atencao); }
.badge.resolvido { background: var(--tj-ok-bg); color: var(--tj-ok); }
/* Agendamento de instalação */
.badge.ag-solicitado { background: var(--tj-atencao-bg); color: var(--tj-atencao); }
.badge.ag-confirmado { background: var(--tj-info-bg); color: var(--tj-info); }
.badge.ag-concluido { background: var(--tj-ok-bg); color: var(--tj-ok); }
.badge.ag-cancelado { background: var(--tj-erro-bg); color: var(--tj-erro); }
/* Login (ativo|inativo|bloqueado) */
.badge.login-ativo { background: var(--tj-ok-bg); color: var(--tj-ok); }
.badge.login-inativo { background: var(--tj-neutro-bg); color: var(--tj-neutro); }
.badge.login-bloqueado { background: var(--tj-erro-bg); color: var(--tj-erro); }
/* Plano (navy + dourado) */
.badge.plano-basico { background: var(--tj-gelo); color: var(--tj-marinho); }
.badge.plano-premium { background: var(--tj-marinho); color: var(--tj-branco); }
.badge.plano-gold { background: var(--tj-dourado); color: var(--tj-marinho); }

/* Etiquetas de alerta e de situação (painel: alertas de estoque, calculadora). */
.alerta-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--tj-raio-pill); white-space: nowrap; flex: none; min-width: 112px; text-align: center; }
.alerta-tag.zerado { background: var(--tj-erro-bg); color: var(--tj-erro); }
.alerta-tag.minimo { background: var(--tj-atencao-bg); color: var(--tj-atencao); }
.alerta-tag.vencer { background: var(--tj-atencao-bg); color: var(--tj-atencao); }
.alerta-tag.semcusto { background: var(--tj-neutro-bg); color: var(--tj-neutro); }
.sit { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--tj-raio-pill); white-space: nowrap; }
.sit-urgente { background: var(--tj-erro-bg); color: var(--tj-erro); }
.sit-atencao { background: var(--tj-atencao-bg); color: var(--tj-atencao); }
.sit-ok { background: var(--tj-ok-bg); color: var(--tj-ok); }
.sit-sem_consumo { background: var(--tj-neutro-bg); color: var(--tj-neutro); }

/* ---------------------------------------------------------------- Tabela --- */
/* table.rel dentro de .tbl-scroll: a tabela larga rola dentro do card, nunca a página. */
.tbl-scroll, .tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.rel { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
table.rel th, table.rel td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--tj-borda); }
table.rel th { color: var(--tj-muted); font-weight: 600; }
/* .nowrap: números compactos; só a 1ª coluna (nome do item/loja) quebra linha. */
table.rel.nowrap th, table.rel.nowrap td { white-space: nowrap; }
table.rel.nowrap td:first-child, table.rel.nowrap th:first-child { white-space: normal; }

/* ------------------------------------------------------- Barras (gráfico) --- */
/* Barras horizontais em CSS (sem lib). Base = painel; .rotulo-largo = rede (nome da loja). */
.barras { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.legenda { display: flex; gap: 16px; font-size: 12px; color: var(--tj-muted); margin: 4px 0 6px; }
.legenda .lg { display: inline-flex; align-items: center; gap: 6px; }
.legenda .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legenda .sw.entrada, .barra .fill.entrada { background: var(--tj-marinho); }  /* marinho = entrada */
.legenda .sw.saida, .barra .fill.saida { background: var(--tj-dourado); }      /* dourado = saída */
.barra-linha { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; }
.barra-linha .per { font-size: 12px; color: var(--tj-muted); font-weight: 600; }
.barra-grupo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.barra { display: flex; align-items: center; gap: 8px; }
.barra .track { flex: 1; background: var(--tj-gelo); border-radius: var(--tj-raio-pill); height: 15px; overflow: hidden; min-width: 0; }
.barra .fill { height: 100%; border-radius: var(--tj-raio-pill); min-width: 2px; background: var(--tj-marinho); transition: width .2s ease; }
.barra .val { font-size: 12px; min-width: 92px; text-align: right; color: var(--tj-texto); }
.barra-linha.fora .per, .barra-linha.fora .val { opacity: .55; }  /* semana fora da média */
.barras.rotulo-largo { margin: 6px 0 4px; }
.barras.rotulo-largo .barra-linha { grid-template-columns: 140px 1fr; }
.barras.rotulo-largo .barra-linha .per { font-size: 13px; color: var(--tj-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras.rotulo-largo .barra .track { height: 16px; }
.barras.rotulo-largo .barra .val { min-width: 104px; font-weight: 600; }

/* ---------------------------------------------------------------- Kanban --- */
.kanban-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.kb-col { border: 1px solid var(--tj-borda); border-radius: var(--tj-raio); background: var(--tj-superficie); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.kb-col-tit { font-weight: 700; font-size: 13px; padding: 4px 6px; border-radius: var(--tj-raio-sm); }
.kb-urgente .kb-col-tit { background: var(--tj-erro-bg); color: var(--tj-erro); }
.kb-atencao .kb-col-tit { background: var(--tj-atencao-bg); color: var(--tj-atencao); }
.kb-ok .kb-col-tit { background: var(--tj-ok-bg); color: var(--tj-ok); }
.kb-sem .kb-col-tit { background: var(--tj-neutro-bg); color: var(--tj-neutro); }
.kb-card { background: var(--tj-branco); border: 1px solid var(--tj-borda); border-radius: var(--tj-raio-md); padding: 8px 10px; }
.kb-nome { font-weight: 700; font-size: 14px; }
.kb-sub { color: var(--tj-muted); font-size: 12px; margin-top: 2px; }
.kb-pedido { margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--tj-marinho); }

/* ----------------------------------------------------------------- Modal --- */
/* Um só modal (.tj-modal-overlay + .tj-modal). Variante .destaque = borda dourada no
   topo e sombra (pop-ups do /assinar). Os nomes antigos (.modal-overlay/.modal do site,
   .forasp-* do /assinar) continuam como sinônimos, com a MESMA aparência de antes. */
.tj-modal-overlay, .modal-overlay, .forasp-overlay { position: fixed; inset: 0; background: var(--tj-overlay); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.tj-modal, .modal { position: relative; max-width: 420px; width: 100%; margin: 0; }
.tj-modal.destaque, .forasp-card { position: relative; background: var(--tj-branco); border-radius: var(--tj-raio-lg); border-top: 5px solid var(--tj-dourado); max-width: 430px; width: 100%; padding: 24px 22px; box-shadow: var(--tj-sombra-modal); max-height: 90vh; overflow-y: auto; }
.tj-modal.destaque h2, .forasp-card h2 { color: var(--tj-marinho); font-size: 18px; margin: 0 0 10px; }
.tj-modal-x, .modal-x { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--tj-muted); cursor: pointer; }
.tj-modal-x:hover, .modal-x:hover { color: var(--tj-texto); }
.tj-modal.destaque .tj-modal-x, .forasp-x { position: absolute; top: 8px; right: 12px; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--tj-muted); cursor: pointer; }
.tj-modal.destaque.largo, .forasp-card-lg { max-width: 540px; }
.tj-modal-msg, .forasp-msg { color: var(--tj-texto); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }