/* ==========================================================================
   Lista de Produtos e Fornecedores — sistema de design mobile-first
   ========================================================================== */

:root {
  --cor-primaria: #4f46e5;
  --cor-primaria-escura: #4338ca;
  --cor-primaria-clara: #eef2ff;
  --cor-sucesso: #16a34a;
  --cor-sucesso-fundo: #dcfce7;
  --cor-aviso: #d97706;
  --cor-aviso-fundo: #fef3c7;
  --cor-perigo: #dc2626;
  --cor-perigo-fundo: #fee2e2;
  --cor-info: #0284c7;
  --cor-info-fundo: #e0f2fe;

  --texto: #111827;
  --texto-suave: #6b7280;
  --texto-inverso: #ffffff;
  --fundo: #f7f8fb;
  --superficie: #ffffff;
  --borda: #e5e7eb;

  --raio: 14px;
  --raio-sm: 10px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --sombra-flutuante: 0 8px 24px rgba(16, 24, 40, .12);

  --altura-topo: 56px;
  --altura-nav: 64px;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-primaria-clara: #1e1b4b;
    --texto: #f3f4f6;
    --texto-suave: #9ca3af;
    --fundo: #0f1115;
    --superficie: #171a21;
    --borda: #262a33;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
}

body { padding-bottom: calc(var(--altura-nav) + env(safe-area-inset-bottom)); }
body.sem-nav { padding-bottom: 0; }

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

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
p { margin: 0 0 .75rem; }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

/* -------------------------------------------------------------------- */
/* Barra superior                                                        */
/* -------------------------------------------------------------------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--altura-topo);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: 0 16px;
}

.topo__marca {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--texto);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topo__acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--texto-suave);
}
.topo__acao:hover { background: var(--fundo); text-decoration: none; }

/* -------------------------------------------------------------------- */
/* Navegação inferior (estilo app)                                       */
/* -------------------------------------------------------------------- */
.nav-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-inferior__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px 10px;
  font-size: .70rem;
  color: var(--texto-suave);
}
.nav-inferior__item:hover { text-decoration: none; }
.nav-inferior__item svg { width: 22px; height: 22px; }
.nav-inferior__item.ativo { color: var(--cor-primaria); font-weight: 600; }

/* -------------------------------------------------------------------- */
/* Cartões, botões, formulários                                          */
/* -------------------------------------------------------------------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  border-radius: var(--raio-sm);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .05s ease, opacity .15s ease, background .15s ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primario { background: var(--cor-primaria); color: var(--texto-inverso); }
.btn-primario:hover { background: var(--cor-primaria-escura); text-decoration: none; }

.btn-secundario { background: var(--fundo); color: var(--texto); border-color: var(--borda); }
.btn-secundario:hover { background: var(--borda); text-decoration: none; }

.btn-perigo { background: var(--cor-perigo); color: var(--texto-inverso); }

.btn-texto { background: transparent; color: var(--cor-primaria); width: auto; padding: 8px 4px; }

.btn-auto { width: auto; }
.btn-pequeno { padding: 8px 12px; font-size: .85rem; }

.campo { margin-bottom: 16px; }
.campo label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.input,
select.input,
textarea.input {
  width: 100%;
  padding: 13px 14px;
  font-size: 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
}
.input:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-clara);
}

.ajuda { font-size: .78rem; color: var(--texto-suave); margin-top: 6px; }

/* -------------------------------------------------------------------- */
/* Selos de status                                                       */
/* -------------------------------------------------------------------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.selo-sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.selo-aviso   { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.selo-perigo  { background: var(--cor-perigo-fundo); color: var(--cor-perigo); }
.selo-info    { background: var(--cor-info-fundo); color: var(--cor-info); }
.selo-neutro  { background: var(--fundo); color: var(--texto-suave); border: 1px solid var(--borda); }

/* -------------------------------------------------------------------- */
/* Tela de login / OTP                                                   */
/* -------------------------------------------------------------------- */
.tela-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.tela-auth__caixa { width: 100%; max-width: 380px; }
.tela-auth__logo {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--cor-primaria);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.4rem;
  margin: 0 auto 18px;
}
.tela-auth h1 { text-align: center; font-size: 1.3rem; }
.tela-auth__subtitulo { text-align: center; color: var(--texto-suave); margin-bottom: 24px; }

.otp-grupo {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 18px;
}
.otp-grupo input {
  width: 100%;
  aspect-ratio: 1 / 1;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0;
}

