:root{
  --bg:#eceff3;
  --fg:#222;
  --muted:#666;
  --accent:#0077C8;
  --card:#fff;
  --line:#e0e2e8;
  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.08);
}

/* ================== Utilidades ================== */
*{ box-sizing:border-box; }
.hidden{ display:none !important; }

/* quebra segura para textos longos (ex.: chave) */
.break{
  word-break: break-all;
  overflow-wrap: anywhere;
  display:block;
}

/* evita scroll lateral da página */
html, body{ overflow-x:hidden; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;
  background:var(--bg);
  color:var(--fg);
}

/* ================== Header ================== */
header{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 20px;
  background:#000; color:#fff;
  border-bottom:3px solid rgba(0,119,200,.12);
  position:sticky; top:0; z-index:5;
}
header .title-wrap{ flex:1; }
header h1{ margin:0; font-size:clamp(20px,3vw,28px); }
header p.desc{ margin:6px 0 0; color:#c9d1d9; font-size:clamp(13px,2.2vw,15px); }
@media (max-width:560px){
  header{ flex-direction:column; align-items:center; text-align:center; gap:8px; }
  .brand{ order:-1; } .brand img{ height:250px; }
  td.ucom input,
  td.costCol input{
   max-width: 70px;
   font-size: 12px;
}
}

/* ================== Layout base ================== */
main{ padding:16px; max-width:980px; margin:0 auto; }
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
}
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
#dropzone{
  border:2px dashed #d9e0ea; border-radius:var(--radius); padding:18px; text-align:center;
  background:#f8fafc; cursor:pointer;
}
#dropzone.drag{ border-color:var(--accent); background:#eef6ff; }
#file{ display:none; }

/* ================== Botões ================== */
.btn-import{
  display:inline-flex; gap:8px; align-items:center; font-weight:700;
  padding:10px 16px; border-radius:999px; background:var(--accent); color:#fff;
  border:1px solid var(--accent); cursor:pointer;
  animation:pulse 1.8s infinite !important;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,119,200,.7);}
  70%{box-shadow:0 0 0 12px rgba(0,119,200,0);}
  100%{box-shadow:0 0 0 0 rgba(0,119,200,0);}
}

