/**
 * Componentes visuais — Modo Cliente (FRONT-002)
 * Botões, cards, badges, chips, avatar, nível/estrelas, jogador, time,
 * indicador de equilíbrio, time-slot.
 */

/* ================= Botões ================= */
.cliente-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cliente-space-2);
  border-radius: var(--cliente-raio-botao);
  font-weight: var(--cliente-fw-bold);
  font-size: var(--cliente-fs-botao);
  height: var(--cliente-altura-botao);
  padding: 0 var(--cliente-space-6);
  border: none;
  transition: filter var(--cliente-transicao-rapida), transform var(--cliente-transicao-rapida);
  min-width: var(--cliente-altura-toque-minima);
}

.cliente-btn:hover {
  filter: brightness(1.06);
}

.cliente-btn:active {
  transform: scale(.98);
}

.cliente-btn--primario {
  background: var(--cliente-verde);
  color: #fff;
  box-shadow: var(--cliente-sombra-flutuante);
}

.cliente-btn--primario:hover {
  background: var(--cliente-verde-hover);
}

/* RC-002-R1 — achado real: estas duas variantes escolhem uma cor de
 * texto FIXA (assumindo que o desenvolvedor sabe, no momento de
 * escrever a view, se o fundo ao redor é claro ou escuro) — mas botões
 * secundários vivem tipicamente DENTRO de `.cliente-card`/`.cliente-
 * sheet`/etc., que mudam de tema dinamicamente (preferência do sistema,
 * ver cliente-nucleo.js). O resultado real encontrado nesta sprint:
 * "Cancelar" (`--secundario-escuro`, texto escuro fixo) dentro de um
 * card que virou escuro = texto quase invisível. As duas regras
 * `.cliente--escuro`/`.cliente--claro` abaixo tornam AMBAS as variantes
 * seguras em qualquer tema real — a escolha entre `-claro`/`-escuro`
 * deixa de ser uma aposta estática e passa a sempre bater com o tema
 * efetivamente ativo no body. */
.cliente-btn--secundario-claro {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .35);
  color: #fff;
}

.cliente--claro .cliente-btn--secundario-claro {
  border-color: var(--cliente-borda-clara);
  color: var(--cliente-texto-escuro-principal);
}

.cliente-btn--secundario-escuro {
  background: transparent;
  border: 1.5px solid var(--cliente-borda-clara);
  color: var(--cliente-texto-escuro-principal);
}

.cliente--escuro .cliente-btn--secundario-escuro {
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}

.cliente-btn--texto {
  background: transparent;
  color: var(--cliente-verde);
  height: auto;
  padding: var(--cliente-space-2) var(--cliente-space-3);
  box-shadow: none;
}

.cliente-btn--icone {
  width: var(--cliente-altura-botao);
  height: var(--cliente-altura-botao);
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: inherit;
}

.cliente-btn--perigo {
  background: var(--cliente-erro);
  color: #fff;
}

.cliente-btn--sucesso {
  background: var(--cliente-sucesso);
  color: #fff;
}

.cliente-btn--pequeno {
  height: var(--cliente-altura-botao-pequeno);
  padding: 0 var(--cliente-space-4);
  font-size: 12.5px;
}

.cliente-btn--largo {
  width: 100%;
}

.cliente-btn:disabled,
.cliente-btn[aria-disabled="true"] {
  background: #CBD5E1;
  color: #94A3B8;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.cliente-btn--carregando {
  color: transparent !important;
  position: relative;
  pointer-events: none;
}

.cliente-btn--carregando::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2.5px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  animation: cliente-girar .7s linear infinite;
}

@keyframes cliente-girar {
  to { transform: rotate(360deg); }
}

/* ================= Cards ================= */
.cliente-card {
  border-radius: var(--cliente-raio-card);
  padding: var(--cliente-space-4);
  margin-bottom: var(--cliente-gap-cards);
}

