/* ============================================================
   CRACHÁ — estilos compartilhados (index, superadmin, totem)
   Único ponto de verdade para impressão de credencial.
   Controlado por variáveis CSS aplicadas via badge.js.
   Layout limpo: sem bordas, sem cores, só o conteúdo essencial.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Roboto:wght@400;500;700;900&family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;600;700;800&display=swap');

:root {
  --cracha-fonte: 'Inter', sans-serif;
  --cracha-largura: 90mm;
  --cracha-altura: 29mm;
  --cracha-escala: 0.78;
  --cracha-cor: #6c63ff; /* usado apenas no botão da tela, nunca no crachá impresso */
  --cracha-align: left;       /* left | center */
  --cracha-tamanho: 1;        /* multiplicador geral do texto */
  --cracha-linha-peso: 500;   /* peso dos campos extras (500 normal, 700 negrito) */
}

/* Overlay de impressão */
#badge-print {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 99999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
#badge-print.open { display: flex; }

/* Cartão do crachá — branco, sem bordas, sem contornos */
#badge-print .badge-card {
  width: var(--cracha-largura);
  min-height: var(--cracha-altura);
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--cracha-fonte);
  padding: calc(6px * var(--cracha-escala)) 14px;
  overflow: hidden;
}
#badge-print .badge-body { width: 100%; text-align: var(--cracha-align); }

/* Nome (sempre em negrito) */
#badge-print .badge-nm {
  font-size: calc(20px * var(--cracha-escala) * var(--cracha-tamanho));
  font-weight: 800;
  color: #0a0a0f;
  line-height: 1.15;
}

/* Linhas extras (empresa, cidade, etc.) — uma por linha */
#badge-print .badge-line {
  font-size: calc(12px * var(--cracha-escala) * var(--cracha-tamanho));
  font-weight: var(--cracha-linha-peso);
  color: #333;
  margin-top: calc(3px * var(--cracha-escala));
  line-height: 1.25;
}

/* ---- Layout COMPACTO (etiquetas baixas, ex.: Brother 29×90mm) ---- */
#badge-print .badge-card.compacto {
  padding: calc(3px * var(--cracha-escala)) 10px;
}
#badge-print .badge-card.compacto .badge-nm {
  font-size: calc(18px * var(--cracha-escala) * var(--cracha-tamanho));
}
#badge-print .badge-card.compacto .badge-line {
  font-size: calc(11px * var(--cracha-escala) * var(--cracha-tamanho));
  margin-top: 1px;
}

/* Botões do overlay (não imprimem) */
#badge-print .badge-print-btns { display: flex; gap: 12px; }
#badge-print .badge-print-btn {
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
}
#badge-print .badge-print-btn.go { background: var(--cracha-cor); color: #fff; }
#badge-print .badge-print-btn.close { background: #1c1c28; color: #e8e8f0; border: 1px solid #2a2a3d; }

/* Impressão: só o crachá aparece, em UMA etiqueta do tamanho do modelo.
   O tamanho da página (@page) é injetado por badge.js conforme o modelo.
   Usamos display:none (e não visibility:hidden) para o resto do conteúdo
   não ocupar espaço e não gerar páginas em branco. */
@media print {
  html, body {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  /* Esconde tudo que for irmão direto do overlay do crachá */
  body > *:not(#badge-print) { display: none !important; }
  #badge-print {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    background: #fff !important;
    gap: 0 !important;
  }
  #badge-print .badge-print-btns { display: none !important; }
  #badge-print .badge-card {
    width: var(--cracha-largura) !important;
    min-height: var(--cracha-altura) !important;
    margin: 0 !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
}