button{
  padding:10px 12px; border-radius:10px; background:var(--accent); color:#fff; border:1px solid var(--accent);
  cursor:pointer; font-size:14px; animation:pulse-soft 2.2s infinite;
}
button.secondary{ background:#fff; color:var(--fg); border:1px solid var(--line); }
@keyframes pulse-soft{
  0%{box-shadow:0 0 0 0 rgba(0,119,200,.4);}
  70%{box-shadow:0 0 0 10px rgba(0,119,200,0);}
  100%{box-shadow:0 0 0 0 rgba(0,119,200,0);}
}

/* ================== Metadados + Tabela ================== */
.info{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px 16px; margin-top:14px; }
.info b, .info .break{
  word-break: break-all; overflow-wrap: anywhere; white-space: normal; display:block;
}

table{ width:100%; border-collapse:collapse; margin-top:14px; background:var(--card); }
thead th{
  position: sticky;
  top: 0;            /* gruda no topo do container de rolagem */
  background: var(--card);
  z-index: 1;
}
th,td{ border-bottom:1px solid var(--line); padding:8px 10px; font-size:14px; }
tbody tr:hover{ background:#fafafe; }
input[type="text"]{ border:1px solid var(--line); border-radius:8px; padding:6px 8px; }

#tableWrap{ overflow-x:auto; }

/* inputs finos (ex.: chave) */
.meta-input{
  width:100%; max-width:100%;
  border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:14px;
}
.meta-row{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.copy-btn{
  padding:6px 10px; font-size:13px; border-radius:8px;
  background:#fff; color:var(--fg); border:1px solid var(--line); cursor:pointer;
}
.copy-btn:active{ transform:translateY(1px); }

/* CNPJ card */
.cnpj-card{ display:flex; align-items:center; gap:12px; padding:12px 14px; box-shadow:var(--shadow); margin-top:12px; }
.cnpj-input{ max-width:280px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:15px; }

/* Loading */
.loading{
  margin-top:10px; font-size:14px; color:var(--accent);
  background:#f1f6ff; border:1px solid #d9e8ff; padding:8px 10px; border-radius:10px;
}

/* Toolbar */
.toolbar{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.spacer{ flex:1; }
.sum{ font-weight:600; color:#333; }

/* ====== Comportamento mobile editor: regras base (desktop e geral) ====== */
/* Esconde SEMPRE no desktop (e como base): botão mobile e card mobile */
.m-edit-toggle{ display:none; }
.mobile-edit{ display:none; }

/* ================== Responsive (<= 560px) ================== */
@media (max-width:560px){
  /* metadados com rolagem horizontal */
  .info{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(180px,auto);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:6px; border-bottom:1px dashed var(--line);
  }
  .info > div{ min-width:180px; }

  /* toolbar quebra linha */
  .toolbar{ flex-wrap:wrap; }

  /* CNPJ empilhado + input 100% */
  .cnpj-card{ flex-direction:column; align-items:stretch; }
  .cnpj-input{ width:100%; max-width:100%; }

  /* tabela mais compacta + largura mínima para rolar */
  th,td{ padding:6px 8px; font-size:13px; }
  table{ min-width:640px; }

  /* esconder colunas de edição (desktop) */
  th.ucom, td.ucom,
  th.costCol, td.costCol{ display:none; }

  /* Esconder o botão "Editar item" no desktop */
.m-edit-toggle { 
  display: none;
}

/* Exibir o botão "Editar item" apenas no mobile */
@media (max-width:560px){
  .m-edit-toggle{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--accent);
    font-size: 13px;
    cursor: pointer;
    animation: none;
  }
}

@media (max-width: 560px) {
  .install-modal-content {
    font-size: 14px;
  }
}

  /* card de edição mobile (aparece somente quando a célula recebe .m-open) */
  td.m-open .mobile-edit{ display:block; }

  .mobile-edit{
    margin-top:8px; padding:10px;
    background:#f7f9fc; border:1px dashed #d9e0ea; border-radius:10px;
    box-shadow:0 1px 2px rgba(0,0,0,.04); font-size:14px;
  }
  .mobile-edit .row{ display:flex; flex-direction:column; gap:10px; }
  .mobile-edit label{ font-size:12.5px; color:#444; margin-bottom:4px; display:block; }
  .mobile-edit input{
    width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; font-size:15px; background:#fff;
  }
  .mobile-edit .edit-note{
    font-size:12px; color:#555; display:flex; align-items:center; gap:6px;
  }
  .mobile-edit .edit-note svg{ width:16px; height:16px; flex-shrink:0; display:inline-block; }
}

/* ================== Footer ================== */
footer{ text-align:center; padding:18px 20px 28px; color:var(--accent); font-size:12px; }

/* ========= THEME DFsystem (patch visual) ========= */
:root{
  --brand-dark: #003B73;
  --brand:       #0077C8;
  --brand-mid:   #005F99;
  --bg:#eaf1f9;              /* fundo mais clean */
  --accent: var(--brand);    /* mantém compatibilidade */
}

/* Header com gradiente da marca */
header{
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color:#fff;
  border-bottom:none;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Painéis com leve glassmorphism */
.panel{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.35);
}

/* Botão “Importar XML” e botões gerais com gradiente */
.btn-import,
button{
  background: linear-gradient(135deg, var(--brand), var(--brand-mid));
  border: none;
  color:#fff;
  font-weight:700;
  animation: none !important;              /* desliga o pulse contínuo */
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
button.secondary{
  background:#fff; color:var(--fg); border:1px solid var(--line);
}
.btn-import:hover,
button:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.btn-import:active,
button:active{
  transform: translateY(0) scale(.99);
}

/* Dropzone com foco nas cores da marca */
#dropzone{
  background: #f5f9ff;
  border-color:#d3e6fb;
}
#dropzone.drag{
  border-color: var(--brand);
  background: linear-gradient(180deg,#eef6ff, #f8fbff);
}

/* Tabela mais legível */
tbody tr:nth-child(odd){ background:#f9fbff; }
tbody tr:hover{ background:#eef6ff; }

/* Inputs mais confortáveis */
input[type="text"], .meta-input, .cnpj-input{
  border-radius:10px;
  border:1px solid #d9e3ef;
}

/* Rodapé com faixa da marca */
footer{
  background: linear-gradient(90deg, var(--brand), var(--brand-mid));
  color:#fff;
  border-radius:12px 12px 0 0;
}

/* Acessibilidade: foco visível */
:focus-visible{
  outline: 3px solid rgba(0,119,200,.45);
  outline-offset: 2px;
}

/* === Confetti overlay === */
.confetti-canvas{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}
.confetti-toast{
  position: fixed;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #003B73, #0077C8);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  z-index: 10000;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  animation: fadeUp 2.4s ease forwards;
}
@keyframes fadeUp{
  0%   { opacity:0; transform:translate(-50%,20px); }
  10%  { opacity:1; transform:translate(-50%,0); }
  90%  { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-10px); }
}

/* === Layout para footer ficar colado no fim === */
html, body { height: 100%; }
body{ min-height: 100dvh; display:flex; flex-direction:column; }
main{ flex: 1 0 auto; }

/* === Footer faixa/gradiente e crédito maior === */
footer{
  margin-top: auto;                           /* empurra pro fim */
  background: linear-gradient(90deg,#003B73,#0077C8);
  color:#fff;
  padding: 16px 20px;
  font-size: clamp(14px, 1.8vw, 18px);        /* maior */
  font-weight: 600;
  text-align:center;
  border-radius: 12px 12px 0 0;
}
/* quando o banner PWA estiver aberto, “gruda” o footer nele */
.has-install-modal footer{ margin-bottom: 84px; } /* ≈ altura do banner */

/* Header com gradiente forte: preto na logo → azul */
header{
  background: linear-gradient(90deg, #000 0%, #001830 15%, #003B73 45%, #0077C8 100%);
  color:#fff;
  border-bottom:none;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

.brand img{ 
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.6)); 
}

/* === Sweep Clean (fumaça + vassoura) === */
.smoke-canvas{
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
}
.broom{
  position: fixed; left: -120px; bottom: 18vh;
  font-size: 64px; line-height: 1;
  z-index: 10002;              /* ↑ acima da fumaça */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
  transform: rotate(-18deg);
  animation: sweepMove 1.4s ease-in-out forwards;
}
@keyframes sweepMove{
  0%   { transform: translateX(0) rotate(-18deg); }
  60%  { transform: translateX(60vw) rotate(-2deg); }
  100% { transform: translateX(110vw) rotate(10deg); }
}

/* Header com gradiente forte: preto na logo → azul */
header{
  background: linear-gradient(90deg, #000 0%, #001830 15%, #003B73 45%, #0077C8 100%);
  color:#fff;
  border-bottom:none;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

.brand img{ 
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.6)); 
}

.brand img{ filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
html, body { height: 100%; }
body{ min-height: 100dvh; display:flex; flex-direction:column; }
main{ flex: 1 0 auto; }  /* empurra o footer pro fim da página */

/* Modal central (overlay elegante) */
.install-modal{
  display:none;
  position: fixed; inset:0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
}
.install-modal.show{ display:flex; align-items:center; justify-content:center; }

.install-modal-content{
  background:#111; color:#fff;
  border-radius:16px; padding:20px;
  width:min(560px, 92vw);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  text-align:center;
}

/* Botões do modal */
.install-btn, .dismiss-btn{
  padding:10px 18px; border:0; border-radius:10px; cursor:pointer;
  margin: 8px 6px 0;
}
.install-btn{ background: linear-gradient(135deg,#0077C8,#005f99); color:#fff; }
.dismiss-btn{ background:#333; color:#fff; }
.install-btn:hover{ transform: translateY(-1px); }

.install-modal.show .install-modal-content{
  animation: pop .24s ease;
  transform-origin: center;
}
@keyframes pop{
  0% { opacity:0; transform: scale(.94); }
  100%{ opacity:1; transform: scale(1); }
}

/* Ajusta inputs da tabela para não estourarem largura */
td.ucom input,
td.costCol input{
  max-width: 100px;   /* largura fixa aceitável */
  text-align: center; /* centraliza valores */
  padding: 4px 6px;   /* mais compacto */
  font-size: 13px;    /* levemente menor */
}

.smoke-canvas{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000; /* antes estava 9998 */
}

/* Fumaça DOM fallback */
.smoke-puff{
  position: fixed;
  bottom: 14vh;
  width: 48px; height: 48px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10001; /* acima da vassoura */
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(200,200,200,.35) 70%, rgba(200,200,200,0));
  filter: blur(1.5px);
  opacity: 0;
  animation: puffUp 1.2s ease-out forwards;
}
@keyframes puffUp{
  0%   { transform: translateY(0) scale(.7); opacity:.0; }
  25%  { opacity:.9; }
  100% { transform: translateY(-120px) scale(1.6); opacity:0; }
}
/* === HEADER + LOGO (versão limpa e única) === */
:root{
  --logo-desktop: 250px;   /* ajuste aqui o tamanho no desktop */
  --logo-mobile: 132px;     /* ajuste aqui o tamanho no mobile */
  --pad-right-desktop: 200px; /* espaço p/ logo à direita */
}

/* Desktop / telas médias+ */
header{
  position: relative;
  min-height: 120px;
  padding-right: var(--pad-right-desktop);
}
header .brand{
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
header .brand img{
  height: var(--logo-desktop);
  width: auto;
  object-fit: contain;
}

/* === MOBILE: logo 200px no topo + header compacto === */
@media (max-width:560px){
  :root{ --logo-mobile: 200px; --logo-top-offset: -4px; } /* ajuste fino (-2 a -8px) */

  /* Header menor e com texto mais perto da logo */
  header{
    position: relative;
    /* quase sem espaço acima; texto começa logo abaixo da logo */
    padding: 0 12px 8px !important; /* zera o topo */
    padding-top: calc(env(safe-area-inset-top,0) + var(--logo-mobile) - 36px) !important;
    
    /* ^ diminua -20px para -28px se quiser o texto ainda mais perto */
    text-align: center;
    min-height: auto !important;
    padding-right: 0 !important;
  }

  /* Logo absoluta, no topo e centralizada de verdade */
  header .brand{
    position: absolute !important;
    top: calc(env(safe-area-inset-top,0) + var(--logo-top-offset)) !important; /* puxa mais pro topo */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: max-content;
    z-index: 1;
  }
  header .brand img{
    height: var(--logo-mobile) !important; /* corrigido var() */
    width: auto !important;
    max-width: 88vw !important;
    display: block;
  }

  /* Texto mais “grudado” e sem respiro extra */
  header .title-wrap{ max-width: 92vw; margin: 0 auto; }
  header h1{ margin: 0 0 2px !important; line-height: 1.15; }
  header p.desc{ margin: 2px 0 0 !important; }
}

@media (max-width:560px){
  .import-wrap{
    display: grid;
    place-items: center;   /* centraliza o conteúdo */
    text-align: center;
  }
  .btn-import{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    cursor: pointer;
  }
}
@media (max-width:560px){
  #dropzone {
    display: flex;
    flex-direction: column;  /* empilha */
    align-items: center;     /* centraliza horizontal */
    justify-content: center; /* centraliza vertical */
    text-align: center;
  }

  #dropzone .btn-import {
    margin-top: 10px; /* espaçamento do texto */
  }
}
/* Estado desabilitado do botão Importar XML */
.btn-import.is-disabled {
  opacity: .55;
  pointer-events: none;   /* bloqueia clique */
  filter: grayscale(15%);
}
/* Barra de ações em massa que acompanha o scroll */
.sticky-bar {
  position: sticky;
  top: 12px;                 /* distância do topo, ajusta conforme o header */
  z-index: 6;                /* fica acima da tabela */
  background: var(--card);   /* fundo sólido */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 12px;
}

/* Botão flutuante: voltar ao topo (canto inferior esquerdo) */
.fab-top {
  position: fixed !important;
  left: 16px;
  bottom: 16px;
  z-index: 9999;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  border-radius: 999px;
  background: #1e66ff;     /* azul */
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  cursor: pointer;
  width: auto;
}
.fab-top:hover { transform: translateY(-2px); }
.fab-top.hidden { display: none !important; }

/* (Opcional) no mobile, ocupar menos espaço */
@media (max-width: 640px) {
  .fab { padding: 10px 12px; gap: 6px; }
}
html { scroll-behavior: smooth; }