.alerta {
  padding: 12px 14px;
  border-radius: var(--raio-sm);
  font-size: .9rem;
  margin-bottom: 16px;
}
.alerta-erro { background: var(--cor-perigo-fundo); color: var(--cor-perigo); }
.alerta-sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.alerta-info { background: var(--cor-info-fundo); color: var(--cor-info); }

/* -------------------------------------------------------------------- */
/* Busca                                                                 */
/* -------------------------------------------------------------------- */
.busca {
  position: sticky;
  top: var(--altura-topo);
  z-index: 15;
  background: var(--fundo);
  padding: 12px 16px;
  border-bottom: 1px solid var(--borda);
}
.busca form { position: relative; }
.busca input {
  padding-left: 40px;
}
.busca svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--texto-suave);
}

/* -------------------------------------------------------------------- */
/* Lista / grade de produtos                                             */
/* -------------------------------------------------------------------- */
.lista-produtos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px;
}
@media (min-width: 640px) {
  .lista-produtos { grid-template-columns: 1fr 1fr; }
}

.produto-card {
  display: flex;
  gap: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px;
  box-shadow: var(--sombra);
  color: var(--texto);
}
.produto-card:hover { text-decoration: none; border-color: var(--cor-primaria); }

.produto-card__midia {
  flex: 0 0 84px;
  width: 84px; height: 84px;
  border-radius: var(--raio-sm);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.produto-card__midia video, .produto-card__midia svg { width: 100%; height: 100%; object-fit: cover; }

.produto-card__corpo { flex: 1; min-width: 0; }
.produto-card__nome {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.produto-card__valores { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .82rem; color: var(--texto-suave); margin-bottom: 6px; }
.produto-card__valores b { color: var(--texto); }

.vazio {
  text-align: center;
  padding: 48px 16px;
  color: var(--texto-suave);
}
.vazio svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: .5; }

/* -------------------------------------------------------------------- */
/* Detalhe do produto                                                    */
/* -------------------------------------------------------------------- */
.video-wrap {
  width: 100%;
  border-radius: var(--raio);
  overflow: hidden;
  background: #000;
  aspect-ratio: 9 / 16;
  max-height: 70vh;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-wrap video { width: 100%; height: 100%; object-fit: contain; }

.preco-comparativo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}
.preco-bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 12px;
  text-align: center;
}
.preco-bloco span { display: block; font-size: .75rem; color: var(--texto-suave); margin-bottom: 4px; }
.preco-bloco strong { font-size: 1.15rem; }

.margem-destaque {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
  border-radius: var(--raio-sm);
  padding: 14px;
  text-align: center;
  margin-bottom: 16px;
}
.margem-destaque strong { font-size: 1.4rem; display: block; }

.info-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
  font-size: .9rem;
}
.info-linha:last-child { border-bottom: none; }
.info-linha span:first-child { color: var(--texto-suave); }

/* -------------------------------------------------------------------- */
/* Tabelas administrativas (viram cartões no mobile)                     */
/* -------------------------------------------------------------------- */
.tabela-admin { width: 100%; border-collapse: collapse; background: var(--superficie); border-radius: var(--raio); overflow: hidden; border: 1px solid var(--borda); }
.tabela-admin th, .tabela-admin td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borda); font-size: .88rem; }
.tabela-admin th { background: var(--fundo); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.tabela-admin tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
  .tabela-admin thead { display: none; }
  .tabela-admin, .tabela-admin tbody, .tabela-admin tr, .tabela-admin td { display: block; width: 100%; }
  .tabela-admin tr { border-bottom: 8px solid var(--fundo); padding: 4px 0; }
  .tabela-admin td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
    border-bottom: 1px solid var(--borda);
  }
  .tabela-admin td:last-child { border-bottom: none; }
  .tabela-admin td::before {
    content: attr(data-rotulo);
    font-weight: 600;
    color: var(--texto-suave);
    text-align: left;
  }
}

.barra-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.barra-admin h1 { margin: 0; }

.grade-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .grade-2 { grid-template-columns: 1fr 1fr; } }

.rodape-espaco { height: 24px; }

.painel-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
@media (min-width: 640px) { .painel-stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; }
.stat span { display: block; font-size: .75rem; color: var(--texto-suave); margin-bottom: 4px; }
.stat strong { font-size: 1.4rem; }

.lista-admin-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-admin-links a {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 14px 16px; color: var(--texto); font-weight: 600;
}
.lista-admin-links a:hover { border-color: var(--cor-primaria); text-decoration: none; }