/* RC-001 — `color` explícito nas duas regras abaixo (antes só
   `background`/`border`): o card sempre dependia 100% do texto ambiente
   herdado do <body> (.cliente--claro/.cliente--escuro em base.css) para
   ficar legível. Funcionava em todo lugar hoje só porque nenhuma tela
   de pelada/portal atual esquece de passar `tema`, mas era um ponto
   único de falha silencioso — qualquer view nova sem esse parâmetro
   cairia no tema escuro padrão do layout e herdaria texto claro sobre
   um fundo que, seguindo o mesmo padrão frágil, também podia estar
   fixado em claro (caso de views/pelada-publica/minhas.php, ver
   .cliente-card--link abaixo). Cada card agora garante sua própria
   legibilidade, independente do que estiver acima dele na árvore. */
.cliente--claro .cliente-card {
  background: var(--cliente-superficie-clara);
  border: 1px solid var(--cliente-borda-clara);
  box-shadow: var(--cliente-sombra-card);
  color: var(--cliente-texto-escuro-principal);
}

.cliente--escuro .cliente-card {
  background: var(--cliente-superficie-escura);
  border: 1px solid var(--cliente-borda-escura);
  color: var(--cliente-texto-claro-principal);
}

.cliente-card--grande {
  border-radius: var(--cliente-raio-card-grande);
  padding: var(--cliente-space-6);
}

/* RC-001 — substitui o padrão antigo de views/pelada-publica/minhas.php
   (um <a class="cliente-card-link" style="background:#fff; ..."> com
   cor de fundo fixa via inline style e NENHUM `color` próprio, deposto
   inteiramente na herança do <body>). Mesma superfície de .cliente-card
   (que já ganhou `color` explícito acima), só adiciona o necessário
   para o card inteiro virar um link em bloco. */
a.cliente-card--link {
  display: block;
  text-decoration: none;
}

a.cliente-card--link:hover,
a.cliente-card--link:focus-visible {
  border-color: var(--cliente-verde);
}

.cliente-card__titulo {
  font-size: var(--cliente-fs-titulo-card);
  font-weight: var(--cliente-fw-bold);
  margin: 0 0 2px;
}

.cliente-card__sub {
  font-size: 12px;
  opacity: .65;
  margin: 0;
}

/* Variações semânticas de card (mesma estrutura .cliente-card, cor de destaque
   à esquerda) — cobre reserva/comanda/pelada/evento/campeonato/aviso/destaque. */
.cliente-card--destaque-verde { border-left: 4px solid var(--cliente-verde); }
.cliente-card--destaque-azul { border-left: 4px solid var(--cliente-azul-claro); }
.cliente-card--destaque-roxo { border-left: 4px solid var(--cliente-roxo); }
.cliente-card--destaque-amarelo { border-left: 4px solid var(--cliente-amarelo); }

.cliente-card--aviso {
  display: flex;
  gap: var(--cliente-space-3);
  align-items: flex-start;
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .35);
}

.cliente-card--aviso svg {
  width: 18px;
  height: 18px;
  color: var(--cliente-amarelo);
  flex-shrink: 0;
}

.cliente-card--resumo-financeiro .cliente-linha-valor {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: var(--cliente-space-2) 0;
  border-bottom: 1px solid var(--cliente-divisoria-clara);
}

.cliente--escuro .cliente-card--resumo-financeiro .cliente-linha-valor {
  border-bottom-color: var(--cliente-divisoria-escura);
}

.cliente-card--resumo-financeiro .cliente-linha-valor:last-child {
  border-bottom: none;
  font-weight: var(--cliente-fw-black);
  font-size: 14px;
}

/* PORTAL-002 — comportamento de hover ÚNICO para qualquer card clicável
   do portal (Home, listas de reserva/pelada, etc.) — mesmo padrão em
   todo lugar, nunca um efeito de hover diferente por página. Aplicar
   junto de .cliente-card em um <a>. */
.cliente-card--clicavel {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--cliente-transicao-rapida), box-shadow var(--cliente-transicao-rapida);
}

.cliente-card--clicavel:hover,
.cliente-card--clicavel:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--cliente-sombra-flutuante);
}

