/* ============================================================
   app.css — Estilos gerais da aplicação
   NÃO usar valores de cor ou fonte diretos aqui.
   Usar sempre var(--nome-da-variavel).
   ============================================================ */

/* Reset e base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:   var(--font-base);
  font-size:     var(--font-size-base);
  line-height:   var(--line-height-base);
  background:    var(--color-bg);
  color:         var(--color-text);
  min-height:    100vh;
  display:       flex;
  flex-direction: column;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ── Layout ────────────────────────────────────────────────── */

.container {
  width:      100%;
  max-width:  var(--max-width);
  margin:     0 auto;
  padding:    var(--spacing-lg) var(--spacing-md);
  flex:       1;
}

/* ── Cabeçalho ─────────────────────────────────────────────── */

.site-header {
  background:      var(--color-primary);
  color:           #fff;
  padding:         var(--spacing-sm) var(--spacing-md);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--spacing-md);
  position:        relative;
}

.site-header__brand {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-sm);
  color:       #fff;
  text-decoration: none;
}
.site-header__brand:hover { text-decoration: none; }

.site-header__logo {
  height:       40px;
  width:        40px;
  object-fit:   contain;
  border-radius: var(--border-radius-sm);
  background:   rgba(255,255,255,0.15);
  padding:      4px;
}

.site-header__name {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.site-header__nav {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-md);
}

.site-header__nav a {
  color:           #fff;
  font-size:       var(--font-size-sm);
  text-decoration: none;
  opacity:         0.85;
}
.site-header__nav a:hover { opacity: 1; text-decoration: underline; }

.btn-logout {
  background:    rgba(255,255,255,0.15);
  padding:       var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
}
.btn-logout:hover { background: rgba(255,255,255,0.25); }

/* ── Rodapé ────────────────────────────────────────────────── */

.site-footer {
  padding:     var(--spacing-md);
  text-align:  center;
  color:       var(--color-text-muted);
  font-size:   var(--font-size-sm);
  border-top:  1px solid var(--color-border);
}

/* ── Títulos de página ─────────────────────────────────────── */

.page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--spacing-lg);
  padding-bottom:  var(--spacing-md);
  border-bottom:   1px solid var(--color-border);
}

.page-header h1 {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

/* ── Botões ────────────────────────────────────────────────── */

.btn {
  display:       inline-block;
  padding:       var(--spacing-sm) var(--spacing-md);
  border:        none;
  border-radius: var(--border-radius);
  font-size:     var(--font-size-base);
  font-weight:   var(--font-weight-bold);
  font-family:   var(--font-base);
  cursor:        pointer;
  text-decoration: none;
  text-align:    center;
  transition:    background 0.15s, opacity 0.15s;
}

.btn-primary   { background: var(--color-primary);  color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); text-decoration: none; }

.btn-secondary { background: var(--color-accent); color: var(--color-text); }
.btn-secondary:hover { opacity: 0.85; text-decoration: none; }

