/* ============================================================
   QUART'Z ADMIN — ADMIN-COMPONENTS.CSS
   Cards de métricas, badges de status, listas de pedidos,
   clientes, estoque, botões de ação, alertas, campos.
   Importado em todas as páginas do painel admin.
   ============================================================ */

/* ── STATUS BADGES ──────────────────────────────────────────── */

.status-badge {
  font-family: var(--font-body);
  font-size: 6px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.status-badge--novo        { color: var(--amadeirado); border-color: var(--amadeirado); }
.status-badge--preparando  { color: var(--ash);         border-color: var(--ash); }
.status-badge--transito    { color: var(--void);         border-color: var(--void); }
.status-badge--entregue    { background: var(--void);   color: var(--washi); border-color: var(--void); }
.status-badge--cancelado   { color: #b94040;            border-color: #b94040; }
.status-badge--ativo       { color: var(--void);         border-color: var(--void); }
.status-badge--esgotado    { color: #b94040;            border-color: #b94040; }
.status-badge--rascunho    { color: var(--stone);        border-color: var(--stone); }
.status-badge--exclusivo   { background: var(--amadeirado); color: var(--washi); border-color: var(--amadeirado); }

/* ── CARDS DE MÉTRICAS ──────────────────────────────────────── */

.metricas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.metrica-card {
  border: 1px solid var(--stone);
  padding: 16px 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metrica-card--destaque {
  background: var(--void);
  border-color: var(--void);
}

.metrica-card__label {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
}
.metrica-card--destaque .metrica-card__label { color: rgba(212,197,176,0.55); }

.metrica-card__valor {
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 400;
  color: var(--void);
  line-height: 1;
  letter-spacing: 0.01em;
  min-height: 2rem;
  display: flex;
  align-items: flex-end;
}
.metrica-card--destaque .metrica-card__valor { color: var(--washi); }

.metrica-card__valor--md {
  font-size: 1.5rem;
  min-height: 2rem;
}
.metrica-card__valor--sm {
  font-size: 1.2rem;
  min-height: 2rem;
}

.metrica-card__delta {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.metrica-card--destaque .metrica-card__delta { color: rgba(212,197,176,0.45); }
.metrica-card__delta--pos { color: #4a7c4a; }
.metrica-card__delta--neg { color: #b94040; }

.metrica-card__meta {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--stone);
  letter-spacing: 0.03em;
}

/* ── AÇÕES RÁPIDAS ──────────────────────────────────────────── */

.acoes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.acao-btn {
  border: 1px solid var(--stone);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: #fff;
  transition: border-color 0.2s;
  color: var(--void);
}
.acao-btn:hover { border-color: var(--void); }

.acao-btn--primary {
  background: var(--void);
  border-color: var(--void);
  color: var(--washi);
}
.acao-btn--primary:hover { opacity: 0.88; }

.acao-btn i {
  font-size: 18px;
  color: var(--ash);
}
.acao-btn--primary i { color: rgba(244,240,232,0.65); }

.acao-btn__texto {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── LINHA DE PEDIDO RECENTE (dashboard) ────────────────────── */

.pedido-recente {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(212,197,176,0.4);
}
.pedido-recente:last-child { border-bottom: none; }

.pedido-recente__num {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  color: var(--ash);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  width: 46px;
}

.pedido-recente__info { flex: 1; min-width: 0; }

.pedido-recente__cliente {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pedido-recente__produto {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

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

.pedido-recente__preco {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.04em;
}

/* ── CARD DE PEDIDO (página pedidos) ────────────────────────── */

.pedido-card {
  border: 1px solid var(--stone);
  background: #fff;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s;
}
.pedido-card:hover { border-color: var(--ash); }

.pedido-card__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pedido-card__num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--void);
  letter-spacing: 0.04em;
}

.pedido-card__cliente {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  color: var(--ash);
  letter-spacing: 0.03em;
}

.pedido-card__data {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--stone);
  letter-spacing: 0.04em;
}

.pedido-card__produto {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(212,197,176,0.4);
  border-bottom: 1px solid rgba(212,197,176,0.4);
}

.pedido-card__img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  background: #F0EBE3;
  flex-shrink: 0;
}

.pedido-card__produto-info { flex: 1; min-width: 0; }

.pedido-card__produto-nome {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pedido-card__produto-meta {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.pedido-card__preco {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.pedido-card__acoes {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pedido-card__btn {
  flex: 1;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px;
  text-align: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pedido-card__btn--primary {
  background: var(--void);
  color: var(--washi);
  border: 1px solid var(--void);
}
.pedido-card__btn--primary:hover { opacity: 0.85; }

.pedido-card__btn--outline {
  background: transparent;
  color: var(--void);
  border: 1px solid var(--stone);
}
.pedido-card__btn--outline:hover { border-color: var(--void); }

/* ── LINHA DE CLIENTE ────────────────────────────────────────── */

.cliente-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(212,197,176,0.4);
  cursor: pointer;
  transition: background 0.15s;
}
.cliente-linha:last-child { border-bottom: none; }
.cliente-linha:hover { background: rgba(212,197,176,0.08); margin: 0 -1.2rem; padding-left: 1.2rem; padding-right: 1.2rem; }

.cliente-avatar {
  width: 36px;
  height: 36px;
  background: var(--stone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  color: var(--void);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cliente-avatar--vip { background: var(--amadeirado); color: var(--washi); }

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

.cliente-linha__nome {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cliente-linha__sub {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.03em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cliente-linha__direita {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cliente-wpp-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25D366;
  font-size: 16px;
  transition: opacity 0.2s;
}
.cliente-wpp-btn:hover { opacity: 0.7; }

/* ── CLIENTES RECENTES (dashboard) ──────────────────────────── */

.cliente-recente {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(212,197,176,0.4);
}
.cliente-recente:last-child { border-bottom: none; }

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

.cliente-recente__nome {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cliente-recente__email {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.03em;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── ESTOQUE BAIXO ──────────────────────────────────────────── */

.estoque-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(212,197,176,0.4);
  gap: 10px;
}
.estoque-item:last-child { border-bottom: none; }

.estoque-item__nome {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.03em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.estoque-item__qtd {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  color: var(--amadeirado);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.estoque-item__btn {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--void);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: color 0.2s;
  padding: 0;
}
.estoque-item__btn:hover { color: var(--amadeirado); }

/* ── PRODUTO LINHA (página produtos) ────────────────────────── */

.produto-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(212,197,176,0.4);
}
.produto-linha:last-child { border-bottom: none; }

.produto-linha__img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  background: #F0EBE3;
  flex-shrink: 0;
}

.produto-linha__info { flex: 1; min-width: 0; }

.produto-linha__nome {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.produto-linha__meta {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.produto-linha__preco {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.04em;
  margin-top: 3px;
}

.produto-linha__direita {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.produto-linha__estoque {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.04em;
}

.produto-linha__menu-btn {
  color: var(--void);
  font-size: 16px;
  padding: 4px 8px;
  transition: opacity 0.2s;
}
.produto-linha__menu-btn:hover { opacity: 0.5; }

/* ── CAMPOS DE FORMULÁRIO ADMIN ─────────────────────────────── */

.campo-label {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--void);
  display: block;
  margin-bottom: 6px;
}

.campo-label span {
  font-weight: 200;
  color: var(--ash);
  text-transform: none;
  letter-spacing: 0.06em;
  font-size: 9px;
}

.campo-input,
.campo-textarea,
.campo-select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--stone);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 13px;
  color: var(--void);
  transition: border-color 0.2s;
}
.campo-input::placeholder,
.campo-textarea::placeholder { color: var(--stone); }
.campo-input:focus,
.campo-textarea:focus,
.campo-select:focus { border-color: var(--amadeirado); }

.campo-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

.campo-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234A4A52' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.campo-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.campo-hint {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--stone);
  letter-spacing: 0.04em;
  margin-top: 4px;
  line-height: 1.5;
}

/* ── TOGGLE SWITCH ──────────────────────────────────────────── */

.toggle-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(212,197,176,0.4);
}
.toggle-linha:last-child { border-bottom: none; }

.toggle-linha__info {}

.toggle-linha__titulo {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.03em;
}

.toggle-linha__sub {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.03em;
  margin-top: 1px;
}

.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--stone);
  cursor: pointer;
  transition: background 0.2s;
}
.toggle__slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: var(--washi);
  transition: transform 0.2s;
}
.toggle input:checked ~ .toggle__slider            { background: var(--amadeirado); }
.toggle input:checked ~ .toggle__slider::before    { transform: translateX(18px); }

/* ── BOTÕES PRIMÁRIOS ADMIN ─────────────────────────────────── */

.btn-admin-primary {
  width: 100%;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 15px;
  background: var(--void);
  color: var(--washi);
  border: 1px solid var(--void);
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-admin-primary:hover { opacity: 0.85; }

.btn-admin-outline {
  width: 100%;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px;
  background: transparent;
  color: var(--void);
  border: 1px solid var(--stone);
  transition: border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-admin-outline:hover { border-color: var(--void); }

.btn-admin-danger {
  width: 100%;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px;
  background: transparent;
  color: #b94040;
  border: 1px solid #b94040;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-admin-danger:hover { background: #b94040; color: var(--washi); }

/* ── TABS DE FILTRO ADMIN ───────────────────────────────────── */

.admin-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--stone);
  background: var(--washi);
  padding: 0 1.2rem;
}
.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  padding: 13px 12px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
}
.admin-tab:hover { color: var(--void); }
.admin-tab.ativo { color: var(--void); border-bottom-color: var(--amadeirado); }

/* ── SEARCH BAR ADMIN ───────────────────────────────────────── */

.admin-search-wrap {
  display: flex;
  gap: 8px;
  padding: 16px 1.2rem;
  background: var(--washi);
  border-bottom: 1px solid var(--stone);
}

.admin-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--stone);
  padding: 10px 12px;
  background: #fff;
  transition: border-color 0.2s;
}
.admin-search:focus-within { border-color: var(--amadeirado); }

.admin-search i {
  color: var(--stone);
  font-size: 12px;
  flex-shrink: 0;
}

.admin-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 200;
  color: var(--void);
  letter-spacing: 0.03em;
}
.admin-search input::placeholder { color: var(--stone); }

.admin-search-action {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  border: 1px solid var(--void);
  background: transparent;
  color: var(--void);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.admin-search-action:hover { background: var(--void); color: var(--washi); }

.admin-search-action--primary {
  background: var(--void);
  color: var(--washi);
}
.admin-search-action--primary:hover { opacity: 0.85; }

/* ── BLOCO DE ALERTA ────────────────────────────────────────── */

.alerta-bloco {
  background: var(--void);
  padding: 32px 1.2rem;
  margin-top: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.alerta-bloco__label {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amadeirado);
}

.alerta-bloco__titulo {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--washi);
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.alerta-bloco__sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 200;
  color: rgba(212,197,176,0.5);
  letter-spacing: 0.04em;
  line-height: 1.6;
  max-width: 260px;
}

.alerta-bloco__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 13px 24px;
  border: 1px solid rgba(212,197,176,0.3);
  color: var(--washi);
  background: transparent;
  margin-top: 4px;
  width: 100%;
  transition: border-color 0.2s;
}
.alerta-bloco__btn:hover { border-color: var(--washi); }

/* ── BLOCO CTA ESCURO (rodapé de seção) ─────────────────────── */

.cta-bloco {
  background: var(--void);
  padding: 32px 1.2rem;
  margin-top: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cta-bloco__label {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amadeirado);
}

.cta-bloco__titulo {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--washi);
  line-height: 1.15;
}

.cta-bloco__sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 200;
  color: rgba(212,197,176,0.5);
  letter-spacing: 0.04em;
  line-height: 1.6;
  max-width: 240px;
}

/* ── BLOCO DE CONTAGEM ──────────────────────────────────────── */

.contagem-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--stone);
}