/* PORTAL-002-R1 — card de status da Home (Próxima reserva/Minha
   comanda/Pelada): MESMO cabeçalho (ícone + título), MESMO rodapé
   (botão), MESMO padding/raio/hover de qualquer outro `.cliente-card`
   — só o conteúdo do meio (badge/dado/resumo) varia conforme o que
   cada card tem para mostrar. */
.cliente-card-dashboard__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--cliente-space-3);
  margin-bottom: var(--cliente-space-3);
}

.cliente-card-dashboard__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--cliente-raio-chip);
  background: rgba(22, 163, 74, .1);
  color: var(--cliente-verde);
}

.cliente-card-dashboard__icone svg { width: 18px; height: 18px; stroke: currentColor; }

.cliente-card-dashboard__titulo {
  font-size: var(--cliente-fs-titulo-card);
  font-weight: var(--cliente-fw-bold);
  margin: 0;
}

/* RC-002-R1, itens 10/11 — estrela de novidade não vista no card da
 * Escolinha (Home) e destaque leve do card inteiro quando há
 * novidade — mockup oficial, secção "ESCOLINHA". Cor fixa (dourado)
 * funciona em ambos os temas por ter contraste suficiente contra fundo
 * claro OU escuro, então não precisa de variante `.cliente--escuro`. */
.cliente-card-dashboard__estrela {
  margin-left: auto;
  color: #F59E0B;
  font-size: 16px;
  line-height: 1;
}

.cliente-card--com-novidade {
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .25);
}

.cliente-card-dashboard__dado {
  font-size: 14px;
  font-weight: var(--cliente-fw-bold);
  margin: 8px 0 2px;
}

.cliente-card-dashboard__resumo {
  font-size: 12px;
  opacity: .65;
  margin: 0;
}

/* PORTAL-002-R1 — linha "rótulo à esquerda / valor à direita" dentro de
   um card (detalhe de reserva, detalhe de pelada, card de pelada na
   lista) — existia antes duplicada em 3 blocos <style> quase idênticos
   (.reserva-linha em reservas-detalhe.php, inline em
   peladas-detalhe.php, outra cópia nova que seria criada em
   peladas-lista.php); consolidada aqui uma única vez. */
.cliente-linha-dado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--cliente-divisoria-clara);
  font-size: 13px;
}

.cliente-linha-dado:last-child { border-bottom: none; }
.cliente-linha-dado span:first-child { opacity: .6; }

.cliente-atalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cliente-space-2);
  text-align: center;
  font-size: 11.5px;
  font-weight: var(--cliente-fw-bold);
  padding: var(--cliente-space-4);
  border-radius: 14px;
}

.cliente--escuro .cliente-atalho { background: var(--cliente-superficie-escura); border: 1px solid var(--cliente-borda-escura); }
.cliente--claro .cliente-atalho { background: var(--cliente-superficie-clara); border: 1px solid var(--cliente-borda-clara); }

.cliente-atalho svg {
  width: 22px;
  height: 22px;
  color: var(--cliente-verde);
}

/* ================= Badges ================= */
.cliente-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--cliente-raio-badge);
  padding: 4px 12px;
  font-size: var(--cliente-fs-badge);
  font-weight: var(--cliente-fw-bold);
}

.cliente-badge svg { width: 12px; height: 12px; }

