/* =====================================================================
   Patetas Shop · app.css
   Identidade visual (spec 003): fundo escuro premium + laranja de marca.
   Mobile-first / responsivo.
   ===================================================================== */

:root{
  /* Marca */
  --cor-primaria:        #F7901E;
  --cor-primaria-clara:  #FFB23E;
  --cor-primaria-escura: #E0770C;
  --cor-amarelo:         #FDB913;
  /* Base escura */
  --cor-fundo:           #0E131F;
  --cor-superficie:      #16233F;
  --cor-superficie-2:    #1E2D4F;
  /* Neutros */
  --cor-branco:          #FFFFFF;
  --cor-texto:           #FFFFFF;
  --cor-texto-suave:     #C8CEDA;
  --cor-borda:           #2A3650;
  /* Gradiente de marca */
  --grad-marca: linear-gradient(135deg, #FDB913 0%, #F7901E 55%, #E0770C 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:#12100c;
  box-shadow:0 8px 20px rgba(247,144,30,.30);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(247,144,30,.42); }
.btn-lg{ padding:.95rem 2rem; font-size:1.05rem; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,19,31,.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:#12100c !important; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:64px 0 48px;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(247,144,30,.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(247,144,30,.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(253,185,19,.12); border:1px solid rgba(253,185,19,.45); color:#ffe08a; }

.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(247,144,30,.22), rgba(247,144,30,.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); }
.badge-erro{ background:rgba(226,59,46,.28); color:#ff7c70; }

/* ===================== Financeiro (Contas a Receber/Pagar) ===================== */
.fin-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:1rem 0 1.2rem; }
.fin-card{ background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.fin-card-rot{ font-size:.78rem; color:var(--cor-texto-suave); text-transform:uppercase; letter-spacing:.04em; }
.fin-card-val{ font-size:1.35rem; }
.fin-card-sub{ font-size:.74rem; color:var(--cor-texto-suave); }
.fin-card-alerta{ border-color:rgba(226,59,46,.5); }
.fin-card-alerta .fin-card-val{ color:#ff7c70; }
.fin-filtros{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:1rem; align-items:center; }
.fin-filtros select, .fin-filtros input{ background:var(--cor-fundo); border:1px solid var(--cor-borda); border-radius:8px; color:var(--cor-texto); padding:.5rem .7rem; }
.fin-filtros input[type=search]{ flex:1; min-width:200px; }
.fin-cat{ font-size:.72rem; color:var(--cor-texto-suave); background:var(--cor-superficie-2); padding:.08rem .45rem; border-radius:999px; margin-left:6px; }
.fin-baixa{ margin-top:1.4rem; }
.fin-baixa legend{ color:var(--cor-amarelo); }
.alerta{ border-radius:12px; padding:12px 16px; margin:0 0 16px; border:1px solid var(--cor-borda); }
.alerta-erro{ background:rgba(226,59,46,.12); border-color:rgba(226,59,46,.5); color:#ff9d95; }
.alerta-erro ul{ margin:0; padding-left:1.1rem; }
.alerta-ok{ background:rgba(39,174,96,.12); border-color:rgba(39,174,96,.5); color:#9be7b4; }

/* ===================== NF-e / DANFE ===================== */
.nf-acoes{ display:flex; gap:10px; flex-wrap:wrap; margin:.4rem 0 .8rem; }
.nf-acoes form{ margin:0; }
.danfe{ background:#fff; color:#111; border:1px solid #999; border-radius:8px; padding:18px; max-width:900px; }
.danfe .mono{ font-family:monospace; }
.danfe-homolog{ text-align:center; font-weight:700; color:#b00; border:1px dashed #b00; padding:6px; margin-bottom:12px; letter-spacing:.05em; }
.danfe-topo{ display:flex; justify-content:space-between; gap:16px; border-bottom:2px solid #111; padding-bottom:10px; }
.danfe-emit{ font-size:.9rem; line-height:1.5; }
.danfe-doc{ text-align:right; font-size:.82rem; }
.danfe-tit{ font-size:1.4rem; font-weight:800; }
.danfe-chave{ display:flex; flex-direction:column; gap:2px; border:1px solid #111; padding:8px; margin:10px 0; font-size:.85rem; word-break:break-all; }
.danfe-rot{ font-size:.7rem; color:#555; text-transform:uppercase; }
.danfe-box{ border:1px solid #111; padding:8px; margin-bottom:10px; font-size:.9rem; }
.danfe-itens{ width:100%; border-collapse:collapse; font-size:.8rem; margin-top:6px; }
.danfe-itens th, .danfe-itens td{ border:1px solid #999; padding:4px 6px; text-align:left; }
.danfe-itens .num{ text-align:right; }
.danfe-tot{ display:flex; gap:18px; justify-content:flex-end; align-items:center; margin-top:10px; font-size:.9rem; }
.danfe-total-nf{ font-size:1.1rem; }
.danfe-qr{ text-align:center; margin-top:14px; }
.danfe-qr #nfce-qr{ display:inline-block; background:#fff; padding:6px; }
@media print { .no-print, .sidebar, .app-topbar, .sidebar-overlay{ display:none !important; } .danfe{ border:none; max-width:100%; } .app-main{ padding:0 !important; } }
.nf-eventos{ margin-top:1.2rem; max-width:900px; }
.nf-ev-box{ background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:10px; padding:10px 14px; margin-bottom:10px; }
.nf-ev-box summary{ cursor:pointer; font-weight:700; }
.nf-ev-box form{ margin-top:10px; }
.nf-ev-box textarea{ width:100%; background:var(--cor-fundo); border:1px solid var(--cor-borda); border-radius:8px; color:var(--cor-texto); padding:.5rem; }
.acoes-th{ text-align:right; }
.acoes{ display:flex; gap:6px; justify-content:flex-end; }
.acao-form{ margin:0; display:inline; }
.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:#12100c; 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:#12100c; 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; }
}

/* ===================== Permissões (tela de usuário) ===================== */
.perm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:.6rem; }
.perm-modulo{ background:var(--cor-superficie-2); border:1px solid var(--cor-borda); border-radius:10px; padding:10px 12px; }
.perm-modulo-head{ display:flex; align-items:center; gap:8px; font-weight:700; cursor:pointer; padding-bottom:6px; border-bottom:1px solid var(--cor-borda); margin-bottom:6px; }
.perm-modulo-head input{ width:auto; }
.perm-modulo-nome{ font-size:.95rem; }
.perm-acoes{ display:flex; flex-direction:column; gap:4px; }
.perm-item{ display:flex; align-items:center; gap:7px; font-size:.86rem; color:var(--cor-texto-suave); cursor:pointer; }
.perm-item input{ width:auto; }
.perm-item:hover{ color:var(--cor-texto); }
.perm-bloco{ margin-bottom:1.2rem; }
.perm-bloco-titulo{ font-size:.82rem; color:var(--cor-primaria); text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin:0 0 .55rem; padding-bottom:.3rem; border-bottom:1px solid var(--cor-borda); }

/* ===================== Alteração de Produtos ===================== */
.alt-bar{ position:relative; height:22px; background:var(--cor-superficie-2); border:1px solid var(--cor-borda); border-radius:11px; overflow:hidden; margin-top:6px; }
.alt-bar-fill{ height:100%; width:0; background:var(--cor-primaria); transition:width .2s ease; }
.alt-bar-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.alt-produtos tr.alt-warn td{ background:rgba(226,59,46,.07); }
.alt-produtos tr.alt-off{ opacity:.45; }
.alt-green{ color:#9be7b4; font-weight:700; }
.alt-red{ color:#ffb4ad; font-weight:700; }
.alt-ajuste{ margin-bottom:12px; align-items:flex-end; gap:10px; }
.alt-ajuste .campo{ margin:0; max-width:160px; }
.campo-check{ flex-direction:row !important; align-items:center; gap:8px; }
.campo-check input{ width:auto; }

/* Spinner nos botões em carregamento (data-loading) */
.btn[data-loading-ativo="1"]{ opacity:.9; cursor:progress; }
.btn[data-loading-ativo="1"]::before{
  content:""; display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
  animation:btnspin .7s linear infinite;
}
@keyframes btnspin{ to{ transform:rotate(360deg); } }

/* ===================== Abas do pedido / detalhe (CSS radio-tabs) ===================== */
.pedido-tabs{ margin-top:1rem; }
.pedido-tabs .tabr{ display:none; }
.tab-nav{ display:flex; gap:4px 2px; flex-wrap:wrap; border-bottom:1px solid var(--cor-borda); margin-bottom:1.3rem; }
.tab-nav .tab-btn{ padding:.6rem 1.1rem; cursor:pointer; color:var(--cor-texto-suave); font-weight:700; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; user-select:none; transition:color .15s, border-color .15s; }
.tab-nav .tab-btn:hover{ color:var(--cor-texto); }
.tab-panel{ display:none; }
#pt-resumo:checked ~ .tab-panels .pnl-resumo,
#pt-pagamento:checked ~ .tab-panels .pnl-pagamento,
#pt-entrega:checked ~ .tab-panels .pnl-entrega,
#pt-envio:checked ~ .tab-panels .pnl-envio,
#pt-gnre:checked ~ .tab-panels .pnl-gnre,
#pt-erp:checked ~ .tab-panels .pnl-erp{ display:block; }
#pt-resumo:checked ~ .tab-nav label[for=pt-resumo],
#pt-pagamento:checked ~ .tab-nav label[for=pt-pagamento],
#pt-entrega:checked ~ .tab-nav label[for=pt-entrega],
#pt-envio:checked ~ .tab-nav label[for=pt-envio],
#pt-gnre:checked ~ .tab-nav label[for=pt-gnre],
#pt-erp:checked ~ .tab-nav label[for=pt-erp]{ color:var(--cor-primaria); border-bottom-color:var(--cor-primaria); }
.tab-panel .secao-titulo:first-child,
.tab-panel .secao-head:first-child{ margin-top:0; }
/* Abas Google (online / mapa / realizadas) */
#gt-online:checked ~ .tab-panels .gpnl-online,
#gt-mapa:checked ~ .tab-panels .gpnl-mapa,
#gt-realizadas:checked ~ .tab-panels .gpnl-realizadas{ display:block; }
#gt-online:checked ~ .tab-nav label[for=gt-online],
#gt-mapa:checked ~ .tab-nav label[for=gt-mapa],
#gt-realizadas:checked ~ .tab-nav label[for=gt-realizadas]{ color:var(--cor-primaria); border-bottom-color:var(--cor-primaria); }
#mapaV2{ height:400px; width:100%; margin:10px 0; border-radius:10px; border:1px solid var(--cor-borda); background:var(--cor-superficie-2); }

@media print {
  .sidebar, .sidebar-overlay, .app-topbar, .tab-nav, button, .btn{ display:none !important; }
  .app-shell{ display:block !important; }
  .app-content, .app-main{ margin:0 !important; padding:0 !important; max-width:100% !important; }
  .pedido-tabs .tabr{ display:none; }
  .tab-panels .tab-panel{ display:none !important; }
  .tab-panels .pnl-pagamento{ display:block !important; }
}