/* views-cad.css — telas de CADASTRO (Leitos/Locais, Materiais, Colaboradoras, Tarefas,
   Motivos, Planos, Segmentos, Clientes, Usuários, Solicitantes, Trens & Lavagens).
   Usa os padrões compartilhados de styles.css §22 (.toolbar, tabela → cartão via responsive.js).

   Classes desta folha (geradas por app.js — cadToolbar / cadBtn / cadFilter):
   • .cad-view            wrapper de tela (toolbar + painel da tabela)
   • .cad-toolbar         .toolbar com busca (.cad-q) + selects (.cad-sel) + .tb-count + .tb-actions
   • .panel-flush         painel que só embrulha a tabela (some no celular quando vira cartões)
   • .cad-table / .cad-compact / .cad-acts   tabela de cadastro, versão densa, célula de ações
   • .ib-lbl              rótulo do .icon-btn: escondido no desktop, visível no cartão do celular
   • .is-inactive         linha inativa (esmaecida, ações seguem nítidas)
   • .cad-empty-td / .cad-none / .linklike   vazio dentro da tabela / “nada com esse filtro”
   • Formulários: .modal-form (.modal-wide) .modal-lead .fgroup(legend) .fgrid(.fgrid-3 .fgrid-re .fgrid-seg)
     .f-span .f-narrow .f-hint .f-label .opt .check-row .check-cards/.check-card .input-unit .f-num
     .file-drop .xls-cols .bulk-preview(.is-warn .is-bad) .sb-tools .sector-list .foot-count
   • Painéis: .panel-lead .panel-warn .panel-narrow .param-grid .param-sep .param-foot
     .task-grid .task-panel .add-row(.add-row-tt) .list-none .wc-grid .wc-form(-types/-trains/-places) .wc-scroll
   • Miúdos: .btn-sm .cl-logo .cl-initial .badge-row .badge-wrap .cell-mail .h3-sub .qr-actions .qr-loc .qr-cta
     .cad-skel .sr-only */

/* ── Linhas e tabela ─────────────────────────────────────────────── */
.cad-view tr[hidden], .cad-table tr[hidden] { display: none !important; }
.panel-flush { padding: 4px 6px; }
.panel-flush > .table-wrap { margin: 0; }
.cad-table th:last-child, .cad-table td.cad-acts { padding-right: 14px; }
.cad-table td.cad-acts { white-space: nowrap; width: 1%; }
.cad-acts .icon-btn, .cad-acts .btn-sm { vertical-align: middle; }
.cad-acts > * + * { margin-left: 6px; }
.cad-compact th, .cad-compact td { padding-top: 8px; padding-bottom: 8px; }
.cad-table tbody tr:last-child > td { border-bottom: none; }

.ib-lbl { display: none; }
.is-inactive > td:not(.cad-acts):not(.td-actions) { opacity: .5; }

.cad-empty-td { padding: 0 !important; }
.cad-empty-td > .empty { padding-block: clamp(28px, 5vw, 48px); }
.cad-none td.empty { padding: 28px 16px; }
.linklike { background: none; border: none; padding: 2px 4px; margin-left: 4px; color: var(--blue); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 0; border-radius: 4px; }
.linklike:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.btn.btn-sm { padding: 6px 12px; min-height: 34px; font-size: 12.5px; gap: 6px; }
.btn.btn-sm svg { width: 15px; height: 15px; }

.cell-mail { color: var(--gray-600); overflow-wrap: anywhere; }
.badge-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.badge.badge-wrap { white-space: normal; overflow-wrap: anywhere; max-width: 260px; line-height: 1.3; }
.cl-logo { width: 36px; height: 36px; flex: none; border-radius: 9px; object-fit: contain; background: var(--gray-100); border: 1px solid var(--gray-200); }
.cl-initial { display: inline-grid; place-items: center; font-weight: 800; font-size: 15px; color: var(--blue); background: var(--blue-50); border-color: var(--blue-100); }

/* toolbar de cadastro: ação principal no fim da barra */
.cad-toolbar .tb-actions { margin-left: 0; }
.cad-toolbar > .client-select { width: auto; max-width: 220px; min-width: 140px; }
.cad-toolbar > .tb-search { flex: 1 1 200px; }
.ib-emo { font-size: 15px; line-height: 1; }
.cad-toolbar .tb-count + .tb-actions { margin-left: 4px; }