.btn-danger    { background: var(--color-danger); color: #fff; }
.btn-danger:hover { opacity: 0.85; text-decoration: none; }

.btn-sm {
  padding:   var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

/* ── Formulários ───────────────────────────────────────────── */

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display:       block;
  margin-bottom: var(--spacing-xs);
  font-weight:   var(--font-weight-bold);
  font-size:     var(--font-size-sm);
}

.form-input,
.form-select {
  width:         100%;
  padding:       var(--spacing-sm) var(--spacing-md);
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  font-size:     var(--font-size-base);
  font-family:   var(--font-base);
  background:    var(--color-bg-card);
  color:         var(--color-text);
  transition:    border-color 0.15s, outline 0.15s;
}

.form-input:focus,
.form-select:focus {
  outline:       2px solid var(--color-primary);
  outline-offset: -1px;
  border-color:  var(--color-primary);
}

.form-hint {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

.form-actions {
  display:    flex;
  gap:        var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* ── Cards ─────────────────────────────────────────────────── */

.card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding:       var(--spacing-lg);
  box-shadow:    var(--shadow-sm);
}

/* ── Alertas ───────────────────────────────────────────────── */

.alert {
  padding:       var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-md);
  font-size:     var(--font-size-sm);
}

.alert-danger  {
  background: #FFEBEE;
  color:      var(--color-danger);
  border:     1px solid var(--color-danger);
}

.alert-success {
  background: #E8F5E9;
  color:      var(--color-success);
  border:     1px solid var(--color-success);
}

/* ── Tabelas ───────────────────────────────────────────────── */

.table-wrapper {
  overflow-x: auto;
}

.table {
  width:           100%;
  border-collapse: collapse;
  background:      var(--color-bg-card);
  border-radius:   var(--border-radius);
  overflow:        hidden;
  box-shadow:      var(--shadow-sm);
}

.table th,
.table td {
  padding:     var(--spacing-sm) var(--spacing-md);
  text-align:  left;
  border-bottom: 1px solid var(--color-border);
}

.table th {
  font-weight:    var(--font-weight-bold);
  color:          var(--color-text-muted);
  font-size:      var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background:     var(--color-accent);
}

.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover   { background: #fdf6ec; }

/* ── Badges de status ──────────────────────────────────────── */

.badge {
  display:       inline-block;
  padding:       2px var(--spacing-sm);
  border-radius: 99px;
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-bold);
}

.badge-ativo       { background: #E8F5E9; color: var(--color-success); }
.badge-inativo     { background: #FFEBEE; color: var(--color-danger); }
.badge-admin       { background: var(--color-accent); color: var(--color-primary); }
.badge-atendente   { background: #E3F2FD; color: #1565C0; }

/* ── Hero banner (página inicial) ──────────────────────────── */

.hero {
  width:      100%;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.hero__banner {
  display:    block;
  width:      100%;
  max-height: 320px;
  object-fit: contain;
  background: var(--color-bg);
}

.hero__tagline {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-primary);
}

/* ── Tela de login ─────────────────────────────────────────── */

.login-wrapper {
  min-height:      70vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.login-card {
  width:      100%;
  max-width:  380px;
}

.login-card h1 {
  font-size:     var(--font-size-xl);
  margin-bottom: var(--spacing-lg);
  text-align:    center;
  color:         var(--color-primary);
}

/* ── Miniatura de produto (admin) ──────────────────────────── */

.produto-thumb {
  width:         60px;
  height:        60px;
  object-fit:    cover;
  border-radius: var(--border-radius-sm);
  background:    var(--color-accent);
  display:       block;
}

/* ── Vitrine — Cardápio público ────────────────────────────── */

.cardapio-vazio {
  text-align:  center;
  padding:     var(--spacing-xl) var(--spacing-md);
  color:       var(--color-text-muted);
}

.cardapio-secao {
  margin-bottom: var(--spacing-xl);
}

.cardapio-secao__titulo {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-primary);
  border-bottom:  2px solid var(--color-accent);
  padding-bottom: var(--spacing-xs);
  margin-bottom:  var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.produto-item {
  display:       flex;
  gap:           var(--spacing-md);
  padding:       var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.produto-item:last-child {
  border-bottom: none;
}

.produto-item__img {
  width:         80px;
  height:        80px;
  object-fit:    cover;
  border-radius: var(--border-radius);
  flex-shrink:   0;
  background:    var(--color-accent);
}

.produto-item__info {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-xs);
  min-width:      0;
}

.produto-item__cabecalho {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             var(--spacing-sm);
}

.produto-item__nome {
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.produto-item__preco {
  color:       var(--color-primary);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  font-size:   var(--font-size-lg);
}

.produto-item__desc {
  color:       var(--color-text-muted);
  font-size:   var(--font-size-sm);
  line-height: 1.4;
}

.produto-item__acoes {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-sm);
  margin-top:  var(--spacing-xs);
  flex-wrap:   wrap;
}

/* Controle de quantidade [−] N [+] */

.qty-ctrl {
  display:       flex;
  align-items:   center;
  gap:           var(--spacing-xs);
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  overflow:      hidden;
}

.qty-btn {
  width:           32px;
  height:          32px;
  border:          none;
  background:      var(--color-bg-card);
  font-size:       var(--font-size-lg);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--color-primary);
  font-weight:     var(--font-weight-bold);
  transition:      background 0.1s;
}

.qty-btn:hover {
  background: var(--color-accent);
}

.qty-valor {
  min-width:   24px;
  text-align:  center;
  font-weight: var(--font-weight-bold);
  font-size:   var(--font-size-base);
  user-select: none;
}

.btn-adicionar {
  margin-left: auto;
}

.btn-adicionar:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
}

/* ── Alpine.js: ocultar antes de inicializar ───────────────── */

[x-cloak] { display: none !important; }

/* ── Barra flutuante do carrinho ───────────────────────────── */

.carrinho-bar {
  position:    fixed;
  bottom:      0;
  left:        0;
  right:       0;
  background:  var(--color-primary);
  color:       #fff;
  padding:     var(--spacing-sm) var(--spacing-md);
  display:     flex;
  align-items: center;
  gap:         var(--spacing-md);
  z-index:     100;
  box-shadow:  0 -3px 12px rgba(0,0,0,0.2);
}

.carrinho-bar__resumo {
  flex:           1;
  display:        flex;
  flex-direction: column;
  line-height:    1.2;
}

.carrinho-bar__count {
  font-size: var(--font-size-sm);
  opacity:   0.85;
}

.carrinho-bar__total {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.carrinho-bar__acoes {
  display:     flex;
  gap:         var(--spacing-xs);
  flex-shrink: 0;
}

.carrinho-bar__btn {
  background:      rgba(255,255,255,0.2);
  color:           #fff;
  border:          2px solid rgba(255,255,255,0.4);
  padding:         var(--spacing-sm) var(--spacing-md);
  border-radius:   var(--border-radius);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-bold);
  cursor:          pointer;
  white-space:     nowrap;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  transition:      background 0.15s, border-color 0.15s;
  line-height:     1;
}

.carrinho-bar__btn:hover {
  background:   rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.6);
}

.carrinho-bar__btn--outline {
  background:   transparent;
  border-color: rgba(255,255,255,0.5);
}

.carrinho-bar__btn--outline:hover {
  background: rgba(255,255,255,0.15);
}

/* Espaço para a barra não cobrir o último item */
.page-cardapio { padding-bottom: 72px; }

/* ── Página de confirmação ─────────────────────────────────── */

.confirmar-resumo {
  margin-bottom: var(--spacing-lg);
}

.confirmar-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--spacing-sm) 0;
  border-bottom:   1px solid var(--color-border);
  gap:             var(--spacing-md);
}

