/* =====================================================================
   SERRAF Marketplace · app.css
   Identidade visual: fundo navy premium + azul royal de marca (logo SERRAF).
   Mobile-first / responsivo.
   ===================================================================== */

:root{
  /* Marca */
  --cor-primaria:        #1E50C8;
  --cor-primaria-clara:  #3D74E8;
  --cor-primaria-escura: #14328A;
  --cor-amarelo:         #5B9BFF;
  /* Base escura (navy) */
  --cor-fundo:           #081229;
  --cor-superficie:      #0F1F44;
  --cor-superficie-2:    #162A5C;
  /* Neutros */
  --cor-branco:          #FFFFFF;
  --cor-texto:           #FFFFFF;
  --cor-texto-suave:     #C2CDE6;
  --cor-borda:           #243A6B;
  /* Gradiente de marca */
  --grad-marca: linear-gradient(135deg, #3D74E8 0%, #1E50C8 55%, #14328A 100%);

  --radius: 14px;
  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background:var(--cor-fundo);
  color:var(--cor-texto);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

.text-brand{ color:var(--cor-primaria); }

/* ---------- Botões ---------- */
.btn{
  display:inline-block;
  padding:.7rem 1.4rem;
  border-radius:999px;
  font-weight:700;
  border:0;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
  background:var(--grad-marca);
  color:#FFFFFF;
  box-shadow:0 8px 20px rgba(30,80,200,.30);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(30,80,200,.42); }
.btn-lg{ padding:.95rem 2rem; font-size:1.05rem; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(8,18,41,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--cor-borda);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:70px;
}
.brand-logo{ height:46px; width:auto; }
.main-nav{ display:flex; align-items:center; gap:1.6rem; }
.main-nav a{ color:var(--cor-texto-suave); font-weight:600; }
.main-nav a:hover{ color:var(--cor-branco); }
.btn-login{ color:#FFFFFF !important; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:64px 0 48px;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(30,80,200,.18), transparent 60%),
    var(--cor-fundo);
}
.hero-inner{
  display:flex; align-items:center; gap:40px;
  flex-wrap:wrap;
}
.hero-text{ flex:1 1 320px; }
.hero-text h1{ font-size:clamp(2rem, 5vw, 3.2rem); line-height:1.1; margin:0 0 .6rem; }
.hero-sub{ font-size:1.2rem; color:var(--cor-texto-suave); margin:0 0 1.6rem; }
.hero-art{ flex:1 1 300px; text-align:center; }
.hero-logo{ margin:0 auto; max-width:480px; filter:drop-shadow(0 18px 40px rgba(0,0,0,.5)); }

/* ---------- Pilares ---------- */
.pilares{ padding:48px 0; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{
  background:var(--cor-superficie);
  border:1px solid var(--cor-borda);
  border-radius:var(--radius);
  padding:28px 24px;
  text-align:center;
  transition:transform .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-4px); border-color:var(--cor-primaria); }
.card-ico{ font-size:2.4rem; margin-bottom:.4rem; }
.card h3{ margin:.2rem 0 .5rem; color:var(--cor-primaria); }
.card p{ color:var(--cor-texto-suave); margin:0; }

/* ---------- Sobre ---------- */
.sobre{ padding:56px 0; background:var(--cor-superficie); border-top:1px solid var(--cor-borda); }
.sobre-inner{ max-width:760px; text-align:center; }
.sobre h2{ font-size:clamp(1.6rem,4vw,2.2rem); margin:0 0 1rem; }
.sobre p{ color:var(--cor-texto-suave); font-size:1.1rem; }

/* ---------- Footer ---------- */
.site-footer{ padding:30px 0; border-top:1px solid var(--cor-borda); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-logo{ height:40px; width:auto; }
.site-footer p{ color:var(--cor-texto-suave); margin:0; font-size:.95rem; }

/* ---------- Página de erro ---------- */
.error-page{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; gap:.4rem;
}
.error-logo{ max-width:260px; margin-bottom:1rem; }
.error-page h1{ font-size:clamp(2.4rem,8vw,4rem); margin:0; color:var(--cor-primaria); }
.error-page p{ color:var(--cor-texto-suave); margin:.2rem 0 1.4rem; }

/* ---------- Responsivo ---------- */
@media (max-width:992px){
  .cards{ grid-template-columns:1fr; }
  .hero-inner{ flex-direction:column-reverse; text-align:center; }
  .hero-logo{ max-width:340px; }
}
@media (max-width:768px){
  .main-nav a:not(.btn){ display:none; }       /* simplifica nav no mobile */
  .header-inner{ height:62px; }
  .brand-logo{ height:40px; }
}

/* ===================== Autenticação ===================== */
.auth-body{
  min-height:100vh; margin:0;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(700px 320px at 50% -10%, rgba(30,80,200,.16), transparent 60%),
    var(--cor-fundo);
  padding:24px;
}
.auth-wrap{ width:100%; max-width:420px; text-align:center; }
.auth-brand img{ height:64px; margin:0 auto 18px; }
.auth-card{
  background:var(--cor-superficie);
  border:1px solid var(--cor-borda);
  border-radius:16px;
  padding:30px 28px;
  text-align:left;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.auth-title{ font-size:1.5rem; margin:0 0 .2rem; text-align:center; }
.auth-sub{ color:var(--cor-texto-suave); text-align:center; margin:0 0 1.4rem; font-size:.96rem; }
.auth-foot{ color:var(--cor-texto-suave); font-size:.82rem; margin-top:18px; }

.auth-form{ display:flex; flex-direction:column; gap:1rem; }
.auth-form label{ display:flex; flex-direction:column; gap:.4rem; font-size:.9rem; color:var(--cor-texto-suave); }
.auth-form input{
  width:100%; padding:.8rem .9rem;
  background:var(--cor-fundo);
  border:1px solid var(--cor-borda); border-radius:10px;
  color:var(--cor-texto); font-size:1rem;
}
.auth-form input:focus{ outline:2px solid var(--cor-primaria); border-color:transparent; }
.btn-block{ width:100%; margin-top:.4rem; text-align:center; }

.alert{ padding:.75rem .9rem; border-radius:10px; margin-bottom:1rem; font-size:.92rem; }
.alert-erro{ background:rgba(226,59,46,.14); border:1px solid rgba(226,59,46,.5); color:#ffb4ad; }
.alert-info{ background:rgba(91,155,255,.12); border:1px solid rgba(91,155,255,.45); color:#bcd6ff; }

.codigo-input{ text-align:center; letter-spacing:.5em; font-size:1.5rem !important; font-weight:700; }

.mfa-passos{ color:var(--cor-texto-suave); font-size:.92rem; padding-left:1.1rem; margin:.2rem 0 1rem; }
.mfa-passos li{ margin-bottom:.3rem; }
.secret-box{
  background:var(--cor-fundo); border:1px dashed var(--cor-primaria);
  border-radius:10px; padding:.8rem; text-align:center; margin-bottom:.6rem;
}
.secret-box code{ color:var(--cor-amarelo); font-size:1.1rem; letter-spacing:.08em; word-break:break-all; }
.mfa-link{ text-align:center; margin:0 0 1.2rem; }
.mfa-link a{ color:var(--cor-primaria); font-weight:600; font-size:.9rem; }
.mfa-qr{ display:flex; justify-content:center; margin:0 0 1rem; }
.mfa-qr #qrcode{ background:#fff; padding:12px; border-radius:12px; line-height:0; }
.mfa-qr #qrcode img, .mfa-qr #qrcode canvas{ display:block; }
.mfa-ou{ color:var(--cor-texto-suave); font-size:.85rem; text-align:center; margin:.2rem 0 .5rem; }

/* ===================== Área interna ===================== */
.app-body{ margin:0; background:var(--cor-fundo); min-height:100vh; }
.app-topbar{
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 20px;
  background:var(--cor-superficie); border-bottom:1px solid var(--cor-borda);
}
.app-brand img{ height:40px; }
.app-user{ display:flex; align-items:center; gap:14px; color:var(--cor-texto-suave); font-weight:600; }
.logout-form{ margin:0; }
.btn-sair{
  padding:.5rem 1rem; border-radius:999px; border:1px solid var(--cor-borda);
  background:transparent; color:var(--cor-texto); cursor:pointer; font-weight:600;
}
.btn-sair:hover{ border-color:var(--cor-primaria); color:var(--cor-primaria); }
.app-main{ max-width:var(--container); margin:0 auto; padding:32px 20px; }
.painel-bemvindo h1{ font-size:1.8rem; margin:0 0 .4rem; }
.painel-bemvindo p{ color:var(--cor-texto-suave); }
.painel-nota{ margin-top:1.4rem; padding:14px 16px; background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:12px; color:var(--cor-texto-suave); font-size:.92rem; }

/* ===================== Shell / Sidebar ===================== */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:250px; flex-shrink:0;
  background:var(--cor-superficie);
  border-right:1px solid var(--cor-borda);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar-brand{ padding:18px 20px; border-bottom:1px solid var(--cor-borda); }
.sidebar-brand img{ height:42px; }
.sidebar-nav{ display:flex; flex-direction:column; gap:4px; padding:14px 12px; flex:1; overflow-y:auto; }
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:.72rem .9rem; border-radius:10px;
  color:var(--cor-texto-suave); font-weight:600; font-size:.96rem;
  transition:background .15s, color .15s;
}
.nav-item:hover{ background:var(--cor-superficie-2); color:var(--cor-branco); }
.nav-item.ativo{
  background:linear-gradient(90deg, rgba(30,80,200,.22), rgba(30,80,200,.05));
  color:var(--cor-branco);
  box-shadow:inset 3px 0 0 var(--cor-primaria);
}
.nav-ico{ width:22px; text-align:center; font-size:1.1rem; }
.nav-logout{ margin-top:auto; }
.nav-item-btn{ width:100%; background:none; border:0; cursor:pointer; font:inherit; text-align:left; }

.app-content{ flex:1; display:flex; flex-direction:column; min-width:0; }
.app-topbar{
  display:flex; align-items:center; gap:12px;
  height:62px; padding:0 22px;
  background:var(--cor-superficie); border-bottom:1px solid var(--cor-borda);
  position:sticky; top:0; z-index:40;
}
.menu-toggle{ display:none; background:none; border:0; color:var(--cor-texto); font-size:1.5rem; cursor:pointer; line-height:1; }
.topbar-spacer{ flex:1; }
.app-user{ display:flex; align-items:center; gap:10px; }
.user-nome{ font-weight:600; }
.user-perfil{
  font-size:.7rem; letter-spacing:.04em; color:var(--cor-primaria);
  background:var(--cor-fundo); border:1px solid var(--cor-borda);
  padding:.18rem .55rem; border-radius:999px;
}
.app-main{ padding:28px 24px; width:100%; max-width:1100px; }

.sidebar-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:90; }
.sidebar-overlay[hidden]{ display:none; }

/* Atalhos do dashboard */
.painel-head h1{ font-size:1.7rem; margin:0 0 .2rem; }
.painel-head p{ color:var(--cor-texto-suave); margin:0 0 1.4rem; }
.atalhos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.atalho{
  display:flex; align-items:center; gap:14px; padding:18px;
  background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:14px;
  transition:transform .15s, border-color .15s;
}
.atalho:hover{ transform:translateY(-3px); border-color:var(--cor-primaria); }
.atalho-ico{ font-size:1.9rem; line-height:1; }
.atalho-txt{ display:flex; flex-direction:column; color:var(--cor-texto-suave); font-size:.84rem; }
.atalho-txt strong{ color:var(--cor-branco); font-size:1rem; margin-bottom:.1rem; }

/* Placeholder de módulo */
.modulo-head h1{ font-size:1.6rem; margin:0 0 1.2rem; display:flex; align-items:center; gap:.5rem; }
.modulo-ico{ font-size:1.5rem; }
.placeholder-card{
  background:var(--cor-superficie); border:1px dashed var(--cor-borda); border-radius:16px;
  padding:48px 24px; text-align:center;
}
.placeholder-ico{ font-size:3rem; }
.placeholder-card h2{ margin:.4rem 0 .3rem; }
.placeholder-card p{ color:var(--cor-texto-suave); margin:0; }

@media (max-width:992px){
  .menu-toggle{ display:block; }
  .sidebar{
    position:fixed; left:0; top:0; z-index:100;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  .sidebar.aberto{ transform:translateX(0); }
  .app-main{ padding:22px 16px; }
}

/* ===================== Flash ===================== */
.flash{ padding:.8rem 1rem; border-radius:10px; margin-bottom:1.2rem; font-size:.95rem; }
.flash-ok{ background:rgba(39,174,96,.14); border:1px solid rgba(39,174,96,.5); color:#9be7b4; }
.flash-erro{ background:rgba(226,59,46,.14); border:1px solid rgba(226,59,46,.5); color:#ffb4ad; }
.flash ul{ margin:.4rem 0 0; padding-left:1.2rem; }

/* ===================== Botões extra ===================== */
.btn-ghost{ background:transparent; border:1px solid var(--cor-borda); color:var(--cor-texto); padding:.6rem 1.1rem; border-radius:999px; font-weight:600; cursor:pointer; }
.btn-ghost:hover{ border-color:var(--cor-primaria); color:var(--cor-primaria); }

/* ===================== Toolbar / Grid ===================== */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.toolbar h1{ font-size:1.5rem; margin:0; display:flex; align-items:center; gap:.5rem; }
.contador{ font-size:.8rem; background:var(--cor-superficie-2); color:var(--cor-primaria); padding:.15rem .55rem; border-radius:999px; }
.toolbar-acoes{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.busca{ display:flex; gap:6px; }
.busca input{ padding:.55rem .8rem; background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:999px; color:var(--cor-texto); min-width:200px; }
.busca input:focus{ outline:2px solid var(--cor-primaria); }

.tabela-wrap{ overflow-x:auto; border:1px solid var(--cor-borda); border-radius:14px; }
.tabela{ width:100%; border-collapse:collapse; min-width:760px; }
.tabela th, .tabela td{ padding:.7rem .8rem; border-bottom:1px solid var(--cor-borda); text-align:left; vertical-align:middle; }
.tabela thead th{ background:var(--cor-superficie); color:var(--cor-texto-suave); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.tabela tbody tr:hover{ background:rgba(255,255,255,.02); }
.tabela .num{ text-align:right; white-space:nowrap; }
.tabela .mono{ font-family:ui-monospace, monospace; font-size:.85rem; color:var(--cor-texto-suave); }
.capa-td{ width:48px; }
.capa-mini{ width:38px; height:38px; object-fit:cover; border-radius:8px; }
.capa-vazia{ font-size:1.3rem; opacity:.5; }
.link-produto{ color:var(--cor-branco); font-weight:600; }
.link-produto:hover{ color:var(--cor-primaria); }
.badge{ display:inline-block; padding:.18rem .6rem; border-radius:999px; font-size:.74rem; font-weight:700; text-transform:capitalize; }
.badge-ok{ background:rgba(39,174,96,.18); color:#7fe3a4; }
.badge-warn{ background:rgba(253,185,19,.18); color:#ffd674; }
.badge-off{ background:rgba(226,59,46,.16); color:#ff9d95; }
.badge-draft{ background:var(--cor-superficie-2); color:var(--cor-texto-suave); }
.acoes-th{ text-align:right; }
.acoes{ display:flex; gap:6px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.acao-form{ margin:0; display:inline-flex; align-items:center; }
.acao{ background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:8px; padding:.32rem .5rem; cursor:pointer; font-size:.95rem; line-height:1; text-decoration:none; }
.acao:hover{ border-color:var(--cor-primaria); }
.acao-perigo:hover{ border-color:var(--cor-erro); }

.paginacao{ display:flex; gap:6px; margin-top:16px; flex-wrap:wrap; }
.pag{ padding:.4rem .8rem; border:1px solid var(--cor-borda); border-radius:8px; color:var(--cor-texto-suave); font-weight:600; }
.pag:hover{ border-color:var(--cor-primaria); color:var(--cor-branco); }
.pag.ativo{ background:var(--cor-primaria); color:#FFFFFF; border-color:transparent; }

/* ===================== Formulário ===================== */
.form-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.form-produto fieldset{ border:1px solid var(--cor-borda); border-radius:14px; padding:18px 20px; margin:0 0 18px; }
.form-produto legend{ padding:0 .5rem; color:var(--cor-primaria); font-weight:700; font-size:.95rem; }
.form-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.campo{ display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; color:var(--cor-texto-suave); }
.campo-2{ grid-column:span 2; }
.campo-full{ grid-column:1 / -1; }
.campo input, .campo select, .campo textarea{
  padding:.65rem .75rem; background:var(--cor-fundo); border:1px solid var(--cor-borda);
  border-radius:9px; color:var(--cor-texto); font-size:.95rem; font-family:inherit;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:2px solid var(--cor-primaria); border-color:transparent; }
.campo textarea{ resize:vertical; }
.form-acoes{ display:flex; gap:10px; align-items:center; }
.form-dica{ margin:14px 0 0; padding:12px 14px; background:var(--cor-fundo); border:1px solid var(--cor-borda); border-radius:10px; color:var(--cor-texto-suave); font-size:.88rem; }
.tag-voce{ font-size:.68rem; background:var(--cor-primaria); color:#FFFFFF; padding:.1rem .45rem; border-radius:999px; font-weight:700; vertical-align:middle; }

/* ===================== Configurações ===================== */
.secao-titulo{ font-size:1.15rem; margin:28px 0 14px; padding-bottom:.4rem; border-bottom:1px solid var(--cor-borda); }
.contas{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.conta-card{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 16px; background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:12px; }
.conta-info{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.conta-exp{ color:var(--cor-texto-suave); font-size:.8rem; }
.conta-acoes{ display:flex; align-items:center; gap:8px; }
.btn-sm{ padding:.45rem .9rem; font-size:.85rem; }
.bloco-add{ background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:12px; padding:8px 16px; margin-bottom:10px; }
.bloco-add summary{ cursor:pointer; font-weight:600; padding:8px 0; color:var(--cor-primaria); }
.bloco-add .form-produto{ padding-top:8px; }
.form-dica code{ color:var(--cor-amarelo); word-break:break-all; }

/* ===================== Detalhes / Logs ===================== */
.detalhe-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:8px; }
.detalhe-card{ background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:14px; padding:18px 20px; }
.detalhe-card h3{ margin:0 0 .8rem; font-size:1rem; color:var(--cor-primaria); }
.dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; }
.dl dt{ color:var(--cor-texto-suave); font-size:.85rem; }
.dl dd{ margin:0; }
.endereco{ color:var(--cor-texto-suave); margin:.2rem 0; }
.vazio{ color:var(--cor-texto-suave); font-style:italic; }
.erro-txt{ color:#ff9d95; }
.filtros-mkt{ display:flex; gap:6px; flex-wrap:wrap; }
.json-box{
  background:#0a0e17; border:1px solid var(--cor-borda); border-radius:12px;
  padding:18px; overflow:auto; max-height:60vh;
  color:#cfe3ff; font-family:ui-monospace, monospace; font-size:.85rem; line-height:1.5;
  white-space:pre; word-break:normal;
}
@media (max-width:768px){ .detalhe-grid{ grid-template-columns:1fr; } }

@media (max-width:768px){
  .form-grid{ grid-template-columns:1fr; }
  .campo-2{ grid-column:1; }
}

/* ===================== Perguntas / Mensagens ===================== */
.btn-sm.ativo-tab{ background:var(--cor-primaria); color:#fff; border-color:transparent; }
.perguntas-lista{ display:flex; flex-direction:column; gap:14px; }
.pergunta-card{
  background:var(--cor-superficie); border:1px solid var(--cor-borda);
  border-radius:14px; padding:16px 18px;
}
.pergunta-produto{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.pergunta-produto-info{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.pergunta-produto-info a, .pergunta-produto-info strong{ font-size:.95rem; }
.pergunta-texto{ font-size:1.05rem; margin:.2rem 0 .3rem; color:var(--cor-branco); }
.pergunta-meta{ color:var(--cor-texto-suave); font-size:.8rem; margin:0; }
.pergunta-resposta{
  margin-top:10px; padding:10px 12px; border-radius:10px;
  background:rgba(39,174,96,.10); border:1px solid rgba(39,174,96,.35); color:var(--cor-texto-suave);
}
.pergunta-form{ display:flex; gap:10px; align-items:flex-end; margin-top:10px; }
.pergunta-form textarea{
  flex:1; padding:.6rem .8rem; background:var(--cor-fundo); border:1px solid var(--cor-borda);
  border-radius:10px; color:var(--cor-texto); font-family:inherit; font-size:.95rem; resize:vertical;
}
.pergunta-form textarea:focus{ outline:2px solid var(--cor-primaria); border-color:transparent; }
@media (max-width:600px){ .pergunta-form{ flex-direction:column; align-items:stretch; } }

.conversa-itens{ margin:.4rem 0 0; padding-left:1.1rem; color:var(--cor-texto-suave); font-size:.9rem; }
.conversa-itens li{ margin-bottom:.2rem; }
.chat{
  display:flex; flex-direction:column; gap:10px; padding:16px;
  background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:14px; margin-bottom:14px;
}
.chat-msg{ max-width:78%; padding:10px 14px; border-radius:14px; display:flex; flex-direction:column; gap:3px; }
.chat-comprador{ align-self:flex-start; background:var(--cor-superficie-2); border:1px solid var(--cor-borda); }
.chat-eu{ align-self:flex-end; background:linear-gradient(135deg, var(--cor-primaria-clara), var(--cor-primaria)); color:#fff; }
.chat-quem{ font-size:.72rem; font-weight:700; opacity:.85; }
.chat-texto{ margin:0; font-size:.96rem; line-height:1.4; }
.chat-data{ font-size:.7rem; opacity:.7; align-self:flex-end; }

.nf-form{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-top:14px; }
.nf-form .campo{ flex:1; min-width:240px; }
.nf-form input[type=file]{ padding:.5rem; background:var(--cor-fundo); border:1px dashed var(--cor-borda); border-radius:9px; color:var(--cor-texto-suave); }

.paginacao{ align-items:center; }
.pag-info{ padding:.4rem .9rem; color:var(--cor-texto-suave); font-weight:700; }
.pag-off{ opacity:.4; cursor:not-allowed; }

.galeria{ display:flex; flex-wrap:wrap; gap:10px; }
.galeria-item{ width:96px; height:96px; border-radius:10px; overflow:hidden; border:1px solid var(--cor-borda); background:var(--cor-fundo); display:block; }
.galeria-item img{ width:100%; height:100%; object-fit:cover; }
.galeria-item.principal{ border-color:var(--cor-primaria); box-shadow:0 0 0 2px rgba(30,80,200,.35); }

/* ===================== Tabela -> Cards no celular ===================== */
@media (max-width:768px){
  .tabela-wrap{ border:0; overflow:visible; }
  .tabela{ min-width:0; }
  .tabela thead{ display:none; }                       /* esconde cabeçalho */
  .tabela tbody, .tabela tr, .tabela td{ display:block; width:100%; }
  .tabela tr{
    background:var(--cor-superficie); border:1px solid var(--cor-borda);
    border-radius:12px; margin-bottom:12px; padding:6px 14px;
  }
  .tabela tbody tr:hover{ background:var(--cor-superficie); }
  .tabela td{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    border:0; border-bottom:1px solid var(--cor-borda); padding:.55rem 0; text-align:right;
  }
  .tabela tr td:last-child{ border-bottom:0; }
  .tabela td::before{
    content:attr(data-label); font-weight:700; color:var(--cor-texto-suave);
    text-align:left; white-space:nowrap;
  }
  .tabela td[data-label=""]::before{ content:""; }     /* células sem rótulo (ações) */
  .tabela td.acoes{ justify-content:flex-end; }
  .tabela td.capa-td{ justify-content:center; }
  .tabela td.capa-td::before{ content:""; }
  .capa-mini{ width:64px; height:64px; }
}

/* ===================== Dashboard: KPIs + gráfico ===================== */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; margin-bottom:8px; }
.kpi{
  background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:14px;
  padding:18px 20px; display:flex; flex-direction:column; gap:4px;
}
.kpi-val{ font-size:1.7rem; font-weight:800; color:var(--cor-branco); }
.kpi-lbl{ font-size:.85rem; color:var(--cor-texto-suave); }
.kpi-alerta{ border-color:var(--cor-primaria); box-shadow:inset 3px 0 0 var(--cor-primaria); }

.grafico{
  display:flex; align-items:flex-end; gap:8px; height:220px; padding:18px;
  background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:14px; overflow-x:auto;
}
.grafico-col{ flex:1 0 28px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:8px; }
.grafico-barra{ width:72%; background:var(--grad-marca); border-radius:6px 6px 0 0; min-height:2px; }
.grafico-col:hover .grafico-barra{ filter:brightness(1.15); }
.grafico-dia{ font-size:.66rem; color:var(--cor-texto-suave); white-space:nowrap; }

.meta-box{ background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:14px; padding:18px 20px; }
.meta-topo{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; color:var(--cor-texto-suave); }
.meta-pct{ font-size:1.4rem; font-weight:800; color:var(--cor-primaria-clara); }
.meta-pct.ok{ color:#7fe3a4; }
.meta-barra{ height:16px; background:var(--cor-fundo); border:1px solid var(--cor-borda); border-radius:999px; overflow:hidden; }
.meta-fill{ height:100%; background:var(--grad-marca); border-radius:999px; transition:width .4s; min-width:4px; }
.meta-fill.ok{ background:linear-gradient(135deg,#27ae60,#1e8a4c); }
.meta-prev{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px dashed var(--cor-borda); }
.meta-prev-txt{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; color:var(--cor-texto-suave); }
.meta-prev-txt strong{ color:var(--cor-branco); font-size:1.1rem; }