/* ── Painéis ─────────────────────────────────────────────────────── */
.panel-lead { color: var(--gray-600); font-size: var(--fs-sm); line-height: 1.5; margin: -6px 0 16px; max-width: 72ch; }
.panel-warn { background: var(--warning-bg); border-color: var(--warning-border); }
.panel-warn h3, .panel-warn h3 svg { color: var(--warning-strong, var(--warning)); }
.panel-warn .table-wrap { background: var(--white); border-radius: var(--r-sm); border: 1px solid var(--warning-border); }
.panel-narrow { max-width: 880px; }
.h3-sub { font-weight: 500; color: var(--gray-500); }
.list-none { color: var(--gray-500); font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cad-skel { padding: 6px 2px 10px; }
.cad-skel .sk-line { height: 14px; margin: 14px 0; }
.cad-skel .sk-line.short { width: 58%; }

/* Tarefas & Checklist */
.param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 4px 18px; max-width: 920px; }
.param-grid .field { margin-bottom: 8px; }
.param-sep { height: 1px; background: var(--gray-150); margin: 14px 0 16px; }
.param-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.param-foot #min-status { font-size: 13px; font-weight: 600; color: var(--success); }
.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; align-items: start; }
.task-grid > .panel { margin-bottom: 0; }
.task-panel h3 .badge { font-size: 10.5px; padding: 1px 8px; min-height: 18px; letter-spacing: 0; }
.add-row { display: flex; gap: 8px; margin-top: 16px; }
.add-row > .add-inp { flex: 1 1 auto; min-width: 0; }
.add-row > .btn { flex: none; }
.add-row.add-row-tt { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.add-row-tt > #tt-name { grid-column: 1 / -1; }
.param-grid .input-unit > input { flex: 0 1 140px; }

.input-unit { display: flex; align-items: center; gap: 10px; }
.input-unit > input { flex: 1 1 auto; min-width: 0; }
.input-unit > span { color: var(--gray-500); font-size: 13px; font-weight: 600; white-space: nowrap; }
.input-unit.f-num, .f-num { max-width: 220px; }

/* Trens & Lavagens */
.wc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.wc-grid > .panel { margin-bottom: 0; }
@media (min-width: 1100px) {
  .wc-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .wc-grid > .wc-types { grid-column: 1 / -1; }
}
.wc-form { display: grid; gap: 10px; align-items: end; margin-bottom: 14px; }
.wc-form .field { margin: 0; }
.wc-form-types { grid-template-columns: 110px minmax(0, 1fr) 96px auto; max-width: 760px; }
.wc-form-trains { grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) auto; }
.wc-form-places { grid-template-columns: minmax(0, 1fr) auto; }
.wc-form > .btn { min-height: 44px; }
.wc-scroll { max-height: min(60vh, 560px); overflow-y: auto; }
.wc-scroll thead th { position: sticky; top: 0; background: var(--white); z-index: 2; }

/* QR p/ impressão */
.qr-actions { flex: 0 0 auto !important; align-items: center; gap: 8px; }
.qr-loc { font-weight: 400; color: #4b5068; }
.qr-cta { font-size: 11px; color: #4b5068; margin-top: 4px; }

/* ── Formulários em modal ────────────────────────────────────────── */
.modal.modal-form { --mpad: clamp(20px, 2.4vw, 30px); max-width: 560px; }
.modal.modal-form.modal-wide { max-width: 680px; }
.modal-lead { color: var(--gray-600); font-size: var(--fs-sm); line-height: 1.5; margin: -12px 0 18px; max-width: 62ch; }
.fgroup { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.fgroup + .fgroup, .fgroup + .cred-box, .fgroup + .field { margin-top: 8px; }
.fgroup > legend { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; margin-bottom: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--gray-900); }
.fgroup > legend::after { content: ''; flex: 1; height: 1px; background: var(--gray-150); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.fgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid-re { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fgrid-re > .field:nth-child(1) { grid-column: span 1; }
.fgrid-re > .field:nth-child(2) { grid-column: span 3; }
.fgrid-re > .field:nth-child(3), .fgrid-re > .field:nth-child(4) { grid-column: span 2; }
.fgrid-seg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 128px; }
.fgrid > .f-span { grid-column: 1 / -1; }
.f-hint { color: var(--gray-500); font-size: 12.5px; line-height: 1.45; margin: 6px 0 0; font-weight: 500; }
.fgrid > .f-hint { margin: -8px 0 14px; }
.fgroup > .f-hint { margin: -8px 0 14px; }
.fg-lead.f-hint { margin: -4px 0 12px; }
.role-hint { margin: -8px 0 14px; min-height: 2.9em; }
.field label .opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--gray-400); margin-left: 4px; }
.f-label { display: block; font-size: 11px; color: var(--gray-500); margin-bottom: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }

.field label.check-row, label.check-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin: 0;
  text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--gray-800); font-weight: 500; }