.confirmar-item:last-child { border-bottom: none; }

.confirmar-item__nome { flex: 1; }
.confirmar-item__qty  { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.confirmar-item__sub  { font-weight: var(--font-weight-bold); white-space: nowrap; }

.confirmar-total {
  display:         flex;
  justify-content: space-between;
  font-size:       var(--font-size-lg);
  font-weight:     var(--font-weight-bold);
  padding-top:     var(--spacing-md);
  margin-top:      var(--spacing-md);
  border-top:      2px solid var(--color-primary);
  color:           var(--color-primary);
}

/* ── Página de sucesso ─────────────────────────────────────── */

.sucesso-wrapper {
  text-align: center;
  padding:    var(--spacing-xl) var(--spacing-md);
}

.sucesso-numero {
  font-size:   64px;
  font-weight: var(--font-weight-bold);
  color:       var(--color-primary);
  line-height: 1;
  margin:      var(--spacing-lg) 0 var(--spacing-sm);
}

.sucesso-label {
  font-size:      var(--font-size-sm);
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sucesso-msg {
  font-size: var(--font-size-lg);
  margin:    var(--spacing-lg) 0;
  color:     var(--color-text);
}

.sucesso-detalhe {
  color:         var(--color-text-muted);
  font-size:     var(--font-size-sm);
  margin-bottom: var(--spacing-xl);
}

/* ── Painel de Atendimento ────────────────────────────────── */

.painel-wrapper {
  padding-bottom: var(--spacing-xl);
}

.painel-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--spacing-md);
  gap:             var(--spacing-md);
}

