/* ============================================================
   MÓDULO DE ETIQUETAS SHELON — identidade: preto, vermelho, off-white
   Minimalista · Industrial · Editorial · Sans-serif pesada
   ============================================================ */
:root {
  --vermelho: #D10711;
  --vermelho-escuro: #A9050D;
  --preto: #121212;
  --preto-suave: #242424;
  --fundo: #F4F4F3;
  --branco: #FFFFFF;
  --cinza: #6B6B6B;
  --borda: #DEDEDC;
  --tinta: #1a1a1a;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ---------- topo ---------- */
.topo { background: var(--preto); color: #fff; border-bottom: 3px solid var(--vermelho); }
.topo-in {
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 30px; min-height: 60px;
}
.marca {
  font-weight: 800; font-size: 18px; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; text-decoration: none;
}
.marca span { color: var(--vermelho); }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a {
  color: #cfcfcf; text-decoration: none; padding: 8px 14px; font-weight: 600;
  font-size: 13px; letter-spacing: .02em; text-transform: uppercase;
}
.nav a:hover { color: #fff; background: var(--preto-suave); }
.usuario { display: flex; align-items: center; gap: 12px; }
.usuario-nome { font-size: 13px; font-weight: 600; color: #e6e6e6; }
.sair {
  color: #999; font-size: 12px; text-decoration: none; text-transform: uppercase;
  letter-spacing: .06em; border: 1px solid #3a3a3a; padding: 5px 12px;
}
.sair:hover { color: #fff; border-color: var(--vermelho); }

/* ---------- corpo ---------- */
.corpo { max-width: 1160px; margin: 0 auto; padding: 34px 24px 70px; }
.rodape { text-align: center; color: var(--cinza); font-size: 11px; padding: 26px; letter-spacing: .08em; text-transform: uppercase; }
h1 {
  font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 4px; color: var(--preto);
}
h1::after { content: ""; display: block; width: 44px; height: 4px; background: var(--vermelho); margin-top: 8px; }
h2 { font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .05em; margin: 30px 0 14px; color: var(--preto); }
.subtitulo { color: var(--cinza); margin: 8px 0 26px; font-size: 14px; }

/* ---------- avisos ---------- */
.aviso { padding: 12px 16px; margin-bottom: 16px; font-size: 13px; border-left: 4px solid transparent; }
.aviso-ok { background: #eef6ef; color: #1d5c2e; border-color: #2e7d32; }
.aviso-erro { background: #fdeeec; color: var(--vermelho-escuro); border-color: var(--vermelho); }
.aviso-aviso { background: #faf6e8; color: #7a5c1a; border-color: #c9a227; }

/* ---------- cartoes ---------- */
.cartao {
  background: var(--branco); border: 1px solid var(--borda); padding: 22px;
  margin-bottom: 18px; border-top: 3px solid var(--preto);
}
.cartao-titulo { font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }

/* ---------- hub ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.grade-card {
  background: var(--branco); border: 1px solid var(--borda); border-top: 3px solid var(--preto);
  padding: 20px; text-decoration: none; color: inherit; display: block; position: relative;
  transition: border-color .15s, transform .15s;
}
.grade-card:hover { border-top-color: var(--vermelho); transform: translateY(-2px); }
.grade-card .numero { font-weight: 800; font-size: 34px; color: var(--preto); line-height: 1.1; }
.grade-card .rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--cinza); }
.grade-card .dica { font-size: 13px; color: var(--cinza); margin-top: 10px; }
.grade-card .chip { position: absolute; top: 16px; right: 16px; }

/* ---------- botoes ---------- */
.botao {
  display: inline-block; background: var(--vermelho); color: #fff; border: 0;
  padding: 10px 20px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; text-decoration: none; border-radius: 2px;
}
.botao:hover { background: var(--vermelho-escuro); }
.botao-suave { background: transparent; color: var(--preto); border: 1px solid var(--preto); }
.botao-suave:hover { background: var(--preto); color: #fff; }
.botao-perigo { background: transparent; color: var(--vermelho); border: 1px solid var(--vermelho); }
.botao-perigo:hover { background: var(--vermelho); color: #fff; }
.botao-pequeno { padding: 6px 13px; font-size: 12px; }
.botao-linha { display: inline-flex; gap: 8px; align-items: center; }

/* ---------- formularios ---------- */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 20px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--cinza); }
.campo input, .campo select, .campo textarea {
  border: 1px solid var(--borda); border-radius: 2px; padding: 10px 12px; font-size: 14px;
  font-family: inherit; background: #fff; color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--preto); box-shadow: 0 0 0 2px rgba(209,7,17,.15); }
.campo .ajuda { font-size: 12px; color: var(--cinza); }
.campo.cheio { grid-column: 1 / -1; }
.campo input.input-grande { padding: 14px 16px; font-size: 16px; width: 100%; }
.acoes-form { display: flex; gap: 10px; margin-top: 22px; }
.check-linha { display: flex; gap: 9px; align-items: center; cursor: pointer; font-size: 13px; font-weight: 600; }
.check-linha input { width: 16px; height: 16px; accent-color: var(--vermelho); }

/* ---------- tabelas ---------- */
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--cinza); padding: 10px 12px;
  border-bottom: 2px solid var(--preto); white-space: nowrap;
}
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:hover td { background: #fafafa; }
.tabela .acao { white-space: nowrap; text-align: right; }
.tabela .acao a, .tabela .acao button { margin-left: 6px; }

/* ---------- chips ---------- */
.chip {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  padding: 3px 10px; text-transform: uppercase; border-radius: 2px;
}
.chip-pa { background: var(--vermelho); color: #fff; }
.chip-mp { background: var(--preto); color: #fff; }
.chip-mc { background: #d9d9d6; color: var(--preto); }
.chip-me { background: #e6e6e4; color: var(--preto); border: 1px solid var(--borda); }
.chip-admin { background: var(--preto); color: #fff; }
.chip-inativo { background: #e9e9e7; color: var(--cinza); }

/* ---------- login ---------- */
.tela-login { max-width: 420px; margin: 7vh auto 0; }
.tela-login .cartao { padding: 40px 36px; text-align: center; border-top: 4px solid var(--vermelho); }
.tela-login .logo-login { width: 230px; margin: 0 auto 22px; display: block; }
.tela-login .marca-grande { font-weight: 800; font-size: 22px; letter-spacing: .28em; text-transform: uppercase; }
.tela-login .marca-grande span { color: var(--vermelho); }
.tela-login .legenda { color: var(--cinza); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin: 6px 0 26px; }
.tela-login .campo { margin-bottom: 14px; text-align: left; }
.tela-login .botao { width: 100%; }

/* ---------- filtro / pestanas ---------- */
.filtro { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.filtro input[type=search], .filtro input[type=text] {
  border: 1px solid var(--borda); border-radius: 2px; padding: 9px 12px; font-size: 14px;
  background: #fff; flex: 1; min-width: 220px;
}
.pestanas { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.pestana {
  padding: 8px 18px; text-decoration: none; color: var(--cinza); border: 1px solid var(--borda);
  background: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.pestana.ativa { background: var(--preto); color: #fff; border-color: var(--preto); }

/* ---------- autocomplete ---------- */
.ac-lista { position: absolute; z-index: 50; background: #fff; border: 1px solid var(--borda); border-top: 0; width: 100%; max-height: 260px; overflow-y: auto; }
.ac-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: #fff; cursor: pointer; font-size: 13px; }
.ac-item:hover { background: #f5f5f4; }
.ac-item small { color: var(--cinza); }

/* ---------- etiqueta 100x145 ---------- */
.area-etiqueta { background: #e8e8e6; padding: 20px; display: inline-block; }
.etq-100x145 {
  width: 100mm; height: 145mm; background: #fff; color: #000; box-sizing: border-box;
  padding: 6mm; display: flex; flex-direction: column;
  font-family: "Segoe UI", Arial, sans-serif; overflow: hidden;
  box-shadow: 0 4px 20px rgba(18,18,18,.25);
}
.etq-100x145 .etq-logo { text-align: center; margin-bottom: 3mm; }
.etq-100x145 .etq-logo img { width: 62mm; height: auto; }
.etq-100x145 .etq-titulo { text-align: center; font-weight: 800; font-size: 17px; letter-spacing: .3px; margin: 1mm 0 4mm; }
.etq-100x145 .etq-linha { font-size: 12px; line-height: 1.35; word-wrap: break-word; }
.etq-100x145 .etq-linha .rotulo { font-weight: 400; }
.etq-100x145 .etq-linha .valor { font-weight: 700; }
.etq-100x145 .etq-barcode-area { margin-top: auto; text-align: center; padding-top: 2mm; }
.etq-100x145 .etq-barcode-numero { font-size: 10px; letter-spacing: 2px; }
.etq-100x145 .etq-selo { text-align: right; color: #D10711; font-weight: 800; font-size: 9px; margin-top: 1mm; }
.etq-simples { font-size: 12px; margin-top: 8px; color: var(--cinza); font-style: italic; }

/* ---------- dashboard ---------- */
.metrica { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.metrica-item { background: var(--branco); border: 1px solid var(--borda); border-top: 3px solid var(--vermelho); padding: 18px; }
.metrica-item .numero { font-weight: 800; font-size: 30px; }
.metrica-item .rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--cinza); margin-top: 2px; }
.barra-linha { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; font-size: 13px; }
.barra-rotulo { flex: 0 0 34%; text-align: right; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pista { flex: 1; background: #e9e9e7; height: 20px; position: relative; }
.barra-preenchida { background: var(--vermelho); height: 100%; min-width: 2px; }
.barra-numero { flex: 0 0 90px; font-weight: 800; font-size: 13px; }

/* ---------- impressao ---------- */
.etq-print-only { display: none; }
@media print {
  body { background: #fff; }
  .topo, .rodape, .no-print, .aviso { display: none !important; }
  .corpo { max-width: none; padding: 0; margin: 0; }
  .area-etiqueta { background: #fff; padding: 0; }
  .etq-100x145 { box-shadow: none; page-break-after: always; }
  .etq-100x145:last-child { page-break-after: auto; }
  .etq-print-only { display: block !important; }
}
@page { size: 100mm 145mm; margin: 0; }