/* =====================================================================
   Camp AVP 2026 — Credenciamento (crachás para impressão)
   Medidas em milímetros: o que você vê na tela é o que sai no papel.
   Crachá: 91 x 130 mm · 4 por folha A4.
   ===================================================================== */

/* Cores das credenciais (as mesmas na tela e no papel) */
.cred[data-cor="azul"],     .leg[data-cor="azul"],     .extra-item[data-cor="azul"]     { --faixa:#10529e; --faixa-fg:#fff; }
.cred[data-cor="vermelha"], .leg[data-cor="vermelha"], .extra-item[data-cor="vermelha"] { --faixa:#c8102e; --faixa-fg:#fff; }
.cred[data-cor="preta"],    .leg[data-cor="preta"],    .extra-item[data-cor="preta"]    { --faixa:#14151a; --faixa-fg:#fff; }
.cred[data-cor="dourada"],  .leg[data-cor="dourada"],  .extra-item[data-cor="dourada"]  { --faixa:#d4a12a; --faixa-fg:#14151a; }
.cred[data-cor="verde"],    .leg[data-cor="verde"],    .extra-item[data-cor="verde"]    { --faixa:#14784a; --faixa-fg:#fff; }
.cred[data-cor="branca"],   .leg[data-cor="branca"],   .extra-item[data-cor="branca"]   { --faixa:#ffffff; --faixa-fg:#14151a; }

.cred-main { padding-block: 28px 60px; max-width: min(1240px, 96vw); }
.cred-intro { color: var(--cinza); max-width: 68ch; margin: 12px 0 0; }

/* ------------------------------ Legenda ---------------------------- */
.legenda { display:flex; flex-wrap:wrap; gap:10px; margin: 4px 0 18px; }
.leg {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--preto-2); border:1px solid var(--linha); border-radius:999px;
  padding: 6px 14px 6px 8px; font-size:.84rem; color: var(--cinza);
}
.leg i {
  width:14px; height:14px; border-radius:50%;
  background: var(--faixa); border:1px solid rgba(120,120,130,.45);
}
.leg b { color: var(--branco); font-family: var(--f-cond); }
.leg.zero { opacity:.45; }

/* --------------------------- Ações e filtros ----------------------- */
.cred-check {
  display:inline-flex; align-items:center; gap:8px; color: var(--cinza);
  font-size:.92rem; padding: 10px 4px; white-space:nowrap;
}
.cred-check input { width:17px; height:17px; accent-color: var(--vermelho); }
.cred-acoes { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom: 20px; }
.cred-acoes .hint { color: var(--ok); }

/* --------------------------- Crachás avulsos ----------------------- */
.avulsos {
  background: var(--preto-2); border:1px solid var(--linha);
  border-radius: var(--raio); padding: 16px 20px; margin-bottom: 26px;
}
.avulsos > summary {
  cursor:pointer; font-family: var(--f-cond); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; font-size:.95rem;
}
.extra-form { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.extra-form .field { flex: 1 1 180px; margin:0; }
.extra-form .field.estreito { flex: 0 0 84px; }
.extra-form .field.acao { flex: 0 0 auto; }
.extra-form label { display:block; font-size:.8rem; color: var(--cinza); margin-bottom:6px; }
.extra-form input, .extra-form select {
  width:100%; background: var(--preto); border:1px solid var(--carvao); color: var(--branco);
  border-radius:10px; padding: 11px 12px; font-family: var(--f-body); font-size:.95rem;
}
.lista-extras { display:grid; gap:8px; margin-top:16px; }
.extra-item {
  display:flex; align-items:center; gap:12px;
  background: var(--preto); border:1px solid var(--linha); border-radius:10px; padding: 9px 14px;
}
.extra-item .ponto {
  width:12px; height:12px; border-radius:50%; flex:none;
  background: var(--faixa); border:1px solid rgba(120,120,130,.45);
}
.extra-item div { flex:1; min-width:0; }
.extra-item b { display:block; }
.extra-item small { color: var(--cinza-2); }
.extra-num { font-family: var(--f-cond); color: var(--cinza-2); font-size:.85rem; white-space:nowrap; }

/* ============================== FOLHAS ============================== */
.folhas { margin-top: 10px; }
.grupo { display:block; }

/* Folha divisória de cada faixa de letras */
.separador {
  width: 210mm; max-width:100%; min-height: 120mm;
  margin: 0 auto 8mm; padding: 24mm 18mm;
  background:#fff; color:#14151a;
  border:1px solid var(--linha); border-radius: 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.sep-marca { font-family: var(--f-display); font-size: 30px; letter-spacing:.02em; color:#0a0a0b; }
.sep-marca b { color:#c8102e; font-weight:inherit; }
.sep-faixa {
  font-family: var(--f-display); font-size: 150px; line-height:1;
  margin: 14px 0 10px; color:#0a0a0b; letter-spacing:.04em;
}
.sep-info {
  font-family: var(--f-cond); text-transform:uppercase; letter-spacing:.18em;
  font-size: 15px; color:#c8102e;
}
.sep-nota { font-size: 12px; color:#777; margin-top: 10px; }

/* Folha A4 com 4 crachás */
.folha {
  width: 210mm; max-width:100%;
  margin: 0 auto 8mm; padding: 6mm;
  background:#fff; border:1px solid var(--linha); border-radius:4px;
  display:grid; grid-template-columns: repeat(2, 91mm); grid-auto-rows: 130mm;
  gap: 1mm; justify-content:center; align-content:start;
}

/* ============================== CRACHÁ ============================== */
.cred {
  position:relative;
  width: 91mm; height: 130mm;
  background:#fff; color:#14151a;
  border: 1px dashed #c9c9d0;          /* guia de corte */
  display:flex; flex-direction:column; overflow:hidden;
}
.cred-faixa {
  background: var(--faixa); color: var(--faixa-fg);
  min-height: 17mm; display:flex; align-items:center; justify-content:center;
  padding: 3mm 5mm; text-align:center;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.cred-faixa span {
  font-family: var(--f-cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size: 12px; line-height:1.25;
}
.cred-corpo {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 5mm 6mm 3mm; gap: 1mm;
}
.cred-marca { font-family: var(--f-display); font-size: 19px; letter-spacing:.03em; color:#0a0a0b; }
.cred-marca b { color:#c8102e; font-weight:inherit; }
.cred-sub {
  font-family: var(--f-cond); text-transform:uppercase; letter-spacing:.14em;
  font-size: 8.5px; color:#8a8a92; margin-bottom: 3mm;
}
.cred-nome {
  font-family: var(--f-display); font-size: 30px; line-height:1.02;
  color:#0a0a0b; text-transform:uppercase; word-break:break-word; margin:0;
}
.cred-nome.longo       { font-size: 24px; }
.cred-nome.muito-longo { font-size: 19px; }
.cred-cidade { font-size: 12px; color:#4a4a55; margin-top: 2.5mm; }
.cred-cat {
  font-family: var(--f-cond); text-transform:uppercase; letter-spacing:.08em;
  font-size: 10px; color:#6a6a76; margin-top: 1.5mm;
}
.cred-dias {
  display:inline-block; margin-left:4px; padding: 1px 7px; border-radius:999px;
  background:#f1f1f4; border:1px solid #e0e0e6; color:#14151a;
}
.cred-rodape {
  display:flex; align-items:center; gap: 4mm;
  padding: 4mm 6mm; border-top: 1px solid #e6e6ea;
  border-bottom: 4mm solid var(--faixa);
}
.cred-qr { width: 20mm; height: 20mm; flex:none; }
.cred-qr svg { width:100%; height:100%; display:block; }
.cred-num { display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.cred-num span {
  font-family: var(--f-cond); text-transform:uppercase; letter-spacing:.16em;
  font-size: 8px; color:#9a9aa4;
}
.cred-num b { font-family: var(--f-cond); font-size: 15px; letter-spacing:.05em; color:#0a0a0b; }
.cred-num small { font-size: 8.5px; color:#9a9aa4; margin-top: 1mm; }

/* borda branca precisa de contorno para não sumir no papel */
.cred[data-cor="branca"] .cred-faixa { border: 1px solid #d5d5dc; border-bottom-color:#c9c9d0; }
.cred[data-cor="branca"] .cred-rodape { border-bottom-color:#d5d5dc; }

/* controle de cor (só na tela) */
.cred-editar {
  position:absolute; top: 2mm; right: 2mm; display:flex; align-items:center; gap:6px;
}
.cred-editar select {
  background: rgba(255,255,255,.94); border:1px solid #c9c9d0; color:#14151a;
  border-radius:7px; padding: 3px 6px; font-family: var(--f-body); font-size: 10px; max-width: 34mm;
}
.tag-impressa {
  background: rgba(15,122,74,.14); color:#0f7a4a; border:1px solid rgba(15,122,74,.4);
  border-radius:999px; padding: 2px 8px; font-family: var(--f-cond);
  text-transform:uppercase; letter-spacing:.06em; font-size: 9px;
}
.cred.impressa { opacity: .72; }

/* ============================ RESPONSIVO =========================== */
@media (max-width: 900px) {
  /* Em telas pequenas a prévia vira uma coluna só (a impressão não muda) */
  .folha, .separador { width:100%; padding: 4mm; }
  .folha { grid-template-columns: 1fr; grid-auto-rows:auto; }
  .cred { width:100%; height:auto; min-height: 120mm; }
  .separador { min-height: 60mm; padding: 12mm 8mm; }
  .sep-faixa { font-size: 90px; }
  .extra-form .field { flex: 1 1 100%; }
  .extra-form .field.estreito { flex: 0 0 90px; }
  .extra-form input, .extra-form select { font-size: 16px; }
  .cred-acoes .btn { flex:1 1 100%; justify-content:center; }
}

/* ============================= IMPRESSÃO =========================== */
@media print {
  @page { size: A4 portrait; margin: 6mm; }

  body { background:#fff !important; }
  .cred-main { max-width:none !important; padding:0 !important; }
  .folhas { margin:0 !important; }

  /* cada folha ocupa exatamente uma página */
  .separador, .folha {
    width: auto; max-width:none; margin: 0; border: none; border-radius:0;
    break-after: page; page-break-after: always;
  }
  .folha { padding: 0; gap: 1mm; grid-template-columns: repeat(2, 91mm); grid-auto-rows: 130mm; }
  .separador { min-height: 240mm; justify-content:center; }

  /* a última folha não gera uma página em branco no fim */
  .grupo.ultimo .folha:last-child { break-after: auto; page-break-after: avoid; }

  .cred { break-inside: avoid; page-break-inside: avoid; }
  .cred-editar { display:none !important; }
  .cred.impressa { opacity: 1; }
}