.painel-header h1 { margin: 0; }

.filtro-toggle {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-xs);
  cursor:      pointer;
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.painel-vazio {
  text-align: center;
  padding:    var(--spacing-xl) var(--spacing-md);
  color:      var(--color-text-muted);
}

/* Card de pedido */
.pedido-card {
  background:    var(--color-bg-card);
  border:        2px solid var(--color-border);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-sm);
  overflow:      hidden;
  transition:    border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

/* Destaque: pedido criado há menos de 40s */
@keyframes pulsar-novo {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245,158,11,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(245,158,11,0.2); }
}

.pedido-card--novo {
  border:     3px solid #F59E0B;
  background: #FFFBEB;
  animation:  pulsar-novo 1.5s ease-in-out infinite;
}

.pedido-card__header {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-sm);
  padding:     var(--spacing-md);
  cursor:      pointer;
  user-select: none;
}

.pedido-card__num {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-primary);
  min-width:   3rem;
}

.pedido-card__info {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.pedido-card__nome  { font-weight: var(--font-weight-bold); }
.pedido-card__hora  { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.pedido-card__right {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            4px;
}

.pedido-card__total   { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }
.pedido-card__chevron { font-size: 10px; color: var(--color-text-muted); }

.pedido-card__detalhes {
  border-top: 1px solid var(--color-border);
  padding:    var(--spacing-md);
}

.pedido-itens { margin-bottom: var(--spacing-md); }

.pedido-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         6px 0;
  border-bottom:   1px solid var(--color-border);
  gap:             var(--spacing-sm);
}

.pedido-item:last-child { border-bottom: none; }

.pedido-item__nome { flex: 1; }
.pedido-item__qty  { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pedido-item__sub  { font-weight: var(--font-weight-bold); white-space: nowrap; }

.pedido-card__acoes {
  border-top:  1px solid var(--color-border);
  padding-top: var(--spacing-sm);
}

.acoes-grupo {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--spacing-xs);
}

.btn-status {
  font-size:     var(--font-size-sm);
  padding:       6px 14px;
  border:        none;
  border-radius: var(--border-radius);
  cursor:        pointer;
  font-weight:   var(--font-weight-bold);
  color:         #fff;
  line-height:   1.2;
}

.btn-pago         { background: #3B82F6; }
.btn-pago:hover   { background: #2563EB; }
.btn-preparo      { background: #F59E0B; }
.btn-preparo:hover{ background: #D97706; }
.btn-pronto       { background: #10B981; }
.btn-pronto:hover { background: #059669; }
.btn-entregue     { background: #065F46; }
.btn-entregue:hover { background: #064E3B; }

.btn-cancelar {
  background:    transparent;
  border:        1px solid #EF4444;
  color:         #EF4444;
  font-size:     var(--font-size-sm);
  padding:       6px 14px;
  border-radius: var(--border-radius);
  cursor:        pointer;
  font-weight:   var(--font-weight-bold);
  line-height:   1.2;
}

.btn-cancelar:hover { background: #FEF2F2; }

.acoes-concluido {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  padding:     var(--spacing-xs) 0;
  font-weight: var(--font-weight-bold);
}

.acoes-concluido--cancelado { color: #EF4444; }

/* ── Tela de Revisão do Carrinho ──────────────────────────── */

.revisao-wrapper    { padding-bottom: var(--spacing-xl); }
.revisao-lista      { margin-bottom: var(--spacing-lg); }

.revisao-item {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-sm);
  padding:     var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.revisao-item:last-child { border-bottom: none; }

.revisao-item__info {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.revisao-item__nome     { font-weight: var(--font-weight-bold); }
.revisao-item__unitario { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.revisao-item__subtotal {
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  min-width:   4.5rem;
  text-align:  right;
}

.revisao-qty {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-xs);
}

.revisao-qty__btn {
  width:           32px;
  height:          32px;
  border:          1px solid var(--color-border);
  border-radius:   50%;
  background:      var(--color-bg-card);
  font-size:       18px;
  line-height:     1;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--color-primary);
  font-weight:     var(--font-weight-bold);
  transition:      background 0.1s;
  flex-shrink:     0;
}

.revisao-qty__btn:hover      { background: var(--color-accent); }

.revisao-qty__btn--remover   { border-color: #EF4444; color: #EF4444; }
.revisao-qty__btn--remover:hover { background: #FEF2F2; }

.revisao-qty__valor {
  min-width:   1.5rem;
  text-align:  center;
  font-weight: var(--font-weight-bold);
  font-size:   var(--font-size-lg);
}

.revisao-total {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--spacing-md) 0;
  border-top:      2px solid var(--color-primary);
  margin-top:      var(--spacing-sm);
  font-size:       var(--font-size-lg);
  font-weight:     var(--font-weight-bold);
  color:           var(--color-primary);
}

.revisao-acoes {
  display:    flex;
  gap:        var(--spacing-sm);
  flex-wrap:  wrap;
  margin-top: var(--spacing-lg);
}

.revisao-vazio {
  text-align: center;
  padding:    var(--spacing-xl) var(--spacing-md);
  color:      var(--color-text-muted);
}

.revisao-vazio__icone { font-size: 48px; margin-bottom: var(--spacing-md); }
.revisao-vazio__msg   { font-size: var(--font-size-lg); margin-bottom: var(--spacing-lg); }

/* Badges de status */
.badge--aberto     { background: #F3F4F6; color: #374151; }
.badge--pago       { background: #DBEAFE; color: #1E40AF; }
.badge--em_preparo { background: #FEF3C7; color: #92400E; }
.badge--pronto     { background: #D1FAE5; color: #065F46; }
.badge--entregue   { background: #D1FAE5; color: #065F46; opacity: 0.7; }
.badge--cancelado  { background: #FEE2E2; color: #991B1B; }

/* ── Relatórios ────────────────────────────────────────────────────────── */

.relatorio-nav {
  display:       flex;
  gap:           var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0;
}

.relatorio-nav__link {
  display:      inline-block;
  padding:      var(--spacing-sm) var(--spacing-md);
  font-size:    var(--font-size-sm);
  font-weight:  var(--font-weight-medium);
  color:        var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.relatorio-nav__link:hover {
  color: var(--color-primary);
}

.relatorio-nav__link--ativo {
  color:        var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight:  var(--font-weight-bold);
}

.relatorio-filtro {
  display:    flex;
  align-items: flex-end;
  gap:        var(--spacing-md);
  flex-wrap:  wrap;
  margin-bottom: var(--spacing-lg);
  padding:    var(--spacing-md);
  background: var(--color-surface);
  border:     1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.relatorio-filtro .form-group { margin-bottom: 0; }

.relatorio-tabela {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
}

.relatorio-tabela th,
.relatorio-tabela td {
  padding:       var(--spacing-sm) var(--spacing-md);
  text-align:    left;
  border-bottom: 1px solid var(--color-border);
}

.relatorio-tabela thead th {
  background:  var(--color-surface);
  font-weight: var(--font-weight-bold);
  font-size:   var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:       var(--color-text-muted);
}

.relatorio-tabela tfoot td {
  font-weight: var(--font-weight-bold);
  border-top:  2px solid var(--color-border);
  border-bottom: none;
}

.relatorio-tabela .col-num   { text-align: right; width: 100px; }
.relatorio-tabela .col-moeda { text-align: right; width: 130px; }

.relatorio-totais {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.relatorio-totais__item {
  display:       flex;
  flex-direction: column;
  gap:           var(--spacing-xs);
  padding:       var(--spacing-md) var(--spacing-lg);
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width:     160px;
  flex:          1;
}

.relatorio-totais__label {
  font-size: var(--font-size-xs);
  color:     var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.relatorio-totais__valor {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text);
}

.relatorio-vazio {
  text-align: center;
  padding:    var(--spacing-xl) var(--spacing-md);
  color:      var(--color-text-muted);
  font-size:  var(--font-size-lg);
}

.btn-csv {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--spacing-xs);
  padding:         var(--spacing-sm) var(--spacing-md);
  background:      var(--color-primary);
  color:           #fff;
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  border-radius:   var(--radius-md);
  text-decoration: none;
  transition:      background 0.15s;
}

.btn-csv:hover { background: var(--color-primary-hover); }

/* Card de pedido no detalhe */

.relatorio-pedido {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  overflow:      hidden;
}

.relatorio-pedido--cancelado {
  opacity: 0.6;
  border-color: #FCA5A5;
}

.relatorio-pedido__header {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-md);
  padding:     var(--spacing-sm) var(--spacing-md);
  background:  var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-wrap:   wrap;
}

.relatorio-pedido__num {
  font-weight: var(--font-weight-bold);
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  min-width:   40px;
}

.relatorio-pedido__cliente {
  flex:        1;
  font-weight: var(--font-weight-medium);
}

.relatorio-pedido__hora {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
}

.relatorio-pedido__body { padding: var(--spacing-sm) 0; }

.relatorio-pedido__footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--spacing-sm) var(--spacing-md);
  background:      var(--color-surface);
  border-top:      1px solid var(--color-border);
  font-weight:     var(--font-weight-bold);
}

/* ── Bloco PIX — tela de sucesso (SPEC-009) ────────────────────────────── */

.pix-bloco {
  margin-top:    var(--spacing-xl);
  padding:       var(--spacing-lg);
  background:    var(--color-surface);
  border:        2px solid var(--color-primary);
  border-radius: var(--radius-md);
  text-align:    center;
  width:         100%;
  max-width:     420px;
}

.pix-titulo {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color:       var(--color-primary);
  margin:      0 0 var(--spacing-xs);
}

.pix-instrucao {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-muted);
  margin:     0 0 var(--spacing-md);
}

.pix-valor {
  font-size:     var(--font-size-xl);
  font-weight:   var(--font-weight-bold);
  color:         var(--color-text);
  margin-bottom: var(--spacing-md);
}

.pix-qr-wrapper {
  display:         flex;
  justify-content: center;
  margin-bottom:   var(--spacing-md);
}

.pix-qr-wrapper > div {
  display:         inline-flex;
  justify-content: center;
  align-items:     center;
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-sm);
  padding:         var(--spacing-sm);
  background:      #fff;
}

.pix-qr-wrapper img,
.pix-qr-wrapper canvas {
  display: block;
}

.pix-campo {
  text-align:  left;
  margin-top:  var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top:  1px solid var(--color-border);
}

.pix-campo__label {
  display:       block;
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-bold);
  color:         var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.pix-campo__row {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-sm);
}

.pix-campo__valor {
  flex:          1;
  font-size:     var(--font-size-sm);
  color:         var(--color-text);
  word-break:    break-all;
  font-family:   monospace;
  background:    var(--color-bg);
  padding:       var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  border:        1px solid var(--color-border);
}

.pix-campo__valor--truncado {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  word-break:    normal;
  width:         100%;
}

.btn-copiar {
  width:         100%;
  padding:       var(--spacing-sm) var(--spacing-md);
  background:    var(--color-primary);
  color:         #fff;
  border:        none;
  border-radius: var(--radius-sm);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  cursor:        pointer;
  transition:    background 0.15s;
  text-align:    center;
}

.btn-copiar:hover     { background: var(--color-primary-dark, #b45309); }
.btn-copiar--ok       { background: #16A34A; }
.btn-copiar--ok:hover { background: #16A34A; }

/* ── Rastreabilidade do Painel — SPEC-010 ──────────────────────────────── */

.pedido-card__status-grupo {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            2px;
}

.badge-responsavel {
  font-size:   11px;
  color:       var(--color-text-muted);
  font-style:  italic;
  line-height: 1;
}

.pedido-historico {
  margin:        var(--spacing-sm) 0;
  padding:       var(--spacing-sm) var(--spacing-md);
  background:    var(--color-bg);
  border-radius: var(--border-radius-sm);
  border-left:   3px solid var(--color-border);
}

.pedido-historico__titulo {
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-bold);
  color:         var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.pedido-historico__linha {
  font-size: var(--font-size-sm);
  color:     var(--color-text);
  margin:    2px 0;
}

.pedido-historico__linha--cancelado {
  color: var(--color-danger);
}

.btn-status:disabled,
.btn-cancelar:disabled {
  opacity:        0.4;
  cursor:         not-allowed;
  pointer-events: none;
}

/* ── Tela de indisponibilidade — SPEC-011 ──────────────────── */

.indisponivel-wrapper {
  max-width:      480px;
  margin:         var(--spacing-xl) auto;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--spacing-md);
}

.indisponivel-icone {
  font-size:   3rem;
  line-height: 1;
}

.indisponivel-titulo {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text);
}

.indisponivel-msg {
  color: var(--color-text-muted);
}

.indisponivel-lista {
  list-style:    none;
  width:         100%;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding:       var(--spacing-sm) var(--spacing-md);
  text-align:    left;
}

.indisponivel-lista li {
  padding:       var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-danger);
}

.indisponivel-lista li:last-child {
  border-bottom: none;
}

.indisponivel-orientacao {
  color:     var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.indisponivel-acoes {
  margin-top: var(--spacing-sm);
}

/* ── Menu responsivo (mobile) — SPEC-012 ───────────────────── */

/* Link Painel visível apenas no mobile — escondido no desktop */
.site-header__painel-mobile {
  display: none;
}

/* Botão hamburger — escondido no desktop */
.site-header__hamburger {
  display:       none;
  background:    none;
  border:        none;
  color:         #fff;
  font-size:     1.4rem;
  cursor:        pointer;
  padding:       var(--spacing-xs) var(--spacing-sm);
  line-height:   1;
  border-radius: var(--border-radius-sm);
  transition:    background 0.15s ease;
}
.site-header__hamburger:hover {
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {

  /* Painel visível no cabeçalho mobile */
  .site-header__painel-mobile {
    display:      block;
    color:        #fff;
    font-weight:  var(--font-weight-bold);
    white-space:  nowrap;
    margin-left:  auto;
    margin-right: var(--spacing-sm);
  }
  .site-header__painel-mobile:hover {
    text-decoration: underline;
  }

  /* Hamburger visível no mobile */
  .site-header__hamburger {
    display: block;
  }

  /* Painel dentro do nav: oculto no mobile (aparece no cabeçalho) */
  .site-header__painel-desktop {
    display: none;
  }

  /* Nav vira dropdown absoluto */
  .site-header__nav {
    position:       absolute;
    top:            100%;
    left:           0;
    right:          0;
    background:     var(--color-primary);
    flex-direction: column;
    padding:        var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    gap:            0;
    z-index:        200;
    box-shadow:     0 4px 12px rgba(0, 0, 0, 0.2);

    opacity:         0;
    pointer-events:  none;
    transform:       translateY(-6px);
    transition:      opacity 0.2s ease, transform 0.2s ease;
  }

  /* Estado aberto */
  .site-header__nav--aberto {
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(0);
  }

  /* Links do dropdown */
  .site-header__nav a {
    display:       block;
    color:         #fff;
    padding:       var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size:     var(--font-size-base);
  }
  .site-header__nav a:last-child {
    border-bottom: none;
  }
  .site-header__nav a:hover {
    text-decoration: underline;
  }

  /* btn-logout no mobile: sem estilo de botão, só texto */
  .site-header__nav .btn-logout {
    background: none;
    border:     none;
    padding:    var(--spacing-sm) 0;
    color:      #fff;
  }
}