/* G11b — importar clientes por CSV (docs/spec-g11b-importar-clientes-tela.md). Só var(--...) do painel; alvo de toque >= 44 px. */

/* Botão da barra de Clientes: mesmo desenho do Exportar. */
#cl-import { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; }
#cl-import svg { width: 18px; height: 18px; flex: none; }
@media (min-width: 768px) {
  .cl .cl-bar #cl-import { order: 3; }
}
@media (max-width: 767px) {
  .cl .cl-bar #cl-import { order: 1; justify-content: center; padding: 0; }
  #cl-import .cl-export-txt { display: none; }
}

/* Painel: tela cheia, rola por dentro. */
#cl-imp {
  position: fixed; inset: 0; z-index: 90; box-sizing: border-box; overflow-x: hidden; overflow-y: auto;
  background: var(--bg); color: var(--text); padding: 16px; outline: none;
  overflow-wrap: anywhere;
}
#cl-imp * { box-sizing: border-box; min-width: 0; }
#cl-imp > * { max-width: 920px; margin-left: auto; margin-right: auto; }
#cl-imp p { margin: 0 0 12px; font-size: 16px; line-height: 24px; color: var(--text-muted); }
#cl-imp[aria-busy="true"] { cursor: progress; }
.cl-imp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cl-imp-top h2 { margin: 0; font-size: 22px; line-height: 30px; font-weight: 600; color: var(--text); }
#cl-imp button, #cl-imp select { min-height: 44px; min-width: 44px; font-size: 16px; }
#cl-imp button { display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; }
#cl-imp-close { padding: 0; width: 44px; height: 44px; }
#cl-imp-close svg { width: 20px; height: 20px; }
#cl-imp button:disabled { opacity: .5; cursor: not-allowed; }

/* Passo 1 */
.cl-imp-pick {
  display: flex; align-items: center; min-height: 64px; padding: 8px 12px; margin-bottom: 12px;
  border: 1px dashed var(--border-input); border-radius: 12px; background: var(--surface);
}
.cl-imp-pick input { width: 100%; min-height: 44px; font-size: 16px; }
#cl-imp-erro { min-height: 0; margin-bottom: 12px; font-size: 16px; line-height: 24px; color: var(--error); }
#cl-imp-erro:empty { display: none; }

/* Passo 2 */
.cl-imp-check { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 12px; font-size: 16px; line-height: 22px; cursor: pointer; }
.cl-imp-check input, #cl-imp input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.cl-imp-campos { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.cl-imp-campo { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--text-muted); }
.cl-imp-campo select {
  width: 100%; padding: 0 12px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-input); border-radius: 10px;
}
.cl-imp-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.cl-imp-acoes .cl-btn { flex: 1 1 160px; }

/* Passo 3 e 5: contadores e lista */
.cl-imp-contagens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.cl-imp-contagens > div {
  padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  font-size: 15px; line-height: 20px; color: var(--text-muted);
}
.cl-imp-contagens b { display: block; font-size: 26px; line-height: 32px; font-weight: 700; color: var(--text); }
.cl-imp-lista { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.cl-imp-row {
  display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); font-size: 16px; line-height: 22px;
  overflow-wrap: anywhere; word-break: break-word;
}
.cl-imp-nome { font-weight: 600; color: var(--text); overflow-wrap: anywhere; word-break: break-word; }
.cl-imp-row span { overflow-wrap: anywhere; word-break: break-word; }
.cl-imp-sit { font-size: 15px; color: var(--text-muted); }
.cl-imp-row[data-status="invalid"] .cl-imp-sit { color: var(--error); }
.cl-imp-mais { font-size: 15px; }
@media (min-width: 768px) {
  .cl-imp-campos { grid-template-columns: repeat(2, 1fr); }
  .cl-imp-contagens { grid-template-columns: repeat(5, 1fr); }
  .cl-imp-row { display: grid; grid-template-columns: 2fr 1.2fr 1.4fr; align-items: start; gap: 12px; }
}

/* Carregando e progresso */
.cl-imp-sk {
  height: 96px; margin-bottom: 12px; border-radius: 12px; background: var(--surface-2);
  animation: cl-imp-pulso 1.2s ease-in-out infinite;
}
@keyframes cl-imp-pulso { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .cl-imp-sk { animation: none; } }
#cl-imp-progress { height: 14px; margin: 8px 0 12px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.cl-imp-bar { display: block; height: 100%; background: var(--btn-bg); transition: width .2s ease; }