.cliente-badge--confirmado, .cliente-badge--pago, .cliente-badge--aberto { background: rgba(34, 197, 94, .15); color: #15803D; }
.cliente-badge--pendente { background: rgba(245, 158, 11, .18); color: #92400E; }
.cliente-badge--cancelado, .cliente-badge--expirado { background: rgba(239, 68, 68, .15); color: #B91C1C; }
.cliente-badge--encerrado, .cliente-badge--indisponivel { background: rgba(100, 116, 139, .15); color: #475569; }
.cliente-badge--goleiro { background: rgba(59, 130, 246, .15); color: #1D4ED8; }
.cliente-badge--alerta { background: rgba(245, 158, 11, .18); color: #92400E; }

.cliente--escuro .cliente-badge--confirmado,
.cliente--escuro .cliente-badge--pago,
.cliente--escuro .cliente-badge--aberto { background: rgba(34, 197, 94, .2); color: #4ADE80; }
.cliente--escuro .cliente-badge--pendente,
.cliente--escuro .cliente-badge--alerta { background: rgba(245, 158, 11, .22); color: #FBBF24; }
.cliente--escuro .cliente-badge--cancelado,
.cliente--escuro .cliente-badge--expirado { background: rgba(239, 68, 68, .22); color: #FCA5A5; }
.cliente--escuro .cliente-badge--encerrado,
.cliente--escuro .cliente-badge--indisponivel { background: rgba(148, 163, 184, .18); color: #CBD5E1; }
.cliente--escuro .cliente-badge--goleiro { background: rgba(59, 130, 246, .22); color: #93C5FD; }

.cliente-tag-futuro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(124, 58, 237, .15);
  color: #6D28D9;
  border: 1px dashed var(--cliente-roxo);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: var(--cliente-fw-black);
  letter-spacing: .02em;
}

.cliente--escuro .cliente-tag-futuro { background: rgba(124, 58, 237, .22); color: #C4B5FD; }

/* ================= Chips ================= */
.cliente-chips {
  display: flex;
  gap: var(--cliente-space-2);
  overflow-x: auto;
  margin-bottom: var(--cliente-space-4);
}

.cliente-chip {
  border-radius: var(--cliente-raio-chip);
  padding: 8px var(--cliente-space-4);
  font-size: 12.5px;
  font-weight: var(--cliente-fw-semibold);
  border: 1px solid var(--cliente-borda-clara);
  background: #fff;
  color: var(--cliente-texto-escuro-principal);
  white-space: nowrap;
}

.cliente--escuro .cliente-chip {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
  color: #fff;
}

.cliente-chip[aria-pressed="true"],
.cliente-chip[aria-current="page"] {
  /* PORTAL-002 — aria-current cobre o caso de um chip que é um link de
     navegação real (ex.: filtros do Histórico, `<a href>`), não um botão
     com estado alternado por JS (esse já usava aria-pressed) — mesmo
     visual de "selecionado" para os dois casos. */
  background: var(--cliente-verde);
  border-color: var(--cliente-verde);
  color: #fff;
  text-decoration: none;
}

/* ================= Avatar / ponto de legenda ================= */
.cliente-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #334155;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--cliente-fw-black);
  font-size: 12px;
  flex-shrink: 0;
}

.cliente-ponto {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.cliente-ponto--verde { background: var(--cliente-verde); }
.cliente-ponto--azul { background: var(--cliente-azul-claro); }
/* FRONT-006 — paleta adicional para peladas com mais de 2 times (até 10). */
.cliente-ponto--laranja { background: #F97316; }
.cliente-ponto--roxo { background: var(--cliente-roxo); }
.cliente-ponto--rosa { background: #EC4899; }
.cliente-ponto--ciano { background: #06B6D4; }
.cliente-ponto--amarelo { background: var(--cliente-amarelo); }
.cliente-ponto--vermelho { background: #EF4444; }
.cliente-ponto--lima { background: #84CC16; }
.cliente-ponto--indigo { background: #6366F1; }
.cliente-ponto--cinza { background: #94A3B8; }

/* ================= Nível / estrelas ================= */
.cliente-nivel {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.cliente-nivel__estrela svg {
  width: 16px;
  height: 16px;
}

.cliente-nivel--pequeno .cliente-nivel__estrela svg {
  width: 11px;
  height: 11px;
}

.cliente-nivel__estrela--cheia svg { color: var(--cliente-amarelo); fill: currentColor; }
.cliente-nivel__estrela--vazia svg { color: rgba(148, 163, 184, .5); fill: none; stroke: currentColor; stroke-width: 2; }

.cliente-nivel--editavel .cliente-nivel__estrela {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 2px;
}

.cliente-nivel--sem-avaliacao {
  font-size: 11.5px;
  font-weight: var(--cliente-fw-semibold);
  opacity: .55;
}

/* ================= Componente de jogador ================= */
.cliente-jogador {
  display: flex;
  align-items: center;
  gap: var(--cliente-space-3);
  padding: var(--cliente-space-3) 0;
  border-bottom: 1px solid var(--cliente-divisoria-clara);
}

.cliente--escuro .cliente-jogador { border-bottom-color: var(--cliente-divisoria-escura); }

.cliente-jogador__check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(148, 163, 184, .5);
  flex-shrink: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cliente-jogador__check[aria-checked="true"] {
  background: var(--cliente-verde);
  border-color: var(--cliente-verde);
  color: #fff;
}

.cliente-jogador__check svg { width: 12px; height: 12px; }

.cliente-jogador__info { flex: 1; min-width: 0; }

.cliente-jogador__nome {
  font-weight: var(--cliente-fw-bold);
  font-size: 13px;
  margin: 0;
}

.cliente-jogador__apelido {
  opacity: .55;
  font-weight: var(--cliente-fw-regular);
}

.cliente-jogador__acoes {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.cliente-jogador--selecionado {
  background: rgba(22, 163, 74, .08);
  border-radius: 10px;
  padding-left: var(--cliente-space-2);
  padding-right: var(--cliente-space-2);
  margin: 0 calc(var(--cliente-space-2) * -1);
}

.cliente-jogador--indisponivel,
.cliente-jogador--inativo {
  opacity: .45;
}

/* ================= Componente de time ================= */
.cliente-time-card {
  border-radius: var(--cliente-raio-card-grande);
  padding: var(--cliente-space-4) var(--cliente-space-4);
  border: 1.5px solid;
  margin-bottom: var(--cliente-space-4);
}

.cliente-time-card--a { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .4); }
.cliente-time-card--b { background: rgba(59, 130, 246, .1); border-color: rgba(59, 130, 246, .4); }
/* FRONT-006 — paleta adicional para peladas com mais de 2 times (até 10);
   'i'/'j' e qualquer variante fora da paleta caem em --generico (cinza). */
.cliente-time-card--c { background: rgba(249, 115, 22, .1); border-color: rgba(249, 115, 22, .4); }
.cliente-time-card--d { background: rgba(124, 58, 237, .1); border-color: rgba(124, 58, 237, .4); }
.cliente-time-card--e { background: rgba(236, 72, 153, .1); border-color: rgba(236, 72, 153, .4); }
.cliente-time-card--f { background: rgba(6, 182, 212, .1); border-color: rgba(6, 182, 212, .4); }
.cliente-time-card--g { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .4); }
.cliente-time-card--h { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .4); }
.cliente-time-card--generico { background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .4); }

.cliente-time-card--alerta { border-color: rgba(245, 158, 11, .6); }

.cliente-time-card__topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--cliente-space-3);
}

.cliente-time-card__nome {
  font-size: 15px;
  font-weight: var(--cliente-fw-black);
  display: flex;
  align-items: center;
  gap: var(--cliente-space-2);
}

.cliente-time-card__forca {
  text-align: right;
}

.cliente-time-card__forca strong {
  display: block;
  font-size: 17px;
  font-weight: var(--cliente-fw-black);
}

.cliente-time-card__forca span {
  font-size: 10px;
  opacity: .6;
  text-transform: uppercase;
  font-weight: var(--cliente-fw-bold);
}

.cliente-time-card .cliente-jogador {
  padding: 6px 0;
}

/* ================= Indicador de equilíbrio ================= */
.cliente-equilibrio {
  border-radius: var(--cliente-raio-card);
  padding: var(--cliente-space-4);
  margin-bottom: var(--cliente-space-4);
}

.cliente--escuro .cliente-equilibrio { background: var(--cliente-superficie-escura); border: 1px solid var(--cliente-borda-escura); }
.cliente--claro .cliente-equilibrio { background: var(--cliente-superficie-clara); border: 1px solid var(--cliente-borda-clara); }

.cliente-equilibrio__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--cliente-space-2);
  font-size: 12.5px;
  font-weight: var(--cliente-fw-bold);
  opacity: .85;
}

.cliente-equilibrio__barra {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}

.cliente--escuro .cliente-equilibrio__barra { background: rgba(255, 255, 255, .08); }
.cliente--claro .cliente-equilibrio__barra { background: var(--cliente-divisoria-clara); }

.cliente-equilibrio__barra-a { background: var(--cliente-verde); }
.cliente-equilibrio__barra-b { background: var(--cliente-azul-claro); }

.cliente-equilibrio__legendas {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: .65;
  margin-top: var(--cliente-space-2);
}

/* FRONT-006 — modo N times (mais de 2), usado por Minha Pelada. */
.cliente-equilibrio__linha-n {
  display: flex;
  align-items: center;
  gap: var(--cliente-space-2);
  margin-bottom: 6px;
}

.cliente-equilibrio__nome-n {
  width: 72px;
  flex-shrink: 0;
  font-size: 11px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cliente-equilibrio__barra-n {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}

.cliente--escuro .cliente-equilibrio__barra-n { background: rgba(255, 255, 255, .08); }
.cliente--claro .cliente-equilibrio__barra-n { background: var(--cliente-divisoria-clara); }

.cliente-equilibrio__barra-n-preenchimento {
  height: 100%;
  background: var(--cliente-verde);
  border-radius: 999px;
}

/* ================= Time slot (horário) ================= */
.cliente-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cliente-space-2);
}

.cliente-slot {
  border-radius: var(--cliente-raio-chip);
  padding: 10px 4px;
  text-align: center;
  font-size: 13px;
  font-weight: var(--cliente-fw-bold);
  border: 1.5px solid var(--cliente-borda-clara);
  background: #fff;
  color: var(--cliente-texto-escuro-principal);
}

.cliente-slot--disponivel { border-color: var(--cliente-verde); color: var(--cliente-verde-hover); }
.cliente-slot--selecionado { background: var(--cliente-verde); border-color: var(--cliente-verde); color: #fff; }
.cliente-slot--reservado { border-color: var(--cliente-erro); color: var(--cliente-erro); background: #FEF2F2; text-decoration: line-through; opacity: .8; }
.cliente-slot--indisponivel, .cliente-slot--passado { border-color: var(--cliente-borda-clara); color: #94A3B8; background: #F1F5F9; opacity: .6; }

.cliente-slots__legenda {
  display: flex;
  align-items: center;
  gap: var(--cliente-space-4);
  margin-top: var(--cliente-space-3);
  font-size: 11.5px;
  color: var(--cliente-texto-escuro-secundario);
  flex-wrap: wrap;
}

/* ================= Aviso de restrição (FRONT-006) ================= */
.cliente-restricao-alerta {
  display: flex;
  gap: var(--cliente-space-3);
  align-items: flex-start;
  border-radius: var(--cliente-raio-card);
  padding: var(--cliente-space-3) var(--cliente-space-4);
  margin-bottom: var(--cliente-space-4);
  background: rgba(245, 158, 11, .1);
  border: 1.5px solid rgba(245, 158, 11, .4);
}

.cliente-restricao-alerta__icone {
  color: var(--cliente-amarelo);
  flex-shrink: 0;
}

.cliente-restricao-alerta__icone svg { width: 20px; height: 20px; }

.cliente-restricao-alerta__titulo {
  font-size: 12.5px;
  font-weight: var(--cliente-fw-bold);
  margin: 0;
}

.cliente-restricao-alerta__lista {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 11.5px;
  opacity: .8;
}

.cliente-restricao-alerta__lista li { margin-bottom: 2px; }

/* RC-004-R3 — QR real da cobrança PIX (antes desta correção, este
   contentor nunca tinha estilo porque nenhum QR de verdade chegava a
   aparecer aqui — ver ComandaPixPublicoService/PixCheckoutQr). */
.comanda-pix__qr {
  display: flex;
  justify-content: center;
  margin: 0 auto 4px;
}

.comanda-pix__qr img {
  width: 220px;
  height: 220px;
  max-width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: #FFFFFF;
}

.cliente--claro .comanda-pix__qr img { border: 1px solid var(--cliente-borda-clara); }
.cliente--escuro .comanda-pix__qr img { border: 1px solid var(--cliente-borda-escura); }