.contagem-stat {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-right: 1px solid var(--stone);
}
.contagem-stat:last-child { border-right: none; }

.contagem-stat__valor {
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--void);
  line-height: 1;
  min-height: 1.8rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.contagem-stat__valor--amadeirado { color: var(--amadeirado); }

.contagem-stat__label {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ── PAGINAÇÃO / VER MAIS ───────────────────────────────────── */

.ver-mais-wrap {
  padding: 20px 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--stone);
}

.ver-mais-btn {
  width: 100%;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px;
  border: 1px solid var(--void);
  background: transparent;
  color: var(--void);
  transition: background 0.2s, color 0.2s;
}
.ver-mais-btn:hover { background: var(--void); color: var(--washi); }

.ver-mais-texto {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--stone);
  letter-spacing: 0.06em;
}

/* ── DRAWER DE DETALHE (clientes) ───────────────────────────── */

.detail-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 340px;
  height: 100%;
  background: var(--washi);
  z-index: 200;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-left: 1px solid var(--stone);
}
.detail-drawer.show { right: 0; }

.detail-drawer__header {
  background: var(--void);
  padding: 16px 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.detail-drawer__close {
  color: var(--stone);
  font-size: 16px;
  padding: 4px;
  transition: color 0.2s;
}
.detail-drawer__close:hover { color: var(--washi); }

.detail-drawer__titulo {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.detail-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-drawer__secao-titulo {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--stone);
}

.detail-dado {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(212,197,176,0.4);
}
.detail-dado:last-child { border-bottom: none; }

.detail-dado__label {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  flex-shrink: 0;
}

.detail-dado__valor {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 200;
  color: var(--void);
  letter-spacing: 0.03em;
  text-align: right;
}

/* ============================================================
   DESKTOP — componentes compartilhados
   ============================================================ */

@media (min-width: 1024px) {

  /* Métricas e pedidos recentes no dashboard */
  .metricas-grid,
  .acoes-grid {
    gap: 12px;
  }

  .metrica-card {
    padding: 20px 18px;
  }

  .metrica-card__valor      { font-size: 2.2rem; }
  .metrica-card__valor--md  { font-size: 1.7rem; min-height: 2.2rem; }

  /* Pedidos recentes */
  .pedido-recente {
    padding: 14px 0;
  }

  .pedido-recente__cliente  { font-size: 12px; }
  .pedido-recente__produto  { font-size: 10px; }
  .pedido-recente__preco    { font-size: 12px; }

  /* Estoque baixo */
  .estoque-item {
    padding: 13px 0;
  }

  .estoque-item__nome { font-size: 12px; }

  /* Clientes recentes */
  .cliente-recente {
    padding: 13px 0;
  }

  .cliente-recente__nome  { font-size: 12px; }
  .cliente-recente__email { font-size: 10px; }

  /* Campos de formulário */
  .campo-input,
  .campo-textarea,
  .campo-select {
    font-size: 14px;
    padding: 13px 16px;
  }

  .campo-label {
    font-size: 9px;
  }

  /* Botões admin */
  .btn-admin-primary,
  .btn-admin-outline,
  .btn-admin-danger {
    padding: 16px;
    font-size: 10px;
  }

  /* Tabs */
  .admin-tab {
    font-size: 10px;
    padding: 14px 16px;
  }

  /* Status badge */
  .status-badge {
    font-size: 7px;
    padding: 4px 9px;
  }

  /* Search */
  .admin-search input {
    font-size: 13px;
  }

  .admin-search-action {
    font-size: 10px;
    padding: 12px 18px;
  }

  /* Drawer */
  .detail-drawer__body {
    padding: 24px 1.5rem;
    gap: 24px;
  }

  .detail-dado__label { font-size: 9px; }
  .detail-dado__valor { font-size: 13px; }

}

@media (min-width: 1024px) {
  .alerta-bloco,
  .cta-bloco {
    max-width: 100% !important;
    padding: 40px 2.5rem !important;
  }

  .secao {
    max-width: 100% !important;
  }

  .admin-footer {
    max-width: 100% !important;
    padding: 24px 2.5rem 40px !important;
  }

  /* 3 pontinhos sempre clicáveis */
  .produto-linha__menu-btn {
    z-index: 100 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
  }

  .produto-dropdown {
    z-index: 9999 !important;
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
  }
}