.check-row > input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; flex: none; margin: 1px 0 0; accent-color: var(--brand-solid); }
.check-row b { display: block; font-weight: 700; color: var(--gray-900); line-height: 1.35; }
.check-row small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--gray-500); line-height: 1.45; max-width: 70ch; }

.check-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field label.check-card, .check-card { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; min-height: 48px;
  border: 1px solid var(--gray-300); border-radius: var(--r-sm); background: var(--white); cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--gray-800);
  transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1); }
.check-card > input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; accent-color: var(--brand-solid); }
.check-card > span { display: inline-flex; align-items: center; gap: 8px; }
.check-card svg { width: 17px; height: 17px; color: var(--gray-500); }
.check-card:has(input:checked) { border-color: var(--blue); background: var(--blue-50); color: var(--blue); }
.check-card:has(input:checked) svg { color: var(--blue); }
.check-card:has(input:focus-visible) { box-shadow: var(--ring); }

.cred-box .step-title { display: flex; align-items: center; gap: 8px; }
.cred-box .step-title svg { width: 16px; height: 16px; color: var(--blue); }
.cred-box { padding-bottom: 14px; }
.cred-box .f-hint { margin-top: -6px; }

/* rótulos que moram dentro de .field mas não são títulos de campo */
.field label.secopt { display: inline-flex; margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--gray-800); }
.field .secopt > input[type="checkbox"] { width: 16px; height: 16px; flex: none; }
.modal-form .field label.btn { display: inline-flex; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--gray-700); margin: 0; }

/* Importar Excel */
.xls-cols { display: inline-grid; grid-template-columns: repeat(4, auto); margin: 0 0 14px; border: 1px solid var(--gray-200); border-radius: var(--r-xs, 6px); overflow: hidden; }
.xls-cols > span { padding: 5px 12px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--gray-700); background: var(--gray-50); }
.xls-cols > span + span { border-left: 1px solid var(--gray-200); }
.file-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 16px;
  border: 1.5px dashed var(--gray-300); border-radius: var(--r); background: var(--gray-50); cursor: pointer; text-align: center;
  transition: border-color var(--dur-1), background-color var(--dur-1); }
.file-drop > svg { width: 28px; height: 28px; color: var(--blue); stroke-width: 1.7; }
.file-drop .fd-t { font-weight: 700; color: var(--gray-900); font-size: 14.5px; }
.file-drop .fd-s { font-size: 12.5px; color: var(--gray-500); overflow-wrap: anywhere; }
.file-drop > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop:focus-within { border-color: var(--blue); box-shadow: var(--ring); }
.file-drop.has-file { border-style: solid; border-color: var(--success-border); background: var(--success-bg); }
.file-drop.has-file .fd-s { color: var(--success); font-weight: 600; }
@media (hover: hover) { .file-drop:hover { border-color: var(--blue-200); background: var(--blue-50); } }

/* Gerar em lote: prévia ao vivo */
.field-hint.bulk-preview { text-align: left; font-size: 13.5px; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--gray-50); border: 1px solid var(--gray-150); color: var(--gray-700); line-height: 1.45; }
.bulk-preview .bp-n { font-family: var(--mono); font-size: 15px; color: var(--gray-950); }
.bulk-preview.is-warn { background: var(--warning-bg); border-color: var(--warning-border); }
.bulk-preview.is-warn .bp-n { color: var(--danger); }
.bulk-preview.is-bad { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); font-weight: 600; }

/* Setores em massa */
.sb-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sb-tools > .tb-search { flex: 1 1 220px; }
.sector-pick.sector-list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-height: 340px; margin-top: 10px; }
.sector-list .secopt { width: 100%; justify-content: flex-start; min-height: 40px; border-radius: var(--r-sm); }
.sector-list .sl-none { padding: 8px; }
.modal-foot .foot-count { margin-right: auto; font-size: 12.5px; font-weight: 600; align-self: center; }

/* Rodapé fixo também no desktop para formulários longos */
@media (min-width: 769px) {
  .modal.modal-form { padding-bottom: 0; }
  .modal.modal-form > .modal-foot { position: sticky; bottom: 0; z-index: 2; margin: 22px calc(-1 * var(--mpad)) 0; padding: 14px var(--mpad);
    background: var(--white); border-top: 1px solid var(--gray-150); border-radius: 0 0 var(--r-lg) var(--r-lg); }
}

/* ── Celular ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* painel que embrulha a tabela some: os cartões já são superfícies */
  .panel-flush:has(table.rl-cards) { padding: 0; background: transparent; border: none; box-shadow: none; }
  .cad-toolbar .tb-count { order: 10; }

  /* ações do cartão: uma faixa só — ícone com rótulo curto embaixo, todos do mesmo tamanho */
  table.rl-cards.cad-table > tbody > tr > td.td-title { flex: 1 1 calc(100% - 72px); }
  table.rl-cards.cad-table > tbody > tr > td.td-title .badge { white-space: nowrap; margin-left: 4px; vertical-align: 2px; }
  table.rl-cards.cad-table > tbody > tr > td.td-actions.cad-acts { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding-top: 8px; }
  table.rl-cards > tbody > tr > td.cad-acts > * + * { margin-left: 0; }
  table.rl-cards.cad-table > tbody > tr > td.cad-acts .icon-btn { width: 100%; justify-self: stretch; height: auto; min-height: 50px; padding: 6px 1px 5px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; border-radius: var(--r-sm); }
  table.rl-cards.cad-table > tbody > tr > td.cad-acts .icon-btn svg { width: 18px; height: 18px; }
  table.rl-cards.cad-table > tbody > tr > td.cad-acts .icon-btn .ib-lbl { display: block; font-size: 10.5px; font-weight: 700; line-height: 1.1; letter-spacing: .01em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
  table.rl-cards.cad-table > tbody > tr > td.cad-acts .icon-btn.del { color: var(--danger); border-color: var(--danger-border); }
  table.rl-cards.cad-table > tbody > tr > td.cad-acts .btn-sm { min-height: 50px; justify-content: center; }
  table.rl-cards.rl-compact.cad-table > tbody > tr > td.cell-mail:not(.td-title):not(.td-key):not(.td-actions) { flex-basis: 100%; }
  .is-inactive.rl-row, table.rl-cards > tbody > tr.is-inactive { background: var(--gray-50); }

  /* formulários: uma coluna */
  .fgrid, .fgrid-3, .fgrid-re { grid-template-columns: minmax(0, 1fr); }
  .fgrid-re > .field:nth-child(n) { grid-column: auto; }
  .fgrid.fgrid-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgrid-seg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fgrid-seg > .field:nth-child(3) { grid-column: 1 / -1; }
  .modal-lead { margin-top: -10px; }
  .sb-tools > .btn { flex: 1 1 auto; justify-content: center; }
  .modal-foot .foot-count { flex: 1 1 100%; text-align: center; margin: 0 0 2px; }
  .input-unit.f-num, .f-num { max-width: none; }

  /* Tarefas */
  .param-foot > .btn { flex: 1 1 100%; justify-content: center; }
  .param-foot #min-status { order: 2; width: 100%; text-align: center; }
  .add-row { flex-wrap: wrap; }
  .add-row > .add-inp { flex: 1 1 100%; }
  .add-row > .btn { flex: 1 1 auto; justify-content: center; }
  .tt-row { flex-wrap: wrap; row-gap: 6px; }
  .tt-row .tt-nm { flex: 1 1 100%; }

  /* Trens & Lavagens */
  .wc-form-types { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wc-form-types > .field:nth-child(2) { grid-column: 1 / -1; order: 3; }
  .wc-form-types > .btn { grid-column: 1 / -1; order: 4; }
  .wc-form-trains { grid-template-columns: 84px minmax(0, 1fr); }
  .wc-form-trains > .field:nth-child(3), .wc-form-trains > .btn { grid-column: 1 / -1; }
  .wc-form-places { grid-template-columns: minmax(0, 1fr); }
  .wc-form > .btn { justify-content: center; }
  .wc-scroll { max-height: none; }

  .qr-actions { width: 100%; }
  .qr-actions > .seg { flex: 1 1 100%; }
}

@media print {
  .cad-toolbar, .ib-lbl { display: none !important; }
  .is-inactive > td { opacity: 1 !important; }
}

/* ============================== ACESSO DAS COLABORADORAS (fase 3 · access) ============================== */
.acc-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acc-cred { flex-basis: 100%; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.acc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; min-height: 22px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; color: var(--blue); background: var(--blue-50); border: 1px solid var(--blue-100); white-space: nowrap; }
.acc-badge svg { width: 13px; height: 13px; }
.acc-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.acc-inline .btn { margin-left: auto; }
.modal-acc .acc-sum { display: grid; gap: 8px; justify-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.modal-acc .acc-sum .cell-name span { display: flex; flex-direction: column; }
.modal-acc .acc-sum small { color: var(--muted); font-size: 12.5px; }
.modal-acc .acc-sum .modal-lead { margin: 0; }
.acc-acts { display: grid; }
.acc-act { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.acc-act > div:first-child { flex: 1; min-width: 0; }
.acc-act p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.acc-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.acc-act .btn svg { width: 17px; height: 17px; }
@media (max-width: 600px) {
  .acc-act { flex-direction: column; align-items: stretch; gap: 10px; }
  .acc-btns { justify-content: stretch; }
  .acc-btns .btn, .acc-act > .btn { flex: 1; }
  .acc-inline .btn { margin-left: 0; width: 100%; }
}

/* Folha de crachás — CR80 (85,6 × 54 mm), 2 por linha no A4 */
.badge-print .print-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.badge-print .print-head .t { font: 600 var(--fs-xl)/1.15 var(--serif); color: var(--ink); letter-spacing: -.02em; }
.badge-print .print-head .sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.id-badge { aspect-ratio: 85.6 / 54; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: 12px;
  background: #fff; color: #0A0E24; border: 1px solid #D8DFEB; box-shadow: var(--shadow-sm); break-inside: avoid; page-break-inside: avoid; }
.idb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; min-height: 38px;
  background: #1B0DAE; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.idb-logo { height: 24px; max-width: 45%; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px 4px; }
.idb-brand { height: 18px; margin-left: auto; filter: brightness(0) invert(1); }
.idb-body { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; min-height: 0; }
.idb-id { min-width: 0; }
.idb-name { font: 600 18px/1.15 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idb-re { margin-top: 6px; font: 500 13px var(--mono); color: #2F3652; }
.idb-re b { font-size: 16px; color: #0A0E24; }
.idb-role { margin-top: 2px; font-size: 11.5px; color: #5B6478; }
.idb-qr { width: clamp(96px, 34%, 128px); aspect-ratio: 1; image-rendering: pixelated; }
.idb-foot { display: flex; justify-content: space-between; gap: 8px; padding: 5px 12px; font-size: 9.5px; color: #5B6478; border-top: 1px dashed #BCC5D6; }
.badge-warn { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 13px; }
.badge-warn svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
@media print {
  @page { size: A4; margin: 10mm; }
  .badge-print .print-head, .badge-warn { display: none !important; }
  .badge-grid { grid-template-columns: repeat(2, 85.6mm); gap: 6mm; justify-content: center; }
  .id-badge { width: 85.6mm; height: 54mm; aspect-ratio: auto; box-shadow: none; border: 0.3mm solid #999; border-radius: 3mm; }
  .idb-top { min-height: 0; padding: 2mm 3mm; }
  .idb-body { padding: 2mm 3mm; }
  .idb-qr { width: 27mm; }
  .idb-name { font-size: 12.5pt; }
  .idb-foot { font-size: 6.5pt; padding: 1.2mm 3mm; }
}
/* crachá na tela: coluna do QR fixa (largura em % numa coluna auto é cíclica) */
.idb-body { grid-template-columns: minmax(0, 1fr) clamp(96px, 30vw, 128px); }
.idb-qr { width: 100%; }
@media print { .idb-body { grid-template-columns: minmax(0, 1fr) 27mm; } }