/* Importación de catálogos de proveedores (Fase 10) */

/* ─── Wizard ─────────────────────────────────────────────── */
.imp-wizard-card {
    background: var(--bg-surface);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    max-width: 100%;
    overflow: hidden;
}
.imp-wizard-ancho { max-width: 100%; }
.imp-wizard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    border-bottom: 1px solid var(--border, #E2E8F0);
}
.imp-wizard-head h2 { margin: 0; font-size: 1.1rem; }
.imp-wizard-body { padding: var(--space-6, 1.5rem); }
.imp-wizard-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
    border-top: 1px solid var(--border, #E2E8F0);
    background: var(--bg-subtle, #F8FAFC);
}

/* ─── Stepper ────────────────────────────────────────────── */
.imp-stepper { display: flex; align-items: center; gap: var(--space-2, 0.5rem); flex-wrap: wrap; }
.imp-step {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; color: var(--text-muted, #64748B);
}
.imp-step b {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--bg-muted, #E8ECF0); color: var(--text-muted, #64748B);
    font-size: 0.75rem;
}
.imp-step.activo { color: var(--brand-600, #2D6A4F); font-weight: 600; }
.imp-step.activo b { background: var(--brand-500, #40916C); color: #fff; }
.imp-step.hecho b { background: var(--brand-100, #D8F3DC); color: var(--brand-600, #2D6A4F); }
.imp-step-sep { color: var(--text-muted, #94A3B8); }

/* ─── Paso 1: subida ─────────────────────────────────────── */
.imp-file-name { margin-top: var(--space-3, 0.75rem); font-size: 0.9rem; color: var(--text, #1E293B); }
.imp-file-name i { color: var(--brand-500, #40916C); }
.imp-aviso { margin-top: var(--space-3, 0.75rem); font-size: 0.85rem; color: var(--brand-600, #2D6A4F); }
.imp-aviso:empty { display: none; }

/* ─── Paso 2: procesando ─────────────────────────────────── */
.imp-procesando { text-align: center; padding: var(--space-8, 2rem) var(--space-6, 1.5rem); }
.imp-progress {
    height: 10px; border-radius: 999px; background: var(--bg-muted, #E8ECF0);
    overflow: hidden; margin: var(--space-4, 1rem) auto; max-width: 480px;
}
.imp-progress-bar {
    height: 100%; background: var(--brand-500, #40916C);
    transition: width 0.4s ease; border-radius: 999px;
}
.imp-spin { display: inline-block; animation: imp-spin 1s linear infinite; }
@keyframes imp-spin { to { transform: rotate(360deg); } }

/* ─── Badges de estado de importación ────────────────────── */
.imp-estado {
    display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600;
}
.imp-estado-procesando { background: #EFF6FF; color: #2563EB; }
.imp-estado-en_revision { background: #FFFBEB; color: #D97706; }
.imp-estado-confirmada { background: #ECFDF5; color: #059669; }
.imp-estado-descartada { background: #F1F5F9; color: #64748B; }
.imp-estado-error { background: #FEF2F2; color: #EF4444; }
.imp-tipo { font-size: 0.7rem; color: var(--text-muted, #94A3B8); margin-left: 0.25rem; }
.imp-res { font-variant-numeric: tabular-nums; font-size: 0.85rem; }

/* ─── Semáforo de confianza ──────────────────────────────── */
.imp-sem {
    display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%;
    vertical-align: middle;
}
.imp-sem-verde { background: #22C55E; }
.imp-sem-amarillo { background: #F59E0B; }
.imp-sem-rojo { background: #EF4444; }
.imp-sem-gris { background: #CBD5E1; }

/* ─── Filtros de revisión ────────────────────────────────── */
.imp-revision-filtros {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
    border-bottom: 1px solid var(--border, #E2E8F0);
}
.imp-contadores { font-size: 0.85rem; }
.imp-c-ok { color: #059669; font-weight: 600; }
.imp-c-rev { color: #D97706; font-weight: 600; }
.imp-c-err { color: #EF4444; font-weight: 600; }
.imp-filtros-btns { display: flex; gap: var(--space-2, 0.5rem); flex-wrap: wrap; }
.imp-fbtn {
    border: 1px solid var(--border, #E2E8F0); background: var(--bg-surface, #fff);
    border-radius: var(--radius, 6px); padding: 0.3rem 0.7rem; font-size: 0.8rem;
    cursor: pointer; color: var(--text, #334155);
}
.imp-fbtn.activo { background: var(--brand-500, #40916C); color: #fff; border-color: var(--brand-500, #40916C); }

/* ─── Badges de acción ───────────────────────────────────── */
.imp-acc { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.imp-acc-crear { color: #059669; }
.imp-acc-act { color: #2563EB; }
.imp-acc-ign { color: #94A3B8; }
.imp-sube { color: #EF4444; font-weight: 600; }

/* ─── Panel lateral de edición (vista partida) ───────────── */
.imp-panel-split { display: flex; flex-direction: column; gap: var(--space-4, 1rem); }
.imp-panel-orig {
    background: var(--bg-subtle, #F8FAFC); border: 1px solid var(--border, #E2E8F0);
    border-radius: var(--radius, 6px); padding: var(--space-3, 0.75rem);
}
.imp-panel-orig h4 { margin: 0 0 var(--space-2, 0.5rem); font-size: 0.85rem; color: var(--text-muted, #64748B); }
.imp-orig-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.imp-orig-table th, .imp-orig-table td {
    text-align: left; padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--border, #EEF2F6);
    vertical-align: top;
}
.imp-orig-table th { color: var(--text-muted, #64748B); font-weight: 500; width: 40%; }

/* ─── Resumen ────────────────────────────────────────────── */
.imp-resumen p { margin: var(--space-2, 0.5rem) 0; font-size: 0.95rem; }

/* ─── Historial en ficha de proveedor ────────────────────── */
.imp-prov-actions { margin-bottom: var(--space-4, 1rem); }
.imp-map-row { align-items: center; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (min-width: 720px) {
    .imp-panel-split { display: block; }
    .imp-panel-orig { margin-bottom: var(--space-4, 1rem); }
}
@media (max-width: 640px) {
    .imp-revision-filtros { flex-direction: column; align-items: flex-start; }
    .imp-wizard-foot { flex-wrap: wrap; }
}