/* Beluga: seção "Exportar e importar" (Ajustes). Só variáveis do tema (beluga.css); nenhuma cor escrita aqui. */

.xfer { display: grid; gap: 36px; max-width: 1040px; }
.xfer__group { display: grid; gap: 14px; }
.xfer__title { font-size: 20px; letter-spacing: -0.01em; }
.xfer__intro { color: var(--muted); max-width: 70ch; margin-top: -8px; }
.xfer__stack { display: grid; gap: 16px; }
.xfer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.xfer__grid > .xfer__drop { grid-column: 1 / -1; align-items: center; flex-wrap: wrap; }

/* cartão: cabeçalho com ícone, corpo e rodapé de ações */
.xfer__card { display: grid; gap: 16px; align-content: space-between; }
.xfer__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.xfer__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.xfer__name { font-size: 16px; margin: 0; }
.xfer__lead { color: var(--muted); font-size: 14px; margin-top: 3px; max-width: 72ch; }
.xfer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; align-self: end; }
.xfer__card[data-card^='import'] .xfer__foot { padding-top: 4px; }

/* formulários dos cartões */
.xfer__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px 18px; align-items: start; padding-top: 6px; }
.xfer__choices { margin: 0; min-width: 0; }
.xfer__dlg > * { min-width: 0; } /* a prévia larga rola dentro do diálogo em vez de alargar tudo */
.xfer__tables-box > summary { display: block; }
.xfer__tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 4px 14px; max-height: 260px; overflow: auto; padding: 4px 2px; }
.xfer__tables > .row { grid-column: 1 / -1; padding-bottom: 6px; }
.xfer__check { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 6px; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; }
.xfer__check:hover { background: var(--raised); }
.xfer__check input { flex: none; width: 17px; height: 17px; accent-color: var(--accent-ink); }
.xfer__check small { color: var(--muted); }

/* prévia de texto (CSV, início de script) */
.xfer__previewbox { display: grid; gap: 6px; }
.xfer__preview { margin: 0; padding: 10px 12px; max-height: 190px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); color: var(--text); font-size: 12.5px; line-height: 1.5; white-space: pre; tab-size: 4; }
.xfer__fileinfo { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }

/* progresso */
.xfer__meter { height: 10px; }
.xfer__meter i { transition: width 0.2s ease; }
.xfer__meter--busy i { width: 35%; animation: xfer-slide 1.1s ease-in-out infinite alternate; }
@keyframes xfer-slide { from { margin-left: 0; } to { margin-left: 65%; } }
.xfer__progress-text { color: var(--muted); font-size: 13px; min-height: 1.4em; }

/* resultado */
.xfer__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0; }
.xfer__facts > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.xfer__facts dt { color: var(--muted); font-size: 12px; }
.xfer__facts dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.xfer__problems { max-height: 240px; }
.xfer__problems .tbl td { white-space: normal; max-width: none; }
.xfer__reason { overflow-wrap: anywhere; font-size: 13px; }

/* prévia com ligação de colunas (importar planilha) */
.xfer__map { max-height: 340px; }
.xfer__map .tbl th { vertical-align: bottom; min-width: 170px; font-weight: 500; }
.xfer__col { display: grid; gap: 6px; }
.xfer__col .input, .xfer__col .select { min-height: 34px; padding: 4px 8px; font-size: 13px; }
.xfer__colname { color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
.xfer__use { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.xfer__use input { width: 16px; height: 16px; accent-color: var(--accent-ink); }
.xfer__off { opacity: 0.45; }

@media (max-width: 560px) {
	.xfer { gap: 28px; }
	.xfer__head { grid-template-columns: minmax(0, 1fr); }
	.xfer__foot .btn { flex: 1 1 100%; }
	.xfer__map .tbl th { min-width